Team:Goettingen/suplement/stylesheets
From 2013.igem.org
(116 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
/* changing original css*/ | /* changing original css*/ | ||
- | + | /*the top banner*/ | |
+ | .left-menu {color:#eee;height:50px;padding-top:10px;width:500px} | ||
+ | .right-menu{color:#eee;height:50px;padding-top:10px;width:500px} | ||
+ | .left-menu:hover{background:#7c7c7c;color:#eee} | ||
+ | .left-menu a{font-size:12pt ;font-family:Trebuchet MS,Calibri;color:#eee} | ||
+ | .left-menu li{font-size:12pt ;font-family:Trebuchet MS,Calibri;color:#eee} | ||
+ | div#menubar.right-menu li a{font-size:12pt ;font-family:Trebuchet MS,Calibri;color:#eee} | ||
+ | .right-menu ul{position:absolute;left:-165%;top:35px} | ||
+ | .right-menu li a{background:transparent} | ||
- | # | + | /*footer-box*/ |
+ | #footer li a{font-size:11pt;font-family:Trebuchet MS,Calibri;color:#eee} | ||
+ | #footer-box{ background:#7c7c7c;width:100%;margin:20px auto 0 auto;text-align:center;padding-left:0;padding-right:0;border:none} | ||
+ | #footer{width:1000px;margin:0 auto;color:#eee} | ||
- | #top-section{height:0px;padding:0 0 0 0;} | + | /*content*/ |
+ | #content-1,#top ul{list-style-type: none;list-style-image:url('');margin-left:1em;font-size:11pt} | ||
+ | #content,#p-logo,#catlinks{display:none} | ||
+ | #top-section{height:0px;padding:0 0 0 0;width:100%} | ||
- | |||
- | body{ | + | body{ background-image:url('https://static.igem.org/mediawiki/2013/8/8f/Goe-bkg-1.PNG'); |
- | + | background-repeat:repeat; | |
- | font-family: | + | font-family:Helvetica,Arial,sans-serif,Georgia; |
} | } | ||
- | + | #globalWrapper {padding-bottom:0;width:1042px;position:relative;margin:0 auto 0 auto;padding:0px 20px;} | |
- | #globalWrapper {padding-bottom:0} | + | |
h1 {line-height:1.6em; | h1 {line-height:1.6em; | ||
Line 19: | Line 31: | ||
font-size:14pt;} | font-size:14pt;} | ||
- | h2 {line-height:1.4em;color:#005073;border-bottom:0;font-weight:bold;font-size:12pt} | + | h2{line-height:1.4em;color:#005073;border-bottom:0;font-weight:bold;font-size:12pt} |
+ | h3 {line-height:1.2em;color:#8f0000;font-size:17pt;font-family:Cambria;padding-top:0} | ||
- | p{font-size: | + | h6 {color:white;} |
+ | p{font-size:12pt;font-weight:normal;color:black;text-align:justify;} | ||
- | /* | + | .editsection{color:white;font-size:10pt} |
+ | span.editsection a{color:white} | ||
+ | |||
+ | #toc{display:none;position:absolute} | ||
+ | |||
+ | |||
+ | /*Abbrev*/ | ||
+ | .bl{border-left:1px solid #aaa;} | ||
+ | .bt{border-top:1px solid #aaa;right:10px} | ||
+ | .bb{border-bottom:1px solid #aaa;right:10px} | ||
+ | .br{border-right:1px solid #aaa;} | ||
+ | |||
+ | .fl{float:left} | ||
+ | .fr{float:right} | ||
+ | .cen{margin:0 auto 0 auto} | ||
+ | |||
+ | /* header region*/ | ||
+ | #top{width:1000px;margin:0 auto;padding:20px 0 30px 0;display:block} | ||
+ | #header{border:1px solid #666666;width:1000px;margin:0 auto} | ||
+ | .top {z-index:199; | ||
+ | position:fixed; | ||
+ | bottom:3%; | ||
+ | right:2.5%; | ||
+ | _position:absolute; /* for IE6 */ | ||
+ | /* IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); | ||
+ | overflow:visible; | ||
+ | opacity:0.5; | ||
+ | -filter:alpha(opacity = 50); | ||
+ | -moz-opacity = '0.5'; | ||
+ | -khtml-opacity = '0.5'; | ||
+ | } | ||
+ | |||
+ | /*menu-bar*/ | ||
+ | |||
+ | div.menu-bar {background-color:#fff; | ||
+ | height:42px; | ||
+ | font-size:12pt; | ||
+ | line-height:2.5em; | ||
+ | z-index:3; | ||
+ | width:1000px; | ||
+ | padding: 0 0 0 0; | ||
+ | margin:0 0 0 0; | ||
+ | overflow:show; | ||
+ | } | ||
+ | .shadow{ | ||
+ | -moz-box-shadow: 0px 2px 2px #888888; | ||
+ | -webkit-box-shadow: 0px 2px 2px #888888; | ||
+ | box-shadow: 0px 2px 2px #888888; | ||
+ | /* For IE 8 */ | ||
+ | -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=180, Color='#888888')"; | ||
+ | /* For IE 5.5 - 7 */ | ||
+ | filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=180, Color='#888888'); | ||
+ | } | ||
+ | |||
+ | /*slides*/ | ||
+ | #pic-slide{background-color:#222;height:430px;position:relative;width:1000px} | ||
+ | #slide-ctrl img{cursor:pointer;z-index:4;padding:0px 5px 0 5px} | ||
+ | #pause,#resume{top:10px; | ||
+ | left:940px; | ||
+ | position:absolute;} | ||
+ | #slide-ctrl-1{position:absolute; | ||
+ | bottom:5px; | ||
+ | z-index:6; | ||
+ | right:440px; | ||
+ | } | ||
+ | |||
+ | #slide{width:1000px;} | ||
+ | #illus{position:absolute;padding:0px 10px;display:none;background-color:black;opacity:0.6;cursor:pointer} | ||
+ | |||
+ | div.menu-bar a{height:100%;width:100px; color:#596678;display:block;float:left;text-align:center;margin-left:10px} | ||
+ | |||
+ | div.menu-bar .deact{ | ||
+ | color:white; | ||
+ | background-color:#8f0000; | ||
+ | text-decoration:none;} | ||
+ | |||
+ | div.menu-bar a:hover{ color:white; | ||
+ | background-color:#8f0000; | ||
+ | text-decoration: none;} | ||
+ | |||
+ | div.flyout{background-color:#fff; | ||
+ | width:260px; | ||
+ | z-index:12; | ||
+ | position:absolute; | ||
+ | border-left:4px solid #ddd; | ||
+ | border-top:1px solid #ddd; | ||
+ | display:none; | ||
+ | top:42px; | ||
+ | } | ||
+ | |||
+ | div.flyout a{width:240px; | ||
+ | height:36px; | ||
+ | margin-left:0; | ||
+ | line-height:2em; | ||
+ | text-align:left; | ||
+ | padding-left:20px; | ||
+ | } | ||
+ | div.flyout:first-child>a{border-bottom:1px solid #ddd} | ||
+ | |||
+ | div.flyout a:hover{background-color:#eee;color:#596678} | ||
#content-1{ position: relative;top:0px;width: 935px; | #content-1{ position: relative;top:0px;width: 935px; | ||
Line 37: | Line 150: | ||
z-index: 2;} | z-index: 2;} | ||
- | + | ||
#col-left{ position:relative; | #col-left{ position:relative; | ||
float:left; | float:left; | ||
- | margin: | + | margin:0 auto 0 auto; |
- | width: | + | width:210px; |
color:#596678; | color:#596678; | ||
- | + | font-size:11pt; | |
+ | background-color:white;} | ||
#col-left a{padding: 3px .5% 3px .5%;color:#596678;} | #col-left a{padding: 3px .5% 3px .5%;color:#596678;} | ||
+ | #col-left .editsection a{color:white} | ||
- | # | + | #nav{ background-color:white; |
- | padding: | + | padding:20px 15px 20px 15px; |
- | position:relative;} | + | position:relative; |
+ | font-size:11pt} | ||
- | #col-left h3{font-size: | + | #col-left h3{font-size:14pt;color:#8f0000;cursor:pointer;} |
.f-larger,.f-smaller,.f-medium{border:0; | .f-larger,.f-smaller,.f-medium{border:0; | ||
Line 62: | Line 178: | ||
#col-right{ position:relative; | #col-right{ position:relative; | ||
- | + | display:inline-block; | |
margin:0 auto 0 auto; | margin:0 auto 0 auto; | ||
- | padding:0 | + | padding:0 20px 0 20px; |
background-color:white; | background-color:white; | ||
- | width: | + | width:747px; |
+ | border-top:10px #7c7c7c solid; | ||
+ | border-bottom:10px #7c7c7c solid;} | ||
+ | |||
+ | table{padding-right:20px;} | ||
/*only for team page*/ | /*only for team page*/ | ||
.profilephoto{width:200px;float:left;margin:auto 1.5% auto auto} | .profilephoto{width:200px;float:left;margin:auto 1.5% auto auto} | ||
+ | |||
+ | #body{width:1000px;margin:0 auto} | ||
+ | |||
+ | #body .f-box{border:1px solid #aaa;background-color:white;} | ||
+ | |||
+ | #body .t-box{width: 29.2%; | ||
+ | # margin-left: 10px; | ||
+ | margin: 0 auto; | ||
+ | padding: 10px 20px 0 20px; | ||
+ | line-height: 1.5em; | ||
+ | float:left; | ||
+ | z-index: 2; | ||
+ | position:relative; | ||
+ | background-color:white; | ||
+ | left:0; | ||
+ | margin-top:10px} | ||
+ | |||
+ | #body .t-box p{font-size:12pt;font-family:Calibri;color:#192658} | ||
+ | #body .q-box p{font-size:12pt;font-family:Calibri;color:#192658} | ||
+ | |||
+ | #body .d-box {width:62.5%; | ||
+ | margin: 0 auto; | ||
+ | padding: 0 20px 0 20px; | ||
+ | line-height: 1.5em; | ||
+ | float:left; | ||
+ | z-index: 2; | ||
+ | top:10px; | ||
+ | bottom:10px; | ||
+ | position:relative; | ||
+ | background-color:white;} | ||
+ | |||
+ | #body .h-box {width:45.1%; | ||
+ | margin: 0 auto; | ||
+ | padding: 0 20px 0 20px; | ||
+ | line-height: 1.5em; | ||
+ | z-index: 2; | ||
+ | top:10px; | ||
+ | bottom:10px; | ||
+ | position:relative; | ||
+ | background-color:white;} | ||
+ | |||
+ | #body .q-box{width: 228px; | ||
+ | margin: 0 auto; | ||
+ | padding: 0px 10px; | ||
+ | line-height: 1.5em; | ||
+ | float: left; | ||
+ | z-index: 2; | ||
+ | position: relative; | ||
+ | background-color: white; | ||
+ | top: 10px; | ||
+ | background-size: 100%; | ||
+ | -webkit-background-size: 100%; | ||
+ | -moz-background-size: 100%; | ||
+ | -o-background-size:100%; | ||
+ | } | ||
+ | |||
+ | a.moreinfo{border:1px solid #8f0000;color:#8f0000;background:#fff;padding:2px 4px 2px 4px;font-size:11pt;border-radius: 2px} | ||
+ | a.moreinfo:hover{text-decoration:none;} | ||
+ | |||
+ | a.morefoto{background-color:#8f0000;display:block;width:100px;height:30px;font-size:12pt;color:white;position:absolute;bottom:40px;right:20px;border-radius:3px;z-index:10;line-height:30px;font-family:Cambria,Georgia} | ||
+ | a.morefoto:hover{text-decoration:none;} | ||
+ | |||
+ | .half{width:47%} | ||
+ | .prev:hover{position:absolute;width:100%;z-index:200;border:2px dotted #333; right:10px} | ||
+ | .goe-rt{border-left:4px solid red;padding-left:5px} | ||
+ | .goe-array{border-left:4px solid green;padding-left:5px} | ||
+ | .goe-dac{border-left:4px solid blue;padding-left:5px} | ||
+ | |||
+ | .outreach-box{padding: 10px 15px;background: #eee;display: block;margin: 10px 0px;vertical-align: top;border-radius: 4px;width:282px;} | ||
+ | .outreach-col{width: 33%;display: inline-block;vertical-align: top;} |
Latest revision as of 08:04, 18 October 2013
/* changing original css*/ /*the top banner*/ .left-menu {color:#eee;height:50px;padding-top:10px;width:500px} .right-menu{color:#eee;height:50px;padding-top:10px;width:500px} .left-menu:hover{background:#7c7c7c;color:#eee} .left-menu a{font-size:12pt ;font-family:Trebuchet MS,Calibri;color:#eee} .left-menu li{font-size:12pt ;font-family:Trebuchet MS,Calibri;color:#eee} div#menubar.right-menu li a{font-size:12pt ;font-family:Trebuchet MS,Calibri;color:#eee} .right-menu ul{position:absolute;left:-165%;top:35px} .right-menu li a{background:transparent}
/*footer-box*/
- footer li a{font-size:11pt;font-family:Trebuchet MS,Calibri;color:#eee}
- footer-box{ background:#7c7c7c;width:100%;margin:20px auto 0 auto;text-align:center;padding-left:0;padding-right:0;border:none}
- footer{width:1000px;margin:0 auto;color:#eee}
/*content*/
- content-1,#top ul{list-style-type: none;list-style-image:url();margin-left:1em;font-size:11pt}
- content,#p-logo,#catlinks{display:none}
- top-section{height:0px;padding:0 0 0 0;width:100%}
body{ background-image:url('https://static.igem.org/mediawiki/2013/8/8f/Goe-bkg-1.PNG');
background-repeat:repeat;
font-family:Helvetica,Arial,sans-serif,Georgia; }
- globalWrapper {padding-bottom:0;width:1042px;position:relative;margin:0 auto 0 auto;padding:0px 20px;}
h1 {line-height:1.6em;
bold:true;border-bottom:0; font-size:14pt;}
h2{line-height:1.4em;color:#005073;border-bottom:0;font-weight:bold;font-size:12pt}
h3 {line-height:1.2em;color:#8f0000;font-size:17pt;font-family:Cambria;padding-top:0}
h6 {color:white;} p{font-size:12pt;font-weight:normal;color:black;text-align:justify;}
.editsection{color:white;font-size:10pt} span.editsection a{color:white}
- toc{display:none;position:absolute}
/*Abbrev*/
.bl{border-left:1px solid #aaa;}
.bt{border-top:1px solid #aaa;right:10px}
.bb{border-bottom:1px solid #aaa;right:10px}
.br{border-right:1px solid #aaa;}
.fl{float:left} .fr{float:right} .cen{margin:0 auto 0 auto}
/* header region*/
- top{width:1000px;margin:0 auto;padding:20px 0 30px 0;display:block}
- header{border:1px solid #666666;width:1000px;margin:0 auto}
.top {z-index:199; position:fixed; bottom:3%; right:2.5%; _position:absolute; /* for IE6 */ /* IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); overflow:visible;
opacity:0.5; -filter:alpha(opacity = 50); -moz-opacity = '0.5'; -khtml-opacity = '0.5'; }
/*menu-bar*/
div.menu-bar {background-color:#fff; height:42px; font-size:12pt; line-height:2.5em; z-index:3; width:1000px; padding: 0 0 0 0; margin:0 0 0 0; overflow:show; } .shadow{
-moz-box-shadow: 0px 2px 2px #888888; -webkit-box-shadow: 0px 2px 2px #888888; box-shadow: 0px 2px 2px #888888; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=180, Color='#888888')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=180, Color='#888888');
}
/*slides*/
- pic-slide{background-color:#222;height:430px;position:relative;width:1000px}
- slide-ctrl img{cursor:pointer;z-index:4;padding:0px 5px 0 5px}
- pause,#resume{top:10px;
left:940px; position:absolute;}
- slide-ctrl-1{position:absolute;
bottom:5px; z-index:6; right:440px; }
- slide{width:1000px;}
- illus{position:absolute;padding:0px 10px;display:none;background-color:black;opacity:0.6;cursor:pointer}
div.menu-bar a{height:100%;width:100px; color:#596678;display:block;float:left;text-align:center;margin-left:10px}
div.menu-bar .deact{ color:white; background-color:#8f0000; text-decoration:none;}
div.menu-bar a:hover{ color:white; background-color:#8f0000; text-decoration: none;}
div.flyout{background-color:#fff; width:260px; z-index:12; position:absolute; border-left:4px solid #ddd; border-top:1px solid #ddd;
display:none;
top:42px; }
div.flyout a{width:240px; height:36px; margin-left:0; line-height:2em; text-align:left; padding-left:20px; } div.flyout:first-child>a{border-bottom:1px solid #ddd}
div.flyout a:hover{background-color:#eee;color:#596678}
- content-1{ position: relative;top:0px;width: 935px;
# margin-left: 10px; margin: 0 auto; padding: 5px 20px 5px 20px;; background: white; color: black; border-left: 1px solid #444444; border-right: 1px solid #444444; line-height: 1.5em; z-index: 2;}
- col-left{ position:relative;
float:left; margin:0 auto 0 auto; width:210px; color:#596678;
font-size:11pt;
background-color:white;}
- col-left a{padding: 3px .5% 3px .5%;color:#596678;}
- col-left .editsection a{color:white}
- nav{ background-color:white;
padding:20px 15px 20px 15px; position:relative; font-size:11pt}
- col-left h3{font-size:14pt;color:#8f0000;cursor:pointer;}
.f-larger,.f-smaller,.f-medium{border:0;
outline:0; font-size:12pt; background-color:#f9f9f9; cursor:pointer; color:#596678}
- col-right{ position:relative;
display:inline-block; margin:0 auto 0 auto; padding:0 20px 0 20px; background-color:white; width:747px;
border-top:10px #7c7c7c solid; border-bottom:10px #7c7c7c solid;}
table{padding-right:20px;}
/*only for team page*/
.profilephoto{width:200px;float:left;margin:auto 1.5% auto auto}
- body{width:1000px;margin:0 auto}
- body .f-box{border:1px solid #aaa;background-color:white;}
- body .t-box{width: 29.2%;
# margin-left: 10px; margin: 0 auto; padding: 10px 20px 0 20px; line-height: 1.5em;
float:left; z-index: 2;
position:relative;
background-color:white;
left:0; margin-top:10px}
- body .t-box p{font-size:12pt;font-family:Calibri;color:#192658}
- body .q-box p{font-size:12pt;font-family:Calibri;color:#192658}
- body .d-box {width:62.5%;
margin: 0 auto; padding: 0 20px 0 20px; line-height: 1.5em;
float:left; z-index: 2; top:10px; bottom:10px; position:relative; background-color:white;}
- body .h-box {width:45.1%;
margin: 0 auto; padding: 0 20px 0 20px; line-height: 1.5em;
z-index: 2; top:10px; bottom:10px; position:relative; background-color:white;}
- body .q-box{width: 228px;
margin: 0 auto; padding: 0px 10px; line-height: 1.5em; float: left; z-index: 2; position: relative; background-color: white; top: 10px; background-size: 100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size:100%; }
a.moreinfo{border:1px solid #8f0000;color:#8f0000;background:#fff;padding:2px 4px 2px 4px;font-size:11pt;border-radius: 2px} a.moreinfo:hover{text-decoration:none;}
a.morefoto{background-color:#8f0000;display:block;width:100px;height:30px;font-size:12pt;color:white;position:absolute;bottom:40px;right:20px;border-radius:3px;z-index:10;line-height:30px;font-family:Cambria,Georgia} a.morefoto:hover{text-decoration:none;}
.half{width:47%} .prev:hover{position:absolute;width:100%;z-index:200;border:2px dotted #333; right:10px} .goe-rt{border-left:4px solid red;padding-left:5px} .goe-array{border-left:4px solid green;padding-left:5px} .goe-dac{border-left:4px solid blue;padding-left:5px}
.outreach-box{padding: 10px 15px;background: #eee;display: block;margin: 10px 0px;vertical-align: top;border-radius: 4px;width:282px;} .outreach-col{width: 33%;display: inline-block;vertical-align: top;}