Template:Team:HokkaidoU Japan/css
From 2011.igem.org
(Difference between revisions)
Line 6: | Line 6: | ||
<body> | <body> | ||
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" type="text/css"> | <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" type="text/css"> | ||
- | < | + | <style> |
- | + | html, body { | |
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | min-height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #fefefe; | ||
+ | text-shadow: 1px 1px 0.5px black; | ||
+ | background: rgb(201,222,150); | ||
+ | background: -moz-linear-gradient(top, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,222,150,1)), color-stop(44%,rgba(138,182,107,1)), color-stop(100%,rgba(57,130,53,1))); | ||
+ | background: -webkit-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); | ||
+ | background: -o-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); | ||
+ | background: -ms-linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); | ||
+ | background: linear-gradient(top, rgba(201,222,150,1) 0%,rgba(138,182,107,1) 44%,rgba(57,130,53,1) 100%); | ||
+ | border-radius: 5px 5px 0px 0px; | ||
+ | -moz-border-radius: 5px; 5px 0px 0px; | ||
+ | -webkit-border-radius: 5px; 5px 0px 0px; | ||
+ | padding: 3px 8px; | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | color: #333333; | ||
+ | border-left:7px solid rgb(201,222,150); | ||
+ | border-bottom:1px solid #ccc; | ||
+ | margin: 25px 3px 10px; | ||
+ | padding:6px 8px; | ||
+ | } | ||
+ | |||
+ | article h3 { | ||
+ | color: #333333; | ||
+ | border-bottom:1px solid #ccc; | ||
+ | margin: 20px 3px 10px; | ||
+ | } | ||
+ | |||
+ | header { | ||
+ | position: relative; | ||
+ | border-bottom: solid 1px #dedede; | ||
+ | width: 100%; | ||
+ | height: 100px; | ||
+ | } | ||
+ | |||
+ | header > div.header { | ||
+ | margin: 0 auto; | ||
+ | width: 975px; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | header div#logo { | ||
+ | border: 1px solid #dedede; | ||
+ | margin: 0 auto; | ||
+ | width: 275px; | ||
+ | height: 100px; | ||
+ | position: absolute; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | header nav#header-menu { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 700px; | ||
+ | height: 100px; | ||
+ | right: 0px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
+ | header nav#header-menu ul { | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | height: 30px; | ||
+ | right: 5px; | ||
+ | bottom: 0; | ||
+ | position: absolute; | ||
+ | vertical-align: bottom; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | header nav#header-menu ul li { | ||
+ | margin: 0 1px; | ||
+ | padding: 4px 5px 2px; | ||
+ | border: solid 2px #dedede; | ||
+ | border-bottom-style: none; | ||
+ | border-radius: 5px 5px 0px 0px; | ||
+ | -moz-border-radius: 5px; 5px 0px 0px; | ||
+ | -webkit-border-radius: 5px; 5px 0px 0px; | ||
+ | height: 24px; | ||
+ | bottom: 0; | ||
+ | float: left; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | nav#header-menu ul li:hover, nav#header-menu ul li.selected { | ||
+ | color: #ffffff; | ||
+ | text-shadow: 1px 1px 1px gray; | ||
+ | background: rgb(201,222,150); | ||
+ | } | ||
+ | |||
+ | section#main { | ||
+ | margin: 0 auto; | ||
+ | width: 975px; | ||
+ | height: auto; | ||
+ | min-height: 200px; | ||
+ | } | ||
+ | |||
+ | article#content { | ||
+ | padding: 0px 5px 50px 5px; | ||
+ | } | ||
+ | |||
+ | footer { | ||
+ | background-color: #efefef; | ||
+ | border-top: 2px solid #dedede; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
+ | footer h3 { | ||
+ | color: #666666; | ||
+ | text-shadow: 2px 2px 5px #fefefe; | ||
+ | } | ||
+ | |||
+ | footer ul { | ||
+ | margin-top: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | footer div#footer { | ||
+ | margin: 0 auto; | ||
+ | width: 975px; | ||
+ | } | ||
+ | |||
+ | footer div.wrapper { | ||
+ | height: 220px; | ||
+ | position: relative; | ||
+ | bottom: 0; | ||
+ | } | ||
+ | |||
+ | section#sponsors { | ||
+ | width: 975px; | ||
+ | height: 80px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | section#sponsors ul li { | ||
+ | margin: 2px 5px; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .footer-col { | ||
+ | width: 320px; | ||
+ | } | ||
+ | |||
+ | .footer-col ul { | ||
+ | padding-left: 7px; | ||
+ | } | ||
+ | |||
+ | .footer-col address { | ||
+ | margin-left: 7px; | ||
+ | } | ||
+ | |||
+ | nav#footer-menu li.selected { | ||
+ | color: #42426F; | ||
+ | } | ||
+ | |||
+ | nav#footer-about { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | nav#footer-menu { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | div#footer-right { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | section#footer-contact address { | ||
+ | color: gray; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 09:59, 1 October 2011