Template:North America 2013 Page CSS
From 2013.igem.org
(Difference between revisions)
(94 intermediate revisions not shown) | |||
Line 38: | Line 38: | ||
body,input { | body,input { | ||
- | font-family: Lucida | + | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
+ | font-weight: 300; | ||
} | } | ||
Line 68: | Line 69: | ||
h2 { | h2 { | ||
- | font-size: | + | font-size: 2em; |
} | } | ||
Line 146: | Line 147: | ||
+ | .verticalLine { | ||
+ | border-left: thick solid #E8E8E8; | ||
+ | } | ||
+ | |||
+ | .verticalLineRight { | ||
+ | border-right: thick solid #E8E8E8; | ||
+ | } | ||
/*///////////////////////////////// | /*///////////////////////////////// | ||
Line 154: | Line 162: | ||
border: none; | border: none; | ||
} | } | ||
+ | |||
/* /////////////////////////////////////////////////////////////////////////// | /* /////////////////////////////////////////////////////////////////////////// | ||
// Bandeau haut | // Bandeau haut | ||
/////////////////////////////////////////////////////////////////////////// */ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | /* Design provided by <a href="https://2013.igem.org/Europe">iGEM Europe 2013</a> */ | ||
#top-section { | #top-section { | ||
Line 165: | Line 175: | ||
#p-logo { | #p-logo { | ||
border: none; | border: none; | ||
- | background-image: url('https://static.igem.org/mediawiki/igem.org/ | + | background-image: url('https://static.igem.org/mediawiki/igem.org/c/c7/HEADER_na_2013.png'); |
} | } | ||
Line 180: | Line 190: | ||
#p-logo .igemLogo { | #p-logo .igemLogo { | ||
height: 70px; | height: 70px; | ||
- | padding: 16px | + | padding: 16px 35px 5px 680px; |
} | } | ||
Line 193: | Line 203: | ||
#search-controls { | #search-controls { | ||
- | top: | + | top: 1px; |
- | right: | + | right: 1px; |
- | width: | + | width: 1px; |
+ | display: none; | ||
} | } | ||
#search-controls a { | #search-controls a { | ||
- | + | size: 1px,1px,1px; | |
+ | display: none; | ||
} | } | ||
#search-controls input { | #search-controls input { | ||
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#searchInput { | #searchInput { | ||
- | + | display: none; | |
- | + | ||
- | + | ||
} | } | ||
Line 228: | Line 234: | ||
height: 20px; | height: 20px; | ||
font-size: 0.9em; | font-size: 0.9em; | ||
- | color: | + | color: white; |
cursor: pointer; | cursor: pointer; | ||
+ | display: none; | ||
} | } | ||
Line 247: | Line 254: | ||
// Column | // Column | ||
/////////////////////////////////////////////////////////////////////////// */ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | .boxes1 { | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border:2px solid #000066; position:relative; | ||
+ | } | ||
+ | |||
+ | .boxes2 { | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border:2px solid #006699; position:relative; | ||
+ | } | ||
+ | |||
+ | .boxes3 { | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | border:2px solid #00cccc; position:relative; | ||
+ | } | ||
+ | |||
+ | .indent { | ||
+ | margin-left:4em; | ||
+ | margin-right: 4em; | ||
+ | |||
+ | } | ||
#columns { | #columns { | ||
- | background: # | + | background: #ffffff; |
padding: 28px 0 10px 0; | padding: 28px 0 10px 0; | ||
} | } | ||
#columns .column { | #columns .column { | ||
- | width: | + | width: 190px; |
- | + | ||
float: left; | float: left; | ||
} | } | ||
Line 333: | Line 363: | ||
padding: 0!important; | padding: 0!important; | ||
list-style: none; | list-style: none; | ||
- | + | ||
} | } | ||
Line 339: | Line 369: | ||
margin: 0; | margin: 0; | ||
padding: 15px; | padding: 15px; | ||
- | background: url(https://static.igem.org/mediawiki/ | + | background: url(https://static.igem.org/mediawiki/2013/e/ea/Northamerica_link.png) repeat-x bottom left; |
+ | -moz-border-radius-bottomright: 10px; | ||
+ | -khtml-border-radius-bottomright: 10px; | ||
+ | -webkit-border-bottom-right-radius: 10px; | ||
+ | -moz-border-radius-bottomleft: 10px; | ||
+ | -khtml-border-radius-bottomleft: 10px; | ||
+ | -webkit-border-bottom-left-radius: 10px; | ||
+ | -moz-border-radius-topleft: 10px; | ||
+ | -khtml-border-radius-topleft: 10px; | ||
+ | -webkit-border-top-left-radius: 10px; | ||
+ | -moz-border-radius-topright: 10px; | ||
+ | -khtml-border-radius-topright: 10px; | ||
+ | -webkit-border-top-right-radius: 10px; | ||
+ | |||
} | } | ||
#columns li a { | #columns li a { | ||
- | color: # | + | color: #ffffff; |
} | } | ||
#columns li a:hover { | #columns li a:hover { | ||
- | color: # | + | color: #ffefe7; |
font-size: 115%; | font-size: 115%; | ||
text-decoration: none; | text-decoration: none; | ||
- | + | } | |
#columns p { | #columns p { | ||
Line 359: | Line 402: | ||
#columns p a { | #columns p a { | ||
- | color: # | + | color: #000000; |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
#columns p a:hover { | #columns p a:hover { | ||
- | color: # | + | color: #ffefe7; |
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
Line 370: | Line 413: | ||
#columns h2 a { | #columns h2 a { | ||
- | color: # | + | color: #000000; |
text-decoration: none; | text-decoration: none; | ||
} | } | ||
#columns h2 a:hover { | #columns h2 a:hover { | ||
- | color: # | + | color: #ffefe7; |
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
Line 591: | Line 634: | ||
} | } | ||
+ | |||
+ | /* /////////////////////////////////////////////////////////////////////////// | ||
+ | // Caroussel | ||
+ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
+ | |||
+ | |||
+ | .bx-wrapper { | ||
+ | margin: 55px 0px 30px; | ||
+ | border-bottom: 1px solid #0090D1; | ||
+ | } | ||
+ | .bx-wrapper .bx-viewport { | ||
+ | box-shadow: none; | ||
+ | border: none; | ||
+ | left: 0; | ||
+ | } | ||
+ | .bx-wrapper .bx-pager.bx-default-pager a:hover, | ||
+ | .bx-wrapper .bx-pager.bx-default-pager a.active { | ||
+ | background-color: #0090D1; | ||
+ | } | ||
+ | .bx-wrapper .bx-pager { | ||
+ | top: 510px; | ||
+ | } | ||
/* /////////////////////////////////////////////////////////////////////////// | /* /////////////////////////////////////////////////////////////////////////// | ||
// Nav bar | // Nav bar | ||
/////////////////////////////////////////////////////////////////////////// */ | /////////////////////////////////////////////////////////////////////////// */ | ||
+ | |||
/*--Menu Bar CSS--*/ | /*--Menu Bar CSS--*/ | ||
Line 600: | Line 667: | ||
width: 100%; | width: 100%; | ||
height: 35px; | height: 35px; | ||
- | background: # | + | background: #591e00; |
margin-top:0px; | margin-top:0px; | ||
- | font-size: | + | font-size: 12px; |
+ | -moz-border-radius-bottomright: 10px; | ||
+ | -khtml-border-radius-bottomright: 10px; | ||
+ | -webkit-border-bottom-right-radius: 10px; | ||
+ | -moz-border-radius-bottomleft: 10px; | ||
+ | -khtml-border-radius-bottomleft: 10px; | ||
+ | -webkit-border-bottom-left-radius: 10px; | ||
+ | -moz-border-radius-topleft: 10px; | ||
+ | -khtml-border-radius-topleft: 10px; | ||
+ | -webkit-border-top-left-radius: 10px; | ||
+ | -moz-border-radius-topright: 10px; | ||
+ | -khtml-border-radius-topright: 10px; | ||
+ | -webkit-border-top-right-radius: 10px; | ||
+ | |||
} | } | ||
#navbar { width:975px; | #navbar { width:975px; | ||
Line 609: | Line 689: | ||
position:relative; | position:relative; | ||
height: 35px; | height: 35px; | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
#flashylink { display: block; | #flashylink { display: block; | ||
- | float: | + | float: centre; |
border: 0px solid #fff; | border: 0px solid #fff; | ||
- | color: # | + | color: #591e00; |
padding:3px; line-height: 100%; | padding:3px; line-height: 100%; | ||
text-align: center; | text-align: center; | ||
Line 623: | Line 702: | ||
-moz-border-radius: 3px; | -moz-border-radius: 3px; | ||
border-radius: 3px; | border-radius: 3px; | ||
- | margin-right: 10px; | + | margin-right: 10px; |
} | } | ||
#flashylink a:hover { color: #fff; | #flashylink a:hover { color: #fff; | ||
Line 630: | Line 709: | ||
/*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/ | /*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/ | ||
ul#topnav { | ul#topnav { | ||
- | margin: 0; padding: 0 0 0 | + | margin: 0; padding: 0 0 0 100px; |
- | float: | + | float: centre; |
/*-- width: 960px;--*/ | /*-- width: 960px;--*/ | ||
list-style: none; | list-style: none; | ||
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ | position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ | ||
font-size: 1em; | font-size: 1em; | ||
- | background: # | + | background: #591e00/*--url(https://static.igem.org/mediawiki/igem.org/c/c8/Navbar-3.gif) repeat-x--*/; |
z-index: 6; | z-index: 6; | ||
} | } | ||
Line 664: | Line 743: | ||
position: absolute; | position: absolute; | ||
z-index:10; | z-index:10; | ||
- | + | top:35px; | |
display: none; /*--Hide by default--*/ | display: none; /*--Hide by default--*/ | ||
- | |||
background: #993300; | background: #993300; | ||
color: #fff; | color: #fff; | ||
- | |||
-moz-border-radius-bottomright: 10px; | -moz-border-radius-bottomright: 10px; | ||
-khtml-border-radius-bottomright: 10px; | -khtml-border-radius-bottomright: 10px; | ||
-webkit-border-bottom-right-radius: 10px; | -webkit-border-bottom-right-radius: 10px; | ||
- | |||
-moz-border-radius-bottomleft: 10px; | -moz-border-radius-bottomleft: 10px; | ||
-khtml-border-radius-bottomleft: 10px; | -khtml-border-radius-bottomleft: 10px; | ||
Line 828: | Line 904: | ||
} | } | ||
- | h2,h3 {font-wright:bold; font-family: Calibri, Arial, Helvetica, sans-serif} | + | h2,h3 {font-wright: bold; font-family: Calibri, Arial, Helvetica, sans-serif} |
</style> | </style> | ||
</html> | </html> |
Latest revision as of 17:12, 17 October 2013