Team:Evry/css v1
From 2013.igem.org
(395 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | /*--------------------- Wiki hack ---------------------------------------------*/ | ||
+ | |||
body | body | ||
{ | { | ||
- | |||
color: #333333; | color: #333333; | ||
- | + | background-repeat:repeat-x; | |
- | background- | + | |
- | + | ||
background-size: cover; | background-size: cover; | ||
- | background- | + | background-color : #FFF; |
- | + | ||
margin:0px 0px 0px 0px; | margin:0px 0px 0px 0px; | ||
+ | /*-webkit-hyphens: auto; | ||
+ | -moz-hyphens: auto; | ||
+ | -ms-hyphens: auto; | ||
+ | -o-hyphens: auto; | ||
+ | hyphens: auto;*/ | ||
} | } | ||
- | /* la barre titre ( | + | /* la barre titre (banniere igem+ menu haut)*/ |
#top-section | #top-section | ||
{ | { | ||
- | height: | + | height: 5px; |
- | + | width: auto; | |
- | + | margin: 0; | |
- | margin | + | margin-bottom: -1.5em; |
- | margin-bottom: | + | padding: 0; |
- | padding:0; | + | border: 0 /*none transport*/; |
- | border: none | + | |
- | + | ||
} | } | ||
Line 36: | Line 37: | ||
#menubar | #menubar | ||
{ | { | ||
- | color: | + | background: none repeat scroll 0 0 transparent !important; |
+ | color: transparent !important; | ||
+ | position: absolute; | ||
+ | top: -6px; | ||
+ | display: table-cell; | ||
} | } | ||
Line 47: | Line 52: | ||
/* le menu de haut gauche */ | /* le menu de haut gauche */ | ||
- | .left-menu | + | #menubar .left-menu |
{ | { | ||
+ | width: 100%; | ||
background-color:transparent; | background-color:transparent; | ||
/*display:none;*/ | /*display:none;*/ | ||
Line 58: | Line 64: | ||
color:transparent; | color:transparent; | ||
text-decoration:none; | text-decoration:none; | ||
+ | text-align: right; | ||
background-color:none; | background-color:none; | ||
right: 15px; | right: 15px; | ||
Line 68: | Line 75: | ||
text-decoration:transparent; | text-decoration:transparent; | ||
background-color:none; | background-color:none; | ||
+ | } | ||
+ | |||
+ | #menubar * | ||
+ | { | ||
+ | color: transparent !important; | ||
+ | background: transparent !important; | ||
+ | } | ||
+ | |||
+ | #top-section:hover #menubar * | ||
+ | { | ||
+ | color: blue !important; | ||
+ | } | ||
+ | |||
+ | #top-section:hover #menubar | ||
+ | { | ||
+ | background: rgba(255, 255, 255, 0.75) !important; | ||
} | } | ||
Line 79: | Line 102: | ||
#content | #content | ||
{ | { | ||
+ | width: 100%; | ||
background-color: transparent; | background-color: transparent; | ||
border:none; | border:none; | ||
Line 84: | Line 108: | ||
margin:none; | margin:none; | ||
line-height:1em; | line-height:1em; | ||
+ | } | ||
+ | |||
+ | #globalWrapper | ||
+ | { | ||
+ | font-size: 150%; | ||
} | } | ||
Line 93: | Line 122: | ||
} | } | ||
- | + | #footer-wrapper | |
- | # | + | |
{ | { | ||
+ | position: relative; | ||
+ | width: 70%; | ||
+ | margin: auto; | ||
+ | margin-top:15px; | ||
+ | margin-bottom:5px; | ||
+ | background-color: transparent; | ||
+ | /* -moz-border-radius:15px; | ||
+ | -webkit-border-radius:15px; | ||
+ | border-radius: 15px; | ||
+ | box-shadow: 0px 4px 4px #1c1a19;*/ | ||
} | } | ||
- | # | + | #f-copyrightico |
{ | { | ||
- | + | margin: 1% 0 1% 1%; | |
- | + | } | |
- | + | ||
- | margin | + | #f-poweredbyico |
- | + | { | |
- | + | margin: 1% 1% 1% 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Line 128: | Line 157: | ||
{ | { | ||
display: none; | display: none; | ||
+ | } | ||
+ | |||
+ | ul | ||
+ | { | ||
+ | list-style-image: none; | ||
+ | line-height: 1.2em; | ||
} | } | ||
/* ----------------End of the wiki hack -------------------------------------*/ | /* ----------------End of the wiki hack -------------------------------------*/ | ||
- | /* | + | /*---------------------------Header-----------------------*/ |
- | # | + | |
+ | #header | ||
{ | { | ||
- | position: | + | width: auto; |
- | + | height: auto; | |
- | + | margin: -5px 0 0 -5px; | |
- | + | padding:0; | |
- | + | border: none; | |
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | #banniere | ||
+ | { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | margin:auto; | ||
+ | height: 150px; | ||
+ | text-align: center; | ||
+ | background-color: #7B0000; | ||
+ | } | ||
+ | |||
+ | #ban | ||
+ | { | ||
+ | display: block; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | -moz-border-radius:5px; | ||
+ | -webkit-border-radius:5px; | ||
+ | border-radius: 5px; | ||
+ | height: 100%; | ||
} | } | ||
- | /* | + | /* ---------------------Navigator -------------------------------------*/ |
- | + | ||
- | + | .home-link | |
- | + | { | |
- | + | background: url("https://static.igem.org/mediawiki/2013/8/8c/EvryHome.png") no-repeat scroll 50% 5px / 60px 60px transparent; | |
- | + | ||
- | + | ||
} | } | ||
+ | .home-link:hover{ | ||
+ | background: url("https://static.igem.org/mediawiki/2013/c/c8/EvryHome_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
- | /* | + | .project-link { |
- | # | + | background: url("https://static.igem.org/mediawiki/2013/4/4f/EvryProject.png") no-repeat scroll 50% 5px / 60px 60px transparent; |
+ | } | ||
+ | |||
+ | .project-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/d/d4/EvryProject_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .team-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/a/ad/EvryTeam.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .team-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/1/13/EvryTeam_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .model-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/e/e5/EvryModel.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .model-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/1/10/EvryModel_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .biology-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/9/90/EvryBiology.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .biology-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/a/a1/EvryBiology_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .practice-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/f/fa/EvryHP.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .practice-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/a/ab/EvryHP_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .notebook-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/6/6a/EvryNotebook.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .notebook-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/6/6e/EvryNotebook_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .ref-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/4/4e/EvryRef.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .ref-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/d/df/EvryRef_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .spon-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/3/3f/EvrySponsors.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .spon-link:hover { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/6/6f/EvrySponsors_col.png") no-repeat scroll 50% 5px / 60px 60px transparent; | ||
+ | } | ||
+ | |||
+ | .igem-link { | ||
+ | background: url("https://static.igem.org/mediawiki/2013/4/47/IGEM2013logoEvry.png") no-repeat scroll 50% 5px transparent; | ||
+ | } | ||
+ | |||
+ | /*-------------------------------------------------------Menu---------------------------------------*/ | ||
+ | |||
+ | #menu{ | ||
+ | font-family: Helvetica, Arial, Sans serif; | ||
+ | padding: 0; | ||
+ | margin: 0 !important; | ||
+ | text-align: center; | ||
+ | font-size: 80%; | ||
+ | font-size: 1.3ch; | ||
+ | font-size: 0.98vw; | ||
+ | font-weight: bold; | ||
+ | background-color: #460000; | ||
+ | /*background-image: -webkit-linear-gradient(#7B0000,#BB1010); | ||
+ | background-image: -moz-linear-gradient(#7B0000,#BB1010); | ||
+ | background-image: -ms-linear-gradient(#7B0000,#BB1010); | ||
+ | background-image: -o-linear-gradient(#7B0000,#BB1010); | ||
+ | background-image: linear-gradient(#7B0000,#BB1010); | ||
+ | background-image: linear-gradient(#7B0000, #D0AD0F 50%, #F5DF00 50%, #7B0000); | ||
+ | background-image: linear-gradient(#7B0000, #D0AD0F 140%);*/ | ||
+ | border-top: 3px solid #370000; | ||
+ | box-shadow: 0 4px 4px #1C1A19; | ||
+ | -webkit-hyphens: none; | ||
+ | -moz-hyphens: none; | ||
+ | -ms-hyphens: none; | ||
+ | -o-hyphens: none; | ||
+ | hyphens: none; | ||
+ | z-index: 50; | ||
+ | } | ||
+ | |||
+ | #menu ul { | ||
+ | position: absolute; | ||
+ | top: 5.5em; | ||
+ | top: 5.5vw; | ||
+ | left:0; | ||
+ | max-height:0em; | ||
+ | margin:0 !important; | ||
+ | padding:0; | ||
+ | background-color: #7B0000; | ||
+ | background-image: linear-gradient(#7B0000, #460000); | ||
+ | overflow:hidden; | ||
+ | transition: 0.5s max-height 0.3s; | ||
+ | border-radius: 0 0 8px 8px; | ||
+ | } | ||
+ | |||
+ | #menu li { | ||
+ | display: inline-block; | ||
+ | list-style: none; /* for IE7 */ | ||
+ | margin: 0 0 0 -0.35%; | ||
+ | padding-bottom: 0.3%; | ||
+ | } | ||
+ | |||
+ | #menu > li { | ||
+ | width: 8%; | ||
+ | } | ||
+ | |||
+ | #menu > li, #menu > li li { | ||
+ | position: relative; | ||
+ | display:inline-block; | ||
+ | padding: auto; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | #menu > li li { | ||
+ | width: 100%; | ||
+ | padding: 3% 0; | ||
+ | } | ||
+ | |||
+ | #menu a { | ||
+ | display:inline-block; | ||
+ | margin: auto; | ||
+ | color: #fff; | ||
+ | text-decoration:none; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #menu a span{ | ||
+ | display: block; | ||
+ | margin: auto; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | #menu > li li { background: transparent none; } | ||
+ | |||
+ | #menu > li li a { color: #FFF; } | ||
+ | |||
+ | #menu > li li:hover a { color: #F5DF00; } | ||
+ | |||
+ | #menu > li li:hover { | ||
+ | background:#888888; | ||
+ | } | ||
+ | |||
+ | #menu > li:first-child { | ||
+ | border-left: 0; | ||
+ | } | ||
+ | |||
+ | #menu > li + li { | ||
+ | border-left: 1px solid #F5DF00; | ||
+ | } | ||
+ | |||
+ | #menu > li:last-child { | ||
+ | border-left: 1px solid #F5DF00; | ||
+ | } | ||
+ | |||
+ | #menu > li li:first-child { | ||
+ | border-bottom: 1px solid #F5DF00; | ||
+ | } | ||
+ | |||
+ | #menu > li li + li{ | ||
+ | border-top: 1px solid #aaa; | ||
+ | border-bottom: 1px solid #F5DF00; | ||
+ | } | ||
+ | |||
+ | #menu > li li:last-child { | ||
+ | border-top: 1px solid #aaa; | ||
+ | border-right: 0; | ||
+ | } | ||
+ | |||
+ | #menu > li:hover { | ||
+ | background-color: #7B0000; | ||
+ | } | ||
+ | |||
+ | #menu > li:hover ul { | ||
+ | max-height:20em; | ||
+ | } | ||
+ | |||
+ | #menu #igem-link | ||
{ | { | ||
- | + | display: block; | |
- | + | float: right; | |
- | + | width:4%; | |
- | + | margin-right: 1%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
+ | /*------------------------------aside--------------*/ | ||
+ | |||
+ | aside | ||
{ | { | ||
- | + | float: left; | |
- | + | margin-left: -0.3%; | |
- | + | margin-top: 0.5%; | |
- | + | padding: 0; | |
- | + | width: 13%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | aside header | |
{ | { | ||
- | + | background-color: transparent; | |
- | + | color: #7B0000; | |
- | + | font-weight: bold; | |
- | + | position: relative; | |
- | + | text-align: left; | |
- | width: | + | text-transform: capitalize; |
- | + | width: auto; | |
- | + | border-bottom: 1px solid #FF0000; | |
+ | padding-left: 3%; | ||
+ | padding-bottom: 1%; | ||
} | } | ||
- | + | aside h1 | |
- | + | ||
{ | { | ||
- | + | background-color: #8a8e8d; | |
- | + | width: 100%; | |
- | + | color: #FFFFFF; | |
+ | padding: 0.08%; | ||
+ | width: 100%; | ||
+ | font-size: 25px; | ||
+ | } | ||
- | + | aside table | |
- | + | { | |
- | + | background-color: transparent; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | aside ul | |
- | + | ||
{ | { | ||
- | + | list-style: none outside none; | |
- | + | margin: 2% 0 3% 2%; | |
- | + | padding: 0; | |
- | + | } | |
+ | aside ul li | ||
+ | { | ||
+ | color: #760000; | ||
+ | list-style: none outside none; | ||
+ | } | ||
- | + | aside li a, aside li a:visited | |
- | + | { | |
- | + | color: #760000; | |
- | + | font-weight: bold; | |
- | + | text-transform: capitalize; | |
- | + | ||
- | - | + | |
- | - | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .second | |
+ | { | ||
+ | padding: 0.1%; | ||
+ | margin: 0 0 0 4%; | ||
+ | } | ||
- | /* | + | .second li a |
- | + | { | |
+ | font-weight: normal; | ||
+ | text-transform: none; | ||
+ | } | ||
+ | |||
+ | /* ------------------------ Notebook onglet -------------- */ | ||
+ | |||
+ | .onglet | ||
{ | { | ||
- | + | margin-left: 0; | |
- | + | margin-top: 0.5%; | |
- | + | left: 84.8%; | |
- | + | padding: 0.1%; | |
- | + | position: absolute; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .onglet ul | |
{ | { | ||
- | + | padding:0; | |
- | + | margin:0; | |
- | + | list-style-type:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .onglet ul li | |
- | { | + | { |
- | + | margin-bottom: 1px; | |
- | + | padding: 0; | |
- | + | list-style: none outside none; | |
- | + | border: 1px solid black; | |
+ | -moz-border-radius: 5px; | ||
+ | -webkit-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | font-weight: bold; | ||
} | } | ||
- | + | .onglet ul li a | |
{ | { | ||
- | + | width:auto; | |
- | + | color: #FFF; | |
- | + | font-style: bold; | |
- | + | text-decoration:none; | |
+ | padding:5px; | ||
} | } | ||
- | + | .onglet a | |
{ | { | ||
- | + | text-align:center; | |
- | + | ||
} | } | ||
+ | .onglet ul li a:hover | ||
+ | { | ||
+ | background-color:00CCFF; | ||
+ | } | ||
+ | .onglet .hide | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
+ | .onglet .hide li | ||
+ | { | ||
+ | min-width: 70px; | ||
+ | width: 80%; | ||
+ | background-color:#7B0000; | ||
+ | } | ||
- | + | .onglet .hide li:hover a | |
- | + | ||
{ | { | ||
- | + | color: #F5DF00; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | .onglet ul:hover .hide, .onglet ul:active .hide |
{ | { | ||
- | + | display: block; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .onglet > ul > .vis | |
- | . | + | |
{ | { | ||
- | + | background-color: #460000 !important; | |
- | + | width: 100px; | |
- | + | text-align: center; | |
- | + | ||
} | } | ||
- | + | .onglet .vis a | |
- | . | + | |
- | . | + | |
{ | { | ||
- | display:block; | + | display: inline-block; |
- | + | text-align: center; | |
- | + | text-decoration: none; | |
- | + | word-wrap: break-word; | |
- | + | margin: 0 0 2% 0; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .onglet ul li .vis a:hover | |
+ | { | ||
+ | background-color:#D3D3D3; | ||
+ | } | ||
- | /* | + | /* -------------------------------------Protocols onglet---------------------------------------------*/ |
- | + | ||
- | . | + | .onglet-left |
{ | { | ||
- | + | margin-right: 0; | |
+ | margin-top: 0.5%; | ||
+ | left: 5%; | ||
+ | width: 10%; | ||
+ | padding: 0.1%; | ||
+ | position: absolute; | ||
} | } | ||
- | + | ||
- | . | + | .onglet-left ul |
- | + | ||
- | + | ||
{ | { | ||
- | + | padding:0; | |
- | + | margin:0; | |
- | + | list-style-type:none; | |
- | + | ||
} | } | ||
+ | .onglet-left ul li | ||
+ | { | ||
+ | margin-bottom: 1px; | ||
+ | padding: 0; | ||
+ | list-style: none outside none; | ||
+ | border: 1px solid black; | ||
+ | -moz-border-radius: 5px; | ||
+ | -webkit-border-radius: 5px; | ||
+ | border-radius: 5px; | ||
+ | font-weight: bold; | ||
+ | } | ||
- | + | .onglet-left ul li a | |
+ | { | ||
+ | width:auto; | ||
+ | color: #FFF; | ||
+ | font-style: bold; | ||
+ | text-decoration:none; | ||
+ | padding:5px; | ||
+ | } | ||
- | + | .onglet-left a | |
- | + | ||
- | + | ||
{ | { | ||
- | + | text-align:center; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .onglet-left ul:hover .hide, .onglet ul:active .hide | |
{ | { | ||
- | + | display: block; | |
- | + | ||
- | + | ||
} | } | ||
- | + | .onglet-left > ul > .vis | |
{ | { | ||
- | + | background-color: #460000 !important; | |
- | + | width: 100%; | |
- | + | text-align: center; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .onglet-left .vis a | |
{ | { | ||
- | + | display: inline-block; | |
- | + | text-align: center; | |
- | + | text-decoration: none; | |
+ | word-wrap: break-word; | ||
+ | margin: 0 0 2% 0; | ||
} | } | ||
+ | .onglet-left ul li a:hover | ||
+ | { | ||
+ | background-color:00CCFF; | ||
+ | } | ||
+ | .onglet-left .hide | ||
+ | { | ||
+ | display: none; | ||
+ | } | ||
- | + | .onglet-left .hide li | |
- | . | + | |
{ | { | ||
- | + | margin-left: 10%; | |
- | + | width: 90%; | |
+ | background-color:#7B0000; | ||
} | } | ||
- | a | + | .onglet-left .hide li:hover a |
{ | { | ||
- | + | color: #F5DF00; | |
} | } | ||
- | + | .onglet-left ul li .vis a:hover | |
{ | { | ||
- | + | background-color:#D3D3D3; | |
- | top:- | + | } |
- | left: | + | |
+ | /* ------------------------Body--------------------------- */ | ||
+ | |||
+ | #maincontainer_evry2013 | ||
+ | { | ||
+ | padding-bottom: 15px; | ||
+ | margin-top: 30px; | ||
+ | background: transparent; | ||
+ | margin: auto; | ||
+ | text-align:justify; | ||
+ | width:70%; /*940px*/ | ||
+ | heigth:auto; | ||
+ | border-bottom: 2px solid black; | ||
+ | /* -moz-border-radius-topright:15px; | ||
+ | -moz-border-radius-bottomright:15px; | ||
+ | -webkit-border-top-right-radius:15px; | ||
+ | -webkit-border-bottom-right-radius:15px; | ||
+ | border-top-right-radius:15px; | ||
+ | border-bottom-right-radius:15px; | ||
+ | border-radius: 15px; | ||
+ | box-shadow: 0px 4px 4px #1c1a19;*/ | ||
+ | } | ||
+ | |||
+ | #maincontainer_evry2013notebook | ||
+ | { | ||
+ | padding-bottom: 15px; | ||
+ | margin-top: 30px; | ||
+ | background-color: transparent; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2013/8/8a/Spirale.png'); | ||
+ | background-repeat: repeat-y; | ||
+ | background-size: 4%; | ||
+ | background-position:-2% 0%; | ||
+ | margin: auto; | ||
+ | text-align:justify; | ||
+ | width:70%; /*940px*/ | ||
+ | heigth:auto; | ||
+ | -moz-border-radius:15px; | ||
+ | -webkit-border-radius:15px; | ||
+ | border-radius: 15px; | ||
+ | border: 2px solid black; | ||
+ | } | ||
+ | |||
+ | #mainTextcontainer | ||
+ | { | ||
+ | padding-left: 1.5%; | ||
+ | padding-right: 1.5%; | ||
+ | min-height: 450px; | ||
+ | } | ||
+ | |||
+ | #mainTextcontainer_notebook | ||
+ | { | ||
+ | margin-left: 3%; | ||
+ | margin-right: 3%; | ||
+ | min-height: 450px; | ||
+ | background: url('https://static.igem.org/mediawiki/2013/8/81/Cahier.jpg'); | ||
} | } | ||
Line 426: | Line 732: | ||
font-style: normal; | font-style: normal; | ||
text-decoration: none; | text-decoration: none; | ||
- | border: | + | border: none; |
line-height:1em; | line-height:1em; | ||
padding:15px 0px 15px 0px; | padding:15px 0px 15px 0px; | ||
font-weight:bold; | font-weight:bold; | ||
font-size: 30px; | font-size: 30px; | ||
- | color:# | + | color:#7B0000; |
+ | text-align: center ; | ||
+ | } | ||
+ | |||
+ | #maincontainer_evry2013notebook h1 | ||
+ | { | ||
+ | border-bottom: 2px solid red; | ||
+ | border-top: 2px solid red; | ||
+ | background-color: #FFF; | ||
} | } | ||
Line 465: | Line 779: | ||
} | } | ||
- | + | ul li | |
+ | { | ||
+ | list-style: disc outside none; | ||
+ | margin-bottom: 0.3em; | ||
+ | } | ||
+ | |||
+ | .Tab | ||
+ | { | ||
+ | text-indent: 15px; | ||
+ | } | ||
+ | |||
+ | .marg | ||
+ | { | ||
+ | margin-left: 0.6%; | ||
+ | margin-right: 0.6%; | ||
+ | |||
+ | } | ||
+ | |||
+ | .marg img | ||
+ | { | ||
+ | margin-top: 2.5%; | ||
+ | margin-bottom: 2.5% | ||
+ | } | ||
+ | |||
+ | #team | ||
+ | { | ||
+ | padding:5px; | ||
+ | line-height:1em; | ||
+ | } | ||
+ | |||
+ | #team td | ||
+ | { | ||
+ | align:left; | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | |||
#citation_box | #citation_box | ||
{ | { | ||
Line 486: | Line 835: | ||
text-style:bold; | text-style:bold; | ||
text-size:14px; | text-size:14px; | ||
+ | } | ||
+ | |||
+ | table | ||
+ | { | ||
+ | table-layout:fixed; | ||
+ | word-wrap: break-word; | ||
+ | -webkit-hyphens: none; | ||
+ | -moz-hyphens: none; | ||
+ | -ms-hyphens: none; | ||
+ | -o-hyphens: none; | ||
+ | hyphens: none; | ||
} | } | ||
Line 502: | Line 862: | ||
{ | { | ||
padding:5px; | padding:5px; | ||
+ | word-wrap: break-word; | ||
} | } | ||
- | + | .table-fixed-size | |
{ | { | ||
table-layout:fixed; | table-layout:fixed; | ||
word-wrap: break-word; | word-wrap: break-word; | ||
- | |||
} | } | ||
- | em { | + | table p |
- | color: # | + | { |
+ | text-indent: 0px; | ||
+ | } | ||
+ | |||
+ | #primer p | ||
+ | { | ||
+ | max-width: 300px; | ||
+ | } | ||
+ | |||
+ | table h3 | ||
+ | { | ||
+ | margin-top: 5px; | ||
+ | } | ||
+ | |||
+ | em | ||
+ | { | ||
+ | color: #bb8900; | ||
font-style: normal; | font-style: normal; | ||
font-weight:bold; | font-weight:bold; | ||
+ | font-size: 102%; | ||
+ | } | ||
+ | |||
+ | a:hover em | ||
+ | { | ||
+ | color: #bb8900; | ||
+ | text-decoration: underline; | ||
} | } | ||
Line 521: | Line 904: | ||
} | } | ||
- | .orange, a.orange:visited | + | sup { |
+ | font-size: .7em; | ||
+ | line-height: .8em; | ||
+ | } | ||
+ | |||
+ | .orange, a.orange:visited, .orange a, .orange:visited a | ||
{ | { | ||
color:#cb6228; | color:#cb6228; | ||
Line 533: | Line 921: | ||
.red, a.red:visited | .red, a.red:visited | ||
{ | { | ||
- | color:# | + | color:#7B0000; |
} | } | ||
.yellow, a.yellow:visited | .yellow, a.yellow:visited | ||
{ | { | ||
- | color:# | + | color:#ff900b ; |
} | } | ||
- | # | + | #affiliation |
{ | { | ||
- | + | text-indent: 0px; | |
- | + | font-size: 60%; | |
+ | line-height: 0.5em; | ||
} | } | ||
- | # | + | #construct_bouton, |
+ | #construct_bouton:hover | ||
{ | { | ||
- | + | display: inline; | |
- | padding: | + | float: right; |
+ | max-width: 150px; | ||
+ | margin: 0% -3% 0 0; | ||
+ | padding: 1%; | ||
+ | background-color: #cbc9ba; | ||
+ | color: #FFF; | ||
+ | text-decoration: none; | ||
+ | font-style: normal; | ||
+ | font-weight:bold; | ||
} | } | ||
- | + | .captionedPicture | |
{ | { | ||
- | + | border: 1px solid black; | |
+ | margin: 0.5em; | ||
+ | |||
} | } | ||
- | + | .Picture | |
{ | { | ||
- | + | border: 1px solid black; | |
- | + | display: block; | |
+ | margin: 0.8%; | ||
+ | width: 98%; | ||
} | } | ||
- | . | + | .caption |
{ | { | ||
- | + | padding: auto; | |
- | + | margin-bottom: 0.3em; | |
- | + | text-align: center; | |
- | + | ||
- | + | ||
} | } | ||
- | . | + | .tick |
{ | { | ||
- | + | list-style-image : url(https://static.igem.org/mediawiki/2013/5/58/Evry-tick.png); | |
- | + | ||
} | } | ||
- | + | ul,ol | |
{ | { | ||
- | + | margin-bottom: 0.8%; | |
} | } | ||
- | + | /* -----------------------Footer---------------------------------*/ | |
+ | #footer | ||
{ | { | ||
- | + | width: auto; | |
+ | bottom: 2px; | ||
+ | padding: 0px; | ||
+ | font-size: 70%; | ||
} | } |
Latest revision as of 14:38, 25 October 2013
/*--------------------- Wiki hack ---------------------------------------------*/
body {
color: #333333; background-repeat:repeat-x; background-size: cover; background-color : #FFF; margin:0px 0px 0px 0px; /*-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;*/
}
/* la barre titre (banniere igem+ menu haut)*/
- top-section
{
height: 5px; width: auto; margin: 0; margin-bottom: -1.5em; padding: 0; border: 0 /*none transport*/;
}
/*le conteneur de la banière igem avec un lien vers igem*/
- p-logo
{
display:none; border:none; margin:none;
}
/* la barre de menu du haut */
- menubar
{
background: none repeat scroll 0 0 transparent !important; color: transparent !important; position: absolute; top: -6px; display: table-cell;
}
/*les lien de la barre de menu du haut */
- menubar a
{
text-decoration:none; color:#000000;
}
/* le menu de haut gauche */
- menubar .left-menu
{
width: 100%; background-color:transparent; /*display:none;*/
}
/* le menu de login haut droite*/ .right-menu {
color:transparent; text-decoration:none; text-align: right; background-color:none; right: 15px;
}
/* les lien du login */ .right-menu a {
color:transparent; text-decoration:transparent; background-color:none;
}
- menubar *
{ color: transparent !important; background: transparent !important; }
- top-section:hover #menubar *
{ color: blue !important; }
- top-section:hover #menubar
{ background: rgba(255, 255, 255, 0.75) !important; }
/* la barre de recherche*/
- search-controls
{
display:none;
}
/* le body de la page*/
- content
{
width: 100%; background-color: transparent; border:none; padding:none; margin:none; line-height:1em;
}
- globalWrapper
{
font-size: 150%;
}
/*titre de page */ .firstHeading {
display:none; border: none;
}
- footer-wrapper
{
position: relative; width: 70%; margin: auto; margin-top:15px; margin-bottom:5px; background-color: transparent;
/* -moz-border-radius:15px;
-webkit-border-radius:15px; border-radius: 15px; box-shadow: 0px 4px 4px #1c1a19;*/
}
- f-copyrightico
{
margin: 1% 0 1% 1%;
}
- f-poweredbyico
{
margin: 1% 1% 1% 0;
}
/* la boite en bas de page*/
- footer-box
{
display: none; margin-bottom: 10px;
}
/* le cadre sous le body useless */
- catlinks
{
display: none;
}
ul {
list-style-image: none; line-height: 1.2em;
}
/* ----------------End of the wiki hack -------------------------------------*/
/*---------------------------Header-----------------------*/
- header
{
width: auto; height: auto; margin: -5px 0 0 -5px; padding:0; border: none; background: transparent;
}
- banniere
{
display: block; position: relative; margin:auto; height: 150px; text-align: center; background-color: #7B0000;
}
- ban
{
display: block; margin-left: auto; margin-right: auto; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius: 5px; height: 100%;
}
/* ---------------------Navigator -------------------------------------*/
.home-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.home-link:hover{
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.project-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.project-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.team-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.team-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.model-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.model-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.biology-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.biology-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.practice-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.practice-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.notebook-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.notebook-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.ref-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.ref-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.spon-link {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.spon-link:hover {
background: url("") no-repeat scroll 50% 5px / 60px 60px transparent;
}
.igem-link {
background: url("") no-repeat scroll 50% 5px transparent;
}
/*-------------------------------------------------------Menu---------------------------------------*/
- menu{
font-family: Helvetica, Arial, Sans serif; padding: 0; margin: 0 !important; text-align: center; font-size: 80%; font-size: 1.3ch; font-size: 0.98vw; font-weight: bold; background-color: #460000; /*background-image: -webkit-linear-gradient(#7B0000,#BB1010); background-image: -moz-linear-gradient(#7B0000,#BB1010); background-image: -ms-linear-gradient(#7B0000,#BB1010); background-image: -o-linear-gradient(#7B0000,#BB1010); background-image: linear-gradient(#7B0000,#BB1010); background-image: linear-gradient(#7B0000, #D0AD0F 50%, #F5DF00 50%, #7B0000); background-image: linear-gradient(#7B0000, #D0AD0F 140%);*/ border-top: 3px solid #370000; box-shadow: 0 4px 4px #1C1A19; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none; z-index: 50;
}
- menu ul {
position: absolute; top: 5.5em; top: 5.5vw; left:0; max-height:0em; margin:0 !important; padding:0; background-color: #7B0000; background-image: linear-gradient(#7B0000, #460000); overflow:hidden; transition: 0.5s max-height 0.3s; border-radius: 0 0 8px 8px;
}
- menu li {
display: inline-block; list-style: none; /* for IE7 */ margin: 0 0 0 -0.35%; padding-bottom: 0.3%;
}
- menu > li {
width: 8%;
}
- menu > li, #menu > li li {
position: relative; display:inline-block; padding: auto; background-color: transparent;
}
- menu > li li {
width: 100%; padding: 3% 0;
}
- menu a {
display:inline-block; margin: auto; color: #fff; text-decoration:none; width: 100%;
}
- menu a span{
display: block; margin: auto; width: 50%;
}
- menu > li li { background: transparent none; }
- menu > li li a { color: #FFF; }
- menu > li li:hover a { color: #F5DF00; }
- menu > li li:hover {
background:#888888;
}
- menu > li:first-child {
border-left: 0;
}
- menu > li + li {
border-left: 1px solid #F5DF00;
}
- menu > li:last-child {
border-left: 1px solid #F5DF00;
}
- menu > li li:first-child {
border-bottom: 1px solid #F5DF00;
}
- menu > li li + li{
border-top: 1px solid #aaa; border-bottom: 1px solid #F5DF00;
}
- menu > li li:last-child {
border-top: 1px solid #aaa; border-right: 0;
}
- menu > li:hover {
background-color: #7B0000;
}
- menu > li:hover ul {
max-height:20em;
}
- menu #igem-link
{
display: block; float: right; width:4%; margin-right: 1%;
}
/*------------------------------aside--------------*/
aside {
float: left; margin-left: -0.3%; margin-top: 0.5%; padding: 0; width: 13%;
}
aside header
{
background-color: transparent; color: #7B0000; font-weight: bold; position: relative; text-align: left; text-transform: capitalize; width: auto; border-bottom: 1px solid #FF0000; padding-left: 3%; padding-bottom: 1%;
}
aside h1 {
background-color: #8a8e8d; width: 100%; color: #FFFFFF; padding: 0.08%; width: 100%; font-size: 25px;
}
aside table {
background-color: transparent;
}
aside ul {
list-style: none outside none; margin: 2% 0 3% 2%; padding: 0;
}
aside ul li {
color: #760000; list-style: none outside none;
}
aside li a, aside li a:visited {
color: #760000; font-weight: bold; text-transform: capitalize;
}
.second {
padding: 0.1%; margin: 0 0 0 4%;
}
.second li a {
font-weight: normal; text-transform: none;
}
/* ------------------------ Notebook onglet -------------- */
.onglet {
margin-left: 0; margin-top: 0.5%; left: 84.8%; padding: 0.1%; position: absolute;
}
.onglet ul {
padding:0; margin:0; list-style-type:none;
}
.onglet ul li {
margin-bottom: 1px; padding: 0; list-style: none outside none; border: 1px solid black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-weight: bold;
}
.onglet ul li a {
width:auto; color: #FFF; font-style: bold; text-decoration:none; padding:5px;
}
.onglet a {
text-align:center;
}
.onglet ul li a:hover {
background-color:00CCFF;
}
.onglet .hide {
display: none;
}
.onglet .hide li {
min-width: 70px; width: 80%; background-color:#7B0000;
}
.onglet .hide li:hover a {
color: #F5DF00;
}
.onglet ul:hover .hide, .onglet ul:active .hide {
display: block;
}
.onglet > ul > .vis {
background-color: #460000 !important; width: 100px; text-align: center;
}
.onglet .vis a {
display: inline-block; text-align: center; text-decoration: none; word-wrap: break-word; margin: 0 0 2% 0;
}
.onglet ul li .vis a:hover {
background-color:#D3D3D3;
}
/* -------------------------------------Protocols onglet---------------------------------------------*/
.onglet-left {
margin-right: 0; margin-top: 0.5%; left: 5%; width: 10%; padding: 0.1%; position: absolute;
}
.onglet-left ul {
padding:0; margin:0; list-style-type:none;
}
.onglet-left ul li {
margin-bottom: 1px; padding: 0; list-style: none outside none; border: 1px solid black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-weight: bold;
}
.onglet-left ul li a {
width:auto; color: #FFF; font-style: bold; text-decoration:none; padding:5px;
}
.onglet-left a
{
text-align:center;
}
.onglet-left ul:hover .hide, .onglet ul:active .hide {
display: block;
}
.onglet-left > ul > .vis {
background-color: #460000 !important; width: 100%; text-align: center;
}
.onglet-left .vis a {
display: inline-block; text-align: center; text-decoration: none; word-wrap: break-word; margin: 0 0 2% 0;
}
.onglet-left ul li a:hover {
background-color:00CCFF;
}
.onglet-left .hide {
display: none;
}
.onglet-left .hide li {
margin-left: 10%; width: 90%; background-color:#7B0000;
}
.onglet-left .hide li:hover a {
color: #F5DF00;
}
.onglet-left ul li .vis a:hover {
background-color:#D3D3D3;
}
/* ------------------------Body--------------------------- */
- maincontainer_evry2013
{
padding-bottom: 15px; margin-top: 30px; background: transparent; margin: auto; text-align:justify; width:70%; /*940px*/ heigth:auto; border-bottom: 2px solid black; /* -moz-border-radius-topright:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-right-radius:15px; border-top-right-radius:15px; border-bottom-right-radius:15px; border-radius: 15px; box-shadow: 0px 4px 4px #1c1a19;*/
}
- maincontainer_evry2013notebook
{
padding-bottom: 15px; margin-top: 30px; background-color: transparent; background-image: url('https://static.igem.org/mediawiki/2013/8/8a/Spirale.png'); background-repeat: repeat-y; background-size: 4%; background-position:-2% 0%; margin: auto; text-align:justify; width:70%; /*940px*/ heigth:auto; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius: 15px; border: 2px solid black;
}
- mainTextcontainer
{
padding-left: 1.5%; padding-right: 1.5%; min-height: 450px;
}
- mainTextcontainer_notebook
{
margin-left: 3%; margin-right: 3%; min-height: 450px; background: url('https://static.igem.org/mediawiki/2013/8/81/Cahier.jpg');
}
h1 {
font-style: normal; text-decoration: none; border: none; line-height:1em; padding:15px 0px 15px 0px; font-weight:bold; font-size: 30px; color:#7B0000; text-align: center ;
}
- maincontainer_evry2013notebook h1
{
border-bottom: 2px solid red; border-top: 2px solid red; background-color: #FFF;
}
h2 {
font-style: normal; font-weight:bold; font-style:italic; font-size: 22px; line-height:1em; text-decoration:none; border:none; padding:0px 0px 10px 0px; color:#364d01; margin-top:25px;
}
h3 {
padding-left:25px; font-style:bold; font-size: 18px; text-decoration:none; border:none; line-height:1em; padding:0px 0px 5px 5px; margin-top:20px;
}
h4 {
font-style:italic;
}
ul li {
list-style: disc outside none; margin-bottom: 0.3em;
}
.Tab {
text-indent: 15px;
}
.marg {
margin-left: 0.6%; margin-right: 0.6%;
}
.marg img {
margin-top: 2.5%; margin-bottom: 2.5%
}
- team
{
padding:5px; line-height:1em;
}
- team td
{
align:left; vertical-align:top;
}
- citation_box
{
margin-top:30px; padding:10px; border-style:none; border-width:2px; border-color:#BDFEBC; background-color:#ECECEC; text-align:left;
}
- citation_box ol,li
{
text-style:italic;
}
- references
{
text-style:bold; text-size:14px;
}
table {
table-layout:fixed; word-wrap: break-word; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; hyphens: none;
}
table.parameter {
width:100%; display: block; margin-left: auto; margin-right: auto; cellpadding:0px; cellspacing:0px;Experimentals_Parameters align:middle;
}
table.parameter td {
padding:5px; word-wrap: break-word;
}
.table-fixed-size {
table-layout:fixed; word-wrap: break-word;
}
table p {
text-indent: 0px;
}
- primer p
{
max-width: 300px;
}
table h3 {
margin-top: 5px;
}
em {
color: #bb8900; font-style: normal; font-weight:bold; font-size: 102%;
}
a:hover em {
color: #bb8900; text-decoration: underline;
}
strong {
color: #364d01;
}
sup { font-size: .7em; line-height: .8em; }
.orange, a.orange:visited, .orange a, .orange:visited a {
color:#cb6228;
}
.green, a.green:visited {
color:#364d01;
}
.red, a.red:visited {
color:#7B0000;
}
.yellow, a.yellow:visited {
color:#ff900b ;
}
- affiliation
{
text-indent: 0px; font-size: 60%; line-height: 0.5em;
}
- construct_bouton,
- construct_bouton:hover
{
display: inline; float: right; max-width: 150px; margin: 0% -3% 0 0; padding: 1%; background-color: #cbc9ba; color: #FFF; text-decoration: none; font-style: normal; font-weight:bold;
}
.captionedPicture {
border: 1px solid black; margin: 0.5em;
}
.Picture {
border: 1px solid black; display: block; margin: 0.8%; width: 98%;
}
.caption {
padding: auto; margin-bottom: 0.3em; text-align: center;
}
.tick {
list-style-image : url();
}
ul,ol {
margin-bottom: 0.8%;
}
/* -----------------------Footer---------------------------------*/
- footer
{
width: auto; bottom: 2px; padding: 0px; font-size: 70%;
}