Web.Admin/2014/css/responsivegridsystem.css
/* RESPONSIVE GRID SYSTEM ============================================================================= */
/* BASIC PAGE SETUP ============================================================================= */
body {
margin : 0 auto;
padding : 0;
font : 100%/1.4 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
background-image:url(../images/header_bkg.jpg);
background-repeat:repeat-x;
color: #666;
font-size:14px;
}
/* LINKS ============================================================================= */
a:link {
color: #990000;
text-decoration:none;
}
a:visited {
color: #990000;
text-decoration:none;
}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/* HEADINGS ============================================================================= */
h1, h2, h3, h4, h5, h6 {
font-family: MuseoSlab300, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
font-weight : normal;
margin-top: 0px;
letter-spacing: -1px;
}
h1 {
font-family: LeagueGothicRegular, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
color: #000;
margin-bottom : 0.2em;
font-size : 6em; /* 96 / 16 */
line-height : 1.4;
}
h2 {
margin-bottom : .5em;
margin-top : .5em;
font-size : 2.75em; /* 40 / 16 */
line-height : 1.2;
word-spacing:5px;
font-family: 'bebasregular';
color: #990000;
}
h3 {
color: #900;
margin-bottom : 1em;
letter-spacing: -1px;
font-size : 1.75em; /* 28 / 16 */
line-height : 1.3;
word-spacing:4px;
font-family: 'bebasregular';
}
h4 {
margin-bottom : 0.5em;
font-size : 1.5em; /* 24 / 16 */
line-height : 1.25;
font-family: 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
font-weight:bold;
border-bottom: dotted 1px #000;
}
.lanedraw h4 {
border:none;
text-align:left;
margin-top:20px;
}
footer h4 {
color: #ccc;
}
h5 {
color: #555;
font-family: 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
font-weight:bold;
font-size:12px;
margin-bottom:0px;
}
h6 {
color: #666;
font-size : 1em; /* 16 / 16 */ }
/* TYPOGRAPHY ============================================================================= */
p, ol, ul, dl, address {
margin-bottom : 10px;
font-size : 1em; /* 16 / 16 = 1 */ }
.lanedraw th, td {text-align:center;padding:5px;}
/* HEADER ============================================================================= */
#header {
margin:0px;
padding:0px;
margin-top:40px;
}
#logo {
position:absolute;
z-index:20;
margin-top:-30px;
margin-left:20px;
}
#mobileLogo {
display:none;
}
#socialLinks {
text-align:right;
width:100%;
height:24px;
color:#fff;
font-weight:bold;
font-size:14px;
}
#headerImage {
height:289px;
background-image:url('images/header_image_1.jpg');
background-repeat:none;
background-position:center;
border:10px solid #fff;
}
#photoCredit {
text-align:right;
color:#999;
margin-right:25px;
margin-left:25px;
margin-top:-10px;
}
@media screen and (max-width:480px) {
#header {
margin-top:10px;
}
#logo {display:none;}
#mobileLogo {
display:block;
text-align:center;
}
#socialLinks {
text-align:center;
margin-top:10px;
}
#photoCredit {
text-align:center;
}
}
/* RESPONSIVE NAVIGATION ============================================================================= */
#navigation {
text-align:right;
background-image:url('../images/nav_bkg.png');
background-repeat:repeat-x;
width:100%;
height:54px;
font-family: 'bebasregular';
}
.nav-collapse.disable-pointer-events {
pointer-events: none !important;
}
.nav-collapse {
z-index: 1;
background-color:#000;
}
.nav-collapse, .nav-collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.nav-collapse, .nav-collapse ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
float: left
}
@media screen and (max-width:920px) {
.nav-collapse a:focus, .nav-collapse a:hover {
outline: none;
background: #990000;
}
}
@media screen and (min-width:920px) {
.nav-collapse, .nav-collapse ul {
text-align: right;
padding-right:15px;
}
.nav-collapse {
background: transparent;
margin-top:25px;
}
}
.nav-collapse li {
float: left;
width: 100%;
display: block
}
@media screen and (min-width:920px) {
.nav-collapse li {
float: none;
display: inline-block;
*display:block;
*float:left;
width: auto;
margin-left: .4em;
margin-right: .4em
}
}
.nav-collapse a {
text-transform: uppercase;
font-weight: 400;
font-size: 112.5%;
color:#fff;
text-decoration: none;
width: 100%;
border-bottom: 1px solid #666;
padding: .5em 1em;
float: left
}
.nav-collapse a:focus {
outline: none
}
@media screen and (min-width:920px) {
.nav-collapse a {
_float: none;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
font-size: 1.1em;
color:#000;
border: 0;
}
.nav-collapse a:hover, a:active {
color: #990000;
}
}
@media screen and (min-width:920px) {
.nav-collapse .active a {
-webkit-font-smoothing: subpixel-antialiased;
}
.nav-collapse .active a:hover {
text-decoration: none
}
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden
}
@media screen and (min-width:920px) {
.js .nav-collapse {
position: relative !important;
max-height: none
}
}
.nav-collapse.opened {
max-height: 9999px
}
.nav-toggle {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-top:12px;
width: 35px;
height: 42px;
float: right;
text-indent: -9999px;
overflow: hidden;
display: block;
background: transparent url("../images/hamburger_blk.gif") no-repeat 50% 33%
}
@media screen and (min-width:920px) {
.nav-toggle {
display: none
}
}
nav ol, nav ul {
list-style: none;
margin: 0;
padding: 0
}
/* MAIN LAYOUT ============================================================================= */
#skiptomain { display: none; }
#wrapper {
width: 100%;
position: relative;
text-align: left;
}
#maincontentcontainer {
width: 100%;
}
#maincontent{
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 900px; /* 1200px / 13 */
margin: 0 auto;
padding: 1em 0px;
color: #333;
line-height: 1.5em;
position: relative;
}
.maincontent{
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 92.3em; /* 1200px / 13 */
margin: 0 auto;
padding: 1em 0px;
color: #333;
line-height: 1.5em;
position: relative;
}
#footercontainer {
width: 100%;
text-align:right;
border-top: 2px solid #666;
background-color:#ccc;
}
footer {
clear: both;
width: 80%; /* 1000px / 1250px */
font-size: 0.8125em; /* 13 / 16 */
max-width: 900px; /* 1200px / 13 */
margin: 0 auto;
padding: 20px 0px 10px 0px;
color: #666;
}
footer a:link, footer a:visited { color: #666; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
.content {
background-color:#fff;
}
.outerContainer {
display: table;
}
.innerContainer {
margin: auto;
display: table-cell;
vertical-align: middle;
}
#welcome, #news, #schedule, #sponsors, #highScores {
width:90%;
margin-left:5%;
}
#highScores ul {
list-style-type:none;
}
#news, #schedule {
width:45%;
margin-left:5%;
}
#centres_links {
width:90%;
margin-left:10%;
margin-top : 1em;
line-height : 2em;
word-spacing:3px;
font-family: 'bebasregular';
}
@media screen and (max-width:480px) {
#news, #schedule, #contentArea {
width:90%;
margin-left:5%;
}
#centres_links {
width:90%;
margin-left:5%;
}
}
/* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GLOBAL OBJECTS ============================================================================= */
.breaker { clear: both; }
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}