Team:Calgary/static/basicpagedesktop.css

From 2012.igem.org

Revision as of 16:34, 19 July 2012

/*====== Desktop Styling ======*/

/***Nav styling***/

1. nav{

list-style: none; width: 180px; margin: 0px 10px 0px 10px; padding: 20px 0px 20px 0px; text-indent: 0; float: left;

/*Background colours*/ background: #202020; /*backup colour in case gradients fail*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333')"; /* for IE 8*/ background: -webkit-gradient(linear, left top, right top, from(#202020), to(#333333)); /* for webkit browsers */ background: -moz-linear-gradient(left, #202020, #333); /* for firefox 3.6+ */ background: linear-gradient(left, #202020 0%, #333333 100%); /*standard*/ } /*To be moved to JQ block*/

1. menu-icon{

display: none; }

1. nav li{

height: auto; padding: 0; } /*submenu styling*/ #nav li a{ display: block; font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; color: white; font-size: 1.5em; line-height: 1.2em; /*line spacing between submenu rows*/ text-indent: 0.8em; letter-spacing: 0.08em; } #nav li a.dropheader{ text-indent: 0; margin-top: 1.3em; } /*primary menu styling*/ #nav li > a{ display: block; font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; font-size: 1.8em; color: white; line-height: 40px; /*centers the text vertically*/ } /*arrows to signify dropout menus; to be moved to JQ block*/ #nav li a.drop:after{ content: '>'; padding-right: 20px; color: #BBB; display: inline; float: right; } #nav li a:hover, #nav li a:hover::after{ display: block; text-decoration: none; color: #43bbff; } /*mega dropdown styling*/

1. nav li div{

position: absolute; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/ background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */ background: -moz-linear-gradient(left, #333333, #424242); /* for firefox 3.6+ */ background: linear-gradient(left, #333333 0%, #424242 100%); /*standard*/ } /*1-column styles*/ #nav li div.col_1{ left: -999px; width: auto; padding-bottom: 1.5em; } #nav li div.col_1 a{ display: block; padding: 0 1.5em; } #nav li:hover div.col_1{ left: 195px; margin-top: -55px; } /*2-column styles*/ #nav li div.col_2{ width: auto; left: -999em; padding-bottom: 1.5em; height: auto; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/ background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */ background: -moz-linear-gradient(left, #333333, #424242); /* for firefox 3.6+ */ } #nav li div.col_l, #nav li div.col_r{ position: relative; width: auto; float: left; background: transparent; padding-left: 20px; padding-right: 20px; } #nav li div.col_l a, #nav li div.col_r a{ display: block; } #nav li:hover div.col_2{ left: 195px; margin-top: -55px; }

/***End nav styling***/

/***Headerimage***/

1. headerimage{

width: 947px; position: relative; left: 10px; margin-bottom: 10px; margin-top: -20px; }

1. css-full{

display: none; }

1. css-mobi{

display: block; top: 0px; }

/***Logo styling***/

1. logo{

position: relative; top: -250px; right: 20px; float: right; }

#logo img{ width: 300px; }

/***Body styling***/ h1{ font-size: 2.5em; } h2{ font-size: 1.8em; }