http://2013.igem.org/wiki/index.php?title=Special:Contributions/Romie&feed=atom&limit=50&target=Romie&year=&month=
2013.igem.org - User contributions [en]
2024-03-29T07:35:23Z
From 2013.igem.org
MediaWiki 1.16.5
http://2013.igem.org/Team:The_Tech_Museum/CSS/main_design
Team:The Tech Museum/CSS/main design
2014-10-09T03:57:13Z
<p>Romie: </p>
<hr />
<div>/**<br />
*<br />
* COLOURS<br />
*<br />
* RED: #E51837<br />
* BLUE: #00467F<br />
*<br />
*/<br />
<br />
/**<br />
*<br />
* Overwriting WIKI-standard style<br />
*<br />
*/<br />
<br />
/**<br />
*<br />
* Custom stuff<br />
*<br />
*/<br />
<br />
body{<br />
margin:0px 0px 8px;<br />
background:url("https://static.igem.org/mediawiki/2013/5/54/BareCillus_Background_wiki_light.png") fixed;<br />
font-family:"Helvetica";<br />
}<br />
<br />
p{<br />
/*text-indent:15px;*/<br />
font-size:15px;<br />
padding:5px;<br />
text-align:left;<br />
margin:1px 5px 0px;<br />
line-height:1.2em;<br />
}<br />
<br />
a{<br />
text-decoration:none;<br />
color:#00467F;<br />
}<br />
<br />
ul {<br />
margin:.3em 0 0 3em;<br />
}<br />
<br />
#page_content {<br />
width:729px;<br />
}<br />
<br />
a:visited{<br />
color:#00467F;<br />
}<br />
<br />
h1, h2, h3, h4, h5{<br />
color:black;<br />
background:none;<br />
font-weight:bold;<br />
margin:10px;<br />
padding:5px;<br />
border:0px;<br />
font-family:"Helvetica";<br />
line-height:1.1em;<br />
}<br />
<br />
h1{<br />
text-align:center;<br />
font-size:50px;<br />
color:black;<br />
}<br />
<br />
#bodyContent h1{<br />
margin-bottom:5px;<br />
}<br />
<br />
h2{<br />
font-size:40px;<br />
}<br />
<br />
h3{<br />
font-size:32px;<br />
}<br />
<br />
h1 .editsection,<br />
h2 .editsection,<br />
h3 .editsection,<br />
h4 .editsection{<br />
display:none;<br />
}<br />
<br />
h4{<br />
font-size:20px;<br />
}<br />
<br />
hr{<br />
width:50%;<br />
border-top: 2px solid #E51837;<br />
/*border-right: 5px solid white;<br />
border-left: 5px solid white;<br />
border-bottom:white;*/<br />
margin:0px auto 10px;<br />
height:0px;<br />
}<br />
<br />
hr.blue_bg{<br />
border-right: 5px solid #00467F;<br />
border-left: 5px solid #00467F;<br />
border-bottom:#00467F;<br />
}<br />
<br />
hr.blue{<br />
width:50%;<br />
border-top: 3px solid #00467F;<br />
border-right: 4px solid #E51837;<br />
border-left: 4px solid #E51837;<br />
border-bottom:#E51837;<br />
}<br />
<br />
ol ol{<br />
list-style-type:lower-roman;<br />
}<br />
<br />
div.syntaxhighlighter{<br />
width:735px !important;<br />
}<br />
<br />
code,<br />
.gutter{<br />
font-size:15px;<br />
}<br />
<br />
#top-section{<br />
/*display:none;*/<br />
}<br />
<br />
h1.firstHeading{<br />
display:none;<br />
}<br />
<br />
#title_bar{<br />
width:940px;<br />
z-index:9999;<br />
margin-bottom:10px;<br />
}<br />
<br />
#title_bar img{<br />
max-width:940px;<br />
}<br />
<br />
.menu{<br />
clear:both;<br />
width:980px;<br />
position:relative;<br />
left:-10px;<br />
background-color:#00467F;<br />
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
-moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
z-index:501;<br />
}<br />
<br />
.menu:before,<br />
.menu:after{<br />
content:" ";<br />
border-top:10px solid #0563af;<br />
position:absolute;<br />
top:35px;<br />
}<br />
<br />
.menu:before{<br />
border-left:10px solid transparent;<br />
left:0px;<br />
}<br />
<br />
.menu:after{<br />
border-right:10px solid transparent;<br />
right:0px;<br />
}<br />
<br />
.top_menu {<br />
list-style-type:none;<br />
display:inline-block;<br />
margin:0px 15px;<br />
padding:0px;<br />
}<br />
<br />
.top_menu li{<br />
display:inline;<br />
margin:0px;<br />
float:left;<br />
position:relative;<br />
}<br />
<br />
.top_menu li a{<br />
color:white;<br />
text-decoration:none;<br />
display:block;<br />
padding:5px 10px;<br />
margin:0px;<br />
font:20px bold Cambria,sans-serif;<br />
background-color:#00467F;<br />
height:25px;<br />
}<br />
<br />
.top_menu li a:hover{<br />
background-color: #ffffff;<br />
color:#00467F;<br />
}<br />
<br />
.top_menu ul {<br />
float:left;<br />
list-style-type:none;<br />
margin:-5px 5px 0px;<br />
padding:0px;<br />
position:absolute;<br />
display:none;<br />
z-index:999;<br />
}<br />
<br />
.top_menu ul li{<br />
margin:0px;<br />
display:inline-block;<br />
float:left;<br />
clear:left;<br />
width:150px;<br />
z-index:9999;<br />
}<br />
<br />
.top_menu ul li a{<br />
color:white;<br />
text-decoration:none;<br />
display:block;<br />
padding:5px 15px;<br />
margin:0px;<br />
font:12px bold Cambria,sans-serif;<br />
background-color: #00467F;<br />
height:auto;<br />
}<br />
<br />
.top_menu ul li a:hover{<br />
background-color:#ffffff;<br />
color:#00467F;<br />
}<br />
<br />
.page_title h1{/*<br />
margin:-20px;<br />
position:relative;<br />
top:-30px;<br />
text-align:center;<br />
font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
color:black;*/<br />
}<br />
<br />
.col_1{<br />
width:235px;<br />
display:inline;<br />
float:left;<br />
}<br />
<br />
/**<br />
*<br />
* RSS Feed stuff<br />
*<br />
*/<br />
<br />
#rss_feed h4{<br />
color:white;<br />
text-align:center;<br />
}<br />
<br />
#rss_feed_tooltip{<br />
display:none;<br />
}<br />
<br />
#rss_feed,<br />
#rss_feed_cover{<br />
width:150px;<br />
height:100%;<br />
position:fixed;<br />
top:0px;<br />
}<br />
<br />
#rss_feed{<br />
background-color: #E51837;<br />
box-shadow:0px 0px 20px 5px #D0D0D0;<br />
z-index:-2;<br />
cursor:pointer;<br />
color:white; <br />
}<br />
<br />
#rss_feed_cover{<br />
background-color: white;<br />
z-index: -1;<br />
}<br />
<br />
#rss_feed #title{<br />
position:absolute;<br />
height:100%;<br />
left:-63px;<br />
padding-top:330px;<br />
}<br />
<br />
#rss_feed #title h2{<br />
transform: rotate(-90deg);<br />
-ms-transform: rotate(-90deg);<br />
-webkit-transform: rotate(-90deg);<br />
-moz-transform: rotate(-90deg);<br />
font-size:20px;<br />
color:white;<br />
padding:0px;<br />
margin:0px;<br />
position:relative;<br />
left:30px;<br />
}<br />
<br />
<br />
#rss_feed #rss_content{<br />
padding:0px 5px 0px 30px;<br />
}<br />
<br />
/**<br />
*<br />
* Social Media Display<br />
*<br />
*/<br />
<br />
#social_media{<br />
vertical-align:left;<br />
margin:15px 10px -17px;<br />
}<br />
<br />
#social_media .social_logo{<br />
float:left;<br />
}<br />
<br />
#social_media img{<br />
height:50px;<br />
float:right;<br />
margin:2px;<br />
}<br />
<br />
#social_media .box{<br />
text-align:center;<br />
float:left;<br />
width:305px;<br />
margin:0px 1px;<br />
padding:3px;<br />
vertical-align:middle;<br />
}<br />
<br />
#social_media .box p,<br />
#social_media .box a{<br />
text-indent:0px;<br />
font-size:12px;<br />
color:white;<br />
text-align:center;<br />
/*display: none !important;*/<br />
}<br />
<br />
#social_media .fb{<br />
background-color:#6E0610;<br />
}<br />
<br />
#social_media .twitter{<br />
background-color:#6E0610;<br />
width:306px;<br />
}<br />
<br />
#social_media .youtube{<br />
background-color:#6E0610;<br />
}<br />
<br />
<br />
<br />
/**<br />
* <br />
* Image display<br />
* <br />
*/<br />
<br />
#image_display{<br />
margin-top:-40px;<br />
}<br />
<br />
#image_display h2,<br />
#image_display h3,<br />
#image_display h4{<br />
/*color:white;*/<br />
margin:10px 2px 0px;<br />
text-align:center;<br />
}<br />
<br />
#image_display h3{<br />
text-align:center;<br />
}<br />
<br />
.image_box{<br />
overflow:hidden;<br />
}<br />
<br />
.image_box:hover{<br />
cursor:pointer;<br />
}<br />
<br />
.display_image{<br />
height:100%;<br />
width:100%;<br />
overflow:hidden;<br />
}<br />
<br />
.under_text{<br />
padding:5px;<br />
display:none;<br />
color:black;<br />
overflow:hidden;<br />
text-align:center; <br />
}<br />
<br />
.under_text img{<br />
max-width:400px;<br />
}<br />
<br />
.under_text img.small{<br />
max-width:275px;<br />
}<br />
<br />
.under_text .spacer_l{<br />
float:left;<br />
clear:left;<br />
}<br />
<br />
.under_text .spacer_r{<br />
float:right;<br />
clear:right;<br />
}<br />
<br />
.slice img{<br />
width:400px;<br />
}<br />
<br />
.under_text h3{<br />
margin:10px 2px 0px;<br />
padding:0px 5px;<br />
}<br />
<br />
.display_image h2{<br />
font-weight:normal;<br />
}<br />
<br />
#image_display .cliches .cliche_1,<br />
#image_display .cliches .cliche_2,<br />
#image_display .cliches .cliche_3{<br />
width:140px;<br />
height:140px;<br />
float:left;<br />
background-color:#DADBD5;<br />
margin:1px;<br />
padding:2px;<br />
}<br />
<br />
.cliches .under_text{<br />
height:100%;<br />
width:100%;<br />
vertical-align:middle;<br />
text-align:center;<br />
padding:0px;<br />
}<br />
<br />
.cliches p{<br />
text-indent:0px;<br />
padding:0px;<br />
margin:0px;<br />
height:100%;<br />
width:100%;<br />
text-align:center;<br />
}<br />
<br />
.cliches img{<br />
width:140px;<br />
}<br />
<br />
.slice_text{<br />
position:absolute;<br />
z-index:3;<br />
width:100%;<br />
}<br />
<br />
.left{<br />
float:left;<br />
}<br />
<br />
.proj_box{<br />
width:249px;<br />
height:249px;<br />
float:left;<br />
margin:1px;<br />
cursor:pointer;<br />
}<br />
<br />
.title{<br />
margin-top:10px;<br />
height:46px;<br />
padding:20px;<br />
}<br />
<br />
.title img{<br />
width:462px;<br />
}<br />
<br />
.proj_box img{<br />
width:249px;<br />
}<br />
<br />
.top_left{<br />
background-color:#FDDC99;<br />
}<br />
<br />
.top_right{<br />
background-color:#8EDADA;<br />
}<br />
<br />
.bottom_left{<br />
background-color:#BFE2AC;<br />
}<br />
<br />
.bottom_right{<br />
background-color:#FABA9E;<br />
}<br />
<br />
.project_description{<br />
background-color:#b8dbef;<br />
width:436px;<br />
margin-left:1px;<br />
}<br />
<br />
/**<br />
*<br />
* Pop up box style<br />
*<br />
*/<br />
<br />
#pop_up{<br />
display:none;<br />
z-index:502;<br />
position:relative;<br />
}<br />
<br />
#pop_up_underlay{<br />
height:100%;<br />
width:100%;<br />
background-color:black;<br />
position:fixed;<br />
left:0px;<br />
margin:0px;<br />
top:0px;<br />
opacity:0.8;<br />
text-align:center;<br />
cursor:pointer; <br />
}<br />
<br />
#pop_up_display{<br />
height:75%;<br />
width:85%;<br />
max-width:860px;<br />
background-color:white;<br />
border-top:10px solid #0563af;<br />
border-left:10px solid #0563af;<br />
border-right:10px solid #00467F;<br />
border-bottom:10px solid #00467F;<br />
margin: 5% 35px 0px;<br />
position:fixed;<br />
padding:5px;<br />
top:0px;<br />
}<br />
<br />
#pop_up_content{<br />
height:100%;<br />
width:96%;<br />
overflow-y:auto;<br />
}<br />
<br />
#pop_up_close{<br />
position:relative;<br />
z-index:99;<br />
color:grey;<br />
font-family:Calibri;<br />
float:right;<br />
margin:-3px 5px 6px;<br />
cursor:pointer;<br />
font-size:25px;<br />
}<br />
<br />
/**<br />
*<br />
* Preformatted Stuff<br />
*<br />
**/<br />
<br />
.side_menu{<br />
float:right;<br />
width:250px;<br />
font-family:Cambria;<br />
border-left:5px solid #E51837;<br />
margin-right:5px;<br />
margin-bottom:auto;<br />
}<br />
<br />
/**<br />
*<br />
* Wiki Specific Stuff<br />
* (Overwriting the styles that already exist)<br />
*<br />
**/<br />
<br />
#content{<br />
position: relative;<br />
width: 960px;<br />
margin: 0px auto;<br />
padding: 5px 0px;<br />
background: white;<br />
color: black;<br />
border:none;<br />
line-height: 1.5em;<br />
background-color:white;<br />
box-shadow:0px 0px 20px 5px #D0D0D0;<br />
padding-bottom:10px;<br />
}<br />
<br />
/* #content will nest if multiple templates are used, bad practise but something you have to cope with, <br />
the following overrides certain stylistic features so nested #content divs aren't obvious */<br />
#content #content{<br />
margin: 0px;<br />
padding: 0px;<br />
background: transparent;<br />
padding-bottom:0px;<br />
box-shadow:none;<br />
}<br />
<br />
#top-section {<br />
position: relative;<br />
width: 960px;<br />
margin: 0 auto 0 auto;<br />
border:0px;<br />
height:0px;<br />
}<br />
<br />
#p-logo{<br />
display:none;<br />
}<br />
<br />
#search-controls{<br />
display:none;<br />
}<br />
<br />
#mw-content-text{<br />
}<br />
<br />
#toc, <br />
.toc{<br />
float:right;<br />
position:relative;<br />
width:200px;<br />
border:none;<br />
border-left:5px solid #E51837;<br />
margin:0px 0px 0px 10px;<br />
background-color:#00467F;<br />
padding:0px;<br />
}<br />
<br />
#toc tbody{<br />
vertical-align:top;<br />
}<br />
<br />
#toc h2,<br />
.toc h2{<br />
display:block;<br />
font:20px bold Cambria,sans-serif;<br />
color:white;<br />
}<br />
<br />
.toctoggle{<br />
display:none;<br />
}<br />
<br />
#toc h2,<br />
.toc ul{<br />
list-style-type:none;<br />
padding-left:0px;<br />
}<br />
<br />
#tod ul li,<br />
.tod ul li{<br />
display:block;<br />
margin:0px;<br />
}<br />
<br />
#toc li a,<br />
.toc li a{<br />
padding:5px 5px;<br />
text-decoration:none;<br />
background-color:#00467F;<br />
display:block;<br />
color:white;<br />
font:15px bold "Quando","Georgia",serif;<br />
width:200px;<br />
}<br />
<br />
#toc li a:hover,<br />
.toc li a:hover,<br />
#toc li a.active,<br />
.toc li a.active{<br />
background-color:white;<br />
color:#00467F;<br />
}<br />
<br />
#toc ul li ul,<br />
.toc ul li ul{<br />
/*display:none;*/<br />
margin:0px;<br />
}<br />
<br />
.tocnumber{ display:none; }<br />
<br />
.toclevel-3,<br />
.toclevel-4{<br />
display:none;<br />
}<br />
<br />
h2 .editsection{<br />
font:17px "Quando","Georgia",serif;<br />
}<br />
<br />
h3 .editsection{<br />
font:14px "Quando","Georgia",serif;<br />
}<br />
<br />
h4 .editsection{<br />
font:12px "Quando","Georgia",serif;<br />
}<br />
<br />
.page_section img{<br />
max-width:700px;<br />
}<br />
<br />
/**<br />
*<br />
* DATA TABLES<br />
*<br />
*/<br />
<br />
table.data{<br />
margin:5px auto 15px;<br />
border:2px solid #00467F;<br />
border-collapse:collapse;<br />
border-spacing:0px;<br />
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
-moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
}<br />
<br />
table.data tr.odd{<br />
background-color:#3399CC;<br />
}<br />
<br />
table.data tr.even{<br />
background-color:#0563af;<br />
}<br />
<br />
table.data td,<br />
table.data th{<br />
border-top:2px dashed #00467F;<br />
padding:2px 5px;<br />
}<br />
<br />
table.data tr.odd:hover,<br />
table.data tr.even:hover{<br />
background-color:#00467F;<br />
pointer:cursor;<br />
}<br />
<br />
table.data td a{<br />
color:white;<br />
}<br />
<br />
table.data td a:hover{<br />
text-decoration:none;<br />
color:#E51837;<br />
}<br />
<br />
table.data td{<br />
color:white;<br />
}<br />
<br />
table.game th,<br />
table.game td{<br />
border-right:1px solid #00467F;<br />
}<br />
<br />
table.game td{<br />
width:100px;<br />
text-align:center;<br />
}<br />
<br />
table.Feedback td.text{<br />
width:350px;<br />
}<br />
<br />
table.Feedback td.data{<br />
width:50px;<br />
}<br />
<br />
div.floatleft{<br />
margin:0px;<br />
padding:10px;<br />
}<br />
<br />
#logos{<br />
text-align:center;<br />
padding:0px;<br />
clear:both;<br />
}</div>
Romie
http://2013.igem.org/Team:The_Tech_Museum/CSS/main_design
Team:The Tech Museum/CSS/main design
2014-10-09T00:13:22Z
<p>Romie: create stylesheet</p>
<hr />
<div>/**<br />
*<br />
* COLOURS<br />
*<br />
* RED: #E51837<br />
* BLUE: #00467F<br />
*<br />
*/<br />
/**<br />
*<br />
* Overwriting WIKI-standard style<br />
*<br />
*/<br />
/**<br />
*<br />
* Custom stuff<br />
*<br />
*/<br />
body{<br />
margin:0px 0px 8px;<br />
font-family:"Helvetica"; }<br />
p{ /*text-indent:15px;*/<br />
font-size:15px;<br />
padding:5px;<br />
text-align:left;<br />
margin:1px 5px 0px;<br />
line-height:1.2em; }<br />
a{<br />
text-decoration:none;<br />
color:#00467F;<br />
}<br />
ul { margin:.3em 0 0 3em; }<br />
page_content {<br />
width:729px;<br />
}<br />
a:visited{<br />
color:#00467F;<br />
}<br />
h1, h2, h3, h4, h5{<br />
color:black;<br />
background:none;<br />
font-weight:bold;<br />
margin:10px;<br />
padding:5px;<br />
border:0px;<br />
font-family:"Helvetica";<br />
line-height:1.1em;<br />
}<br />
h1{<br />
text-align:center;<br />
font-size:50px;<br />
color:black;<br />
}<br />
bodyContent h1{<br />
margin-bottom:5px; }<br />
h2{<br />
font-size:40px;<br />
}<br />
h3{<br />
font-size:32px;<br />
}<br />
h1 .editsection, h2 .editsection, h3 .editsection, h4 .editsection{ display:none; }<br />
h4{<br />
font-size:20px;<br />
}<br />
hr{ width:50%; border-top: 2px solid #E51837; /*border-right: 5px solid white; border-left: 5px solid white; border-bottom:white;*/ margin:0px auto 10px; height:0px; }<br />
hr.blue_bg{ border-right: 5px solid #00467F; border-left: 5px solid #00467F; border-bottom:#00467F; }<br />
hr.blue{ width:50%; border-top: 3px solid #00467F; border-right: 4px solid #E51837; border-left: 4px solid #E51837; border-bottom:#E51837; }<br />
ol ol{ list-style-type:lower-roman; }<br />
div.syntaxhighlighter{ width:735px !important; }<br />
code, .gutter{ font-size:15px; }<br />
top-section{<br />
/*display:none;*/<br />
}<br />
h1.firstHeading{<br />
display:none;<br />
}<br />
title_bar{<br />
width:940px; z-index:9999; margin-bottom:10px; }<br />
title_bar img{<br />
max-width:940px; }<br />
.menu{<br />
clear:both;<br />
width:980px;<br />
position:relative;<br />
left:-10px;<br />
background-color:#00467F;<br />
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
z-index:501;<br />
}<br />
.menu:before, .menu:after{<br />
content:" ";<br />
border-top:10px solid #0563af;<br />
position:absolute;<br />
top:35px;<br />
}<br />
.menu:before{<br />
border-left:10px solid transparent;<br />
left:0px;<br />
}<br />
.menu:after{<br />
border-right:10px solid transparent;<br />
right:0px;<br />
}<br />
.top_menu {<br />
list-style-type:none;<br />
display:inline-block;<br />
margin:0px 15px;<br />
padding:0px;<br />
}<br />
.top_menu li{<br />
display:inline;<br />
margin:0px;<br />
float:left;<br />
position:relative;<br />
}<br />
.top_menu li a{<br />
color:white;<br />
text-decoration:none;<br />
display:block;<br />
padding:5px 10px;<br />
margin:0px;<br />
font:20px bold Cambria,sans-serif;<br />
background-color:#00467F;<br />
height:25px;<br />
}<br />
.top_menu li a:hover{<br />
background-color: #ffffff;<br />
color:#00467F;<br />
}<br />
.top_menu ul {<br />
float:left;<br />
list-style-type:none;<br />
margin:-5px 5px 0px;<br />
padding:0px;<br />
position:absolute;<br />
display:none;<br />
z-index:999; }<br />
.top_menu ul li{<br />
margin:0px;<br />
display:inline-block;<br />
float:left;<br />
clear:left;<br />
width:150px;<br />
z-index:9999; }<br />
.top_menu ul li a{<br />
color:white;<br />
text-decoration:none;<br />
display:block;<br />
padding:5px 15px;<br />
margin:0px;<br />
font:12px bold Cambria,sans-serif;<br />
background-color: #00467F;<br />
height:auto;<br />
}<br />
.top_menu ul li a:hover{<br />
background-color:#ffffff;<br />
color:#00467F;<br />
}<br />
.page_title h1{/*<br />
margin:-20px;<br />
position:relative;<br />
top:-30px;<br />
text-align:center;<br />
font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
color:black;*/<br />
}<br />
.col_1{<br />
width:235px;<br />
display:inline;<br />
float:left;<br />
}<br />
/**<br />
*<br />
* RSS Feed stuff<br />
*<br />
*/<br />
rss_feed h4{<br />
color:white;<br />
text-align:center;<br />
}<br />
rss_feed_tooltip{<br />
display:none;<br />
}<br />
rss_feed,<br />
rss_feed_cover{<br />
width:150px;<br />
height:100%;<br />
position:fixed;<br />
top:0px;<br />
}<br />
rss_feed{<br />
background-color: #E51837;<br />
box-shadow:0px 0px 20px 5px #D0D0D0;<br />
z-index:-2;<br />
cursor:pointer;<br />
color:white; <br />
}<br />
rss_feed_cover{<br />
background-color: white;<br />
z-index: -1;<br />
}<br />
rss_feed #title{<br />
position:absolute;<br />
height:100%;<br />
left:-63px;<br />
padding-top:330px;<br />
}<br />
rss_feed #title h2{<br />
transform: rotate(-90deg);<br />
-ms-transform: rotate(-90deg);<br />
-webkit-transform: rotate(-90deg);<br />
-moz-transform: rotate(-90deg);<br />
font-size:20px;<br />
color:white;<br />
padding:0px;<br />
margin:0px;<br />
position:relative;<br />
left:30px;<br />
}<br />
<br />
rss_feed #rss_content{<br />
padding:0px 5px 0px 30px;<br />
}<br />
/**<br />
*<br />
* Social Media Display<br />
*<br />
*/<br />
social_media{<br />
vertical-align:left; margin:15px 10px -17px; }<br />
social_media .social_logo{<br />
float:left;<br />
}<br />
social_media img{<br />
height:50px;<br />
float:right;<br />
margin:2px;<br />
}<br />
social_media .box{<br />
text-align:center; float:left; width:305px;<br />
margin:0px 1px;<br />
padding:3px;<br />
vertical-align:middle; }<br />
social_media .box p,<br />
social_media .box a{<br />
text-indent:0px;<br />
font-size:12px;<br />
color:white;<br />
text-align:center;<br />
/*display: none !important;*/<br />
}<br />
social_media .fb{<br />
background-color:#6E0610;<br />
}<br />
social_media .twitter{<br />
background-color:#6E0610;<br />
width:306px;<br />
}<br />
social_media .youtube{<br />
background-color:#6E0610;<br />
}<br />
<br />
/**<br />
* <br />
* Image display<br />
* <br />
*/<br />
image_display{<br />
margin-top:-40px; }<br />
image_display h2,<br />
image_display h3,<br />
image_display h4{<br />
/*color:white;*/ margin:10px 2px 0px; text-align:center; }<br />
image_display h3{<br />
text-align:center; }<br />
.image_box{ overflow:hidden; }<br />
.image_box:hover{<br />
cursor:pointer;<br />
}<br />
.display_image{<br />
height:100%;<br />
width:100%;<br />
overflow:hidden;<br />
}<br />
.under_text{<br />
padding:5px;<br />
display:none;<br />
color:black;<br />
overflow:hidden;<br />
text-align:center; <br />
}<br />
.under_text img{<br />
max-width:400px;<br />
}<br />
.under_text img.small{<br />
max-width:275px;<br />
}<br />
.under_text .spacer_l{ float:left; clear:left; }<br />
.under_text .spacer_r{ float:right; clear:right; }<br />
.slice img{ width:400px; }<br />
.under_text h3{<br />
margin:10px 2px 0px;<br />
padding:0px 5px;<br />
}<br />
.display_image h2{<br />
font-weight:normal;<br />
}<br />
image_display .cliches .cliche_1,<br />
image_display .cliches .cliche_2,<br />
image_display .cliches .cliche_3{<br />
width:140px;<br />
height:140px;<br />
float:left;<br />
background-color:#DADBD5;<br />
margin:1px;<br />
padding:2px;<br />
}<br />
.cliches .under_text{<br />
height:100%;<br />
width:100%;<br />
vertical-align:middle;<br />
text-align:center;<br />
padding:0px;<br />
}<br />
.cliches p{<br />
text-indent:0px;<br />
padding:0px;<br />
margin:0px;<br />
height:100%;<br />
width:100%;<br />
text-align:center;<br />
}<br />
.cliches img{<br />
width:140px;<br />
}<br />
.slice_text{ position:absolute; z-index:3; width:100%; }<br />
.left{<br />
float:left;<br />
}<br />
.proj_box{<br />
width:249px;<br />
height:249px;<br />
float:left;<br />
margin:1px;<br />
cursor:pointer;<br />
}<br />
.title{<br />
margin-top:10px;<br />
height:46px;<br />
padding:20px;<br />
}<br />
.title img{<br />
width:462px;<br />
}<br />
.proj_box img{<br />
width:249px;<br />
}<br />
.top_left{<br />
background-color:#FDDC99;<br />
}<br />
.top_right{<br />
background-color:#8EDADA;<br />
}<br />
.bottom_left{<br />
background-color:#BFE2AC;<br />
}<br />
.bottom_right{<br />
background-color:#FABA9E;<br />
}<br />
.project_description{<br />
background-color:#b8dbef;<br />
width:436px;<br />
margin-left:1px;<br />
}<br />
/**<br />
*<br />
* Pop up box style<br />
*<br />
*/<br />
pop_up{<br />
display:none;<br />
z-index:502;<br />
position:relative;<br />
}<br />
pop_up_underlay{<br />
height:100%; width:100%; background-color:black; position:fixed;<br />
left:0px;<br />
margin:0px;<br />
top:0px;<br />
opacity:0.8;<br />
text-align:center;<br />
cursor:pointer; <br />
}<br />
pop_up_display{<br />
height:75%; width:85%; max-width:860px; background-color:white; border-top:10px solid #0563af; border-left:10px solid #0563af; border-right:10px solid #00467F; border-bottom:10px solid #00467F;<br />
margin: 5% 35px 0px;<br />
position:fixed;<br />
padding:5px;<br />
top:0px;<br />
}<br />
pop_up_content{<br />
height:100%;<br />
width:96%;<br />
overflow-y:auto;<br />
}<br />
pop_up_close{<br />
position:relative;<br />
z-index:99;<br />
color:grey;<br />
font-family:Calibri;<br />
float:right;<br />
margin:-3px 5px 6px;<br />
cursor:pointer;<br />
font-size:25px;<br />
}<br />
/**<br />
*<br />
* Preformatted Stuff<br />
*<br />
**/<br />
.side_menu{<br />
float:right;<br />
width:250px;<br />
font-family:Cambria;<br />
border-left:5px solid #E51837;<br />
margin-right:5px;<br />
margin-bottom:auto;<br />
}<br />
/**<br />
*<br />
* Wiki Specific Stuff<br />
* (Overwriting the styles that already exist)<br />
*<br />
**/<br />
content{<br />
position: relative;<br />
width: 960px;<br />
margin: 0px auto;<br />
padding: 5px 0px;<br />
background: white;<br />
color: black;<br />
border:none;<br />
line-height: 1.5em;<br />
background-color:white;<br />
box-shadow:0px 0px 20px 5px #D0D0D0;<br />
padding-bottom:10px;<br />
}<br />
/* #content will nest if multiple templates are used, bad practise but something you have to cope with,<br />
the following overrides certain stylistic features so nested #content divs aren't obvious */<br />
content #content{<br />
margin: 0px;<br />
padding: 0px;<br />
background: transparent;<br />
padding-bottom:0px;<br />
box-shadow:none;<br />
}<br />
top-section {<br />
position: relative;<br />
width: 960px;<br />
margin: 0 auto 0 auto;<br />
border:0px;<br />
height:0px;<br />
}<br />
p-logo{<br />
display:none;<br />
}<br />
search-controls{<br />
display:none;<br />
}<br />
mw-content-text{<br />
}<br />
toc,<br />
.toc{<br />
float:right;<br />
position:relative;<br />
width:200px;<br />
border:none;<br />
border-left:5px solid #E51837;<br />
margin:0px 0px 0px 10px;<br />
background-color:#00467F;<br />
padding:0px;<br />
}<br />
toc tbody{<br />
vertical-align:top;<br />
}<br />
toc h2,<br />
.toc h2{ display:block;<br />
font:20px bold Cambria,sans-serif;<br />
color:white;<br />
}<br />
.toctoggle{<br />
display:none;<br />
}<br />
toc h2,<br />
.toc ul{<br />
list-style-type:none;<br />
padding-left:0px;<br />
}<br />
tod ul li,<br />
.tod ul li{<br />
display:block;<br />
margin:0px;<br />
}<br />
toc li a,<br />
.toc li a{<br />
padding:5px 5px;<br />
text-decoration:none;<br />
background-color:#00467F;<br />
display:block;<br />
color:white;<br />
font:15px bold "Quando","Georgia",serif;<br />
width:200px;<br />
}<br />
toc li a:hover,<br />
.toc li a:hover,<br />
toc li a.active,<br />
.toc li a.active{<br />
background-color:white;<br />
color:#00467F;<br />
}<br />
toc ul li ul,<br />
.toc ul li ul{<br />
/*display:none;*/<br />
margin:0px;<br />
}<br />
.tocnumber{ display:none; }<br />
.toclevel-3, .toclevel-4{<br />
display:none;<br />
}<br />
h2 .editsection{<br />
font:17px "Quando","Georgia",serif;<br />
}<br />
h3 .editsection{<br />
font:14px "Quando","Georgia",serif;<br />
}<br />
h4 .editsection{<br />
font:12px "Quando","Georgia",serif;<br />
}<br />
.page_section img{ max-width:700px; }<br />
/**<br />
*<br />
* DATA TABLES<br />
*<br />
*/<br />
table.data{ margin:5px auto 15px; border:2px solid #00467F; border-collapse:collapse; border-spacing:0px; -webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); }<br />
table.data tr.odd{ background-color:#3399CC; }<br />
table.data tr.even{ background-color:#0563af; }<br />
table.data td, table.data th{ border-top:2px dashed #00467F; padding:2px 5px; }<br />
table.data tr.odd:hover, table.data tr.even:hover{ background-color:#00467F; pointer:cursor; }<br />
table.data td a{ color:white; }<br />
table.data td a:hover{ text-decoration:none; color:#E51837; }<br />
table.data td{ color:white; }<br />
table.game th, table.game td{ border-right:1px solid #00467F; }<br />
table.game td{ width:100px; text-align:center; }<br />
table.Feedback td.text{ width:350px; }<br />
table.Feedback td.data{ width:50px; }<br />
div.floatleft{ margin:0px; padding:10px; }<br />
logos{<br />
text-align:center; padding:0px; clear:both; }<br />
<br />
/*<br />
960 Grid System ~ Core CSS.<br />
Learn more ~ http://960.gs/<br />
Licensed under GPL and MIT.<br />
/<br />
/*<br />
Forces backgrounds to span full width,<br />
even if there is horizontal scrolling.<br />
Increase this if your layout is wider.<br />
Note: IE6 works fine without this fix.<br />
/<br />
body {<br />
min-width: 960px;<br />
}<br />
/* `Container<br />
*/<br />
.container_12 {<br />
margin-left: auto;<br />
margin-right: auto;<br />
width: 960px;<br />
}<br />
/* `Grid >> Global<br />
*/<br />
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {<br />
display: inline;<br />
float: left;<br />
margin:0px 10px;<br />
}<br />
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 {<br />
position: relative;<br />
}<br />
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)<br />
*/<br />
.alpha {<br />
margin-left: 0;<br />
}<br />
.omega {<br />
margin-right: 0;<br />
}<br />
/* `Grid >> 12 Columns<br />
*/<br />
.container_12 .grid_1 {<br />
width: 60px;<br />
}<br />
.container_12 .grid_2 {<br />
width: 140px;<br />
}<br />
.container_12 .grid_3 {<br />
width: 220px;<br />
}<br />
.container_12 .grid_4 {<br />
width: 300px;<br />
}<br />
.container_12 .grid_5 {<br />
width: 380px;<br />
}<br />
.container_12 .grid_6 {<br />
width: 460px;<br />
}<br />
.container_12 .grid_7 {<br />
width: 540px;<br />
}<br />
.container_12 .grid_8 {<br />
width: 620px;<br />
}<br />
.container_12 .grid_9 {<br />
width: 700px;<br />
}<br />
.container_12 .grid_10 {<br />
width: 780px;<br />
}<br />
.container_12 .grid_11 {<br />
width: 860px;<br />
}<br />
.container_12 .grid_12 {<br />
width: 940px;<br />
}<br />
/* `Prefix Extra Space >> 12 Columns<br />
*/<br />
.container_12 .prefix_1 {<br />
padding-left: 80px;<br />
}<br />
.container_12 .prefix_2 {<br />
padding-left: 160px;<br />
}<br />
.container_12 .prefix_3 {<br />
padding-left: 240px;<br />
}<br />
.container_12 .prefix_4 {<br />
padding-left: 320px;<br />
}<br />
.container_12 .prefix_5 {<br />
padding-left: 400px;<br />
}<br />
.container_12 .prefix_6 {<br />
padding-left: 480px;<br />
}<br />
.container_12 .prefix_7 {<br />
padding-left: 560px;<br />
}<br />
.container_12 .prefix_8 {<br />
padding-left: 640px;<br />
}<br />
.container_12 .prefix_9 {<br />
padding-left: 720px;<br />
}<br />
.container_12 .prefix_10 {<br />
padding-left: 800px;<br />
}<br />
.container_12 .prefix_11 {<br />
padding-left: 880px;<br />
}<br />
/* `Suffix Extra Space >> 12 Columns<br />
*/<br />
.container_12 .suffix_1 {<br />
padding-right: 80px;<br />
}<br />
.container_12 .suffix_2 {<br />
padding-right: 160px;<br />
}<br />
.container_12 .suffix_3 {<br />
padding-right: 240px;<br />
}<br />
.container_12 .suffix_4 {<br />
padding-right: 320px;<br />
}<br />
.container_12 .suffix_5 {<br />
padding-right: 400px;<br />
}<br />
.container_12 .suffix_6 {<br />
padding-right: 480px;<br />
}<br />
.container_12 .suffix_7 {<br />
padding-right: 560px;<br />
}<br />
.container_12 .suffix_8 {<br />
padding-right: 640px;<br />
}<br />
.container_12 .suffix_9 {<br />
padding-right: 720px;<br />
}<br />
.container_12 .suffix_10 {<br />
padding-right: 800px;<br />
}<br />
.container_12 .suffix_11 {<br />
padding-right: 880px;<br />
}<br />
/* `Push Space >> 12 Columns<br />
*/<br />
.container_12 .push_1 {<br />
left: 80px;<br />
}<br />
.container_12 .push_2 {<br />
left: 160px;<br />
}<br />
.container_12 .push_3 {<br />
left: 240px;<br />
}<br />
.container_12 .push_4 {<br />
left: 320px;<br />
}<br />
.container_12 .push_5 {<br />
left: 400px;<br />
}<br />
.container_12 .push_6 {<br />
left: 480px;<br />
}<br />
.container_12 .push_7 {<br />
left: 560px;<br />
}<br />
.container_12 .push_8 {<br />
left: 640px;<br />
}<br />
.container_12 .push_9 {<br />
left: 720px;<br />
}<br />
.container_12 .push_10 {<br />
left: 800px;<br />
}<br />
.container_12 .push_11 {<br />
left: 880px;<br />
}<br />
/* `Pull Space >> 12 Columns<br />
*/<br />
.container_12 .pull_1 {<br />
left: -80px;<br />
}<br />
.container_12 .pull_2 {<br />
left: -160px;<br />
}<br />
.container_12 .pull_3 {<br />
left: -240px;<br />
}<br />
.container_12 .pull_4 {<br />
left: -320px;<br />
}<br />
.container_12 .pull_5 {<br />
left: -400px;<br />
}<br />
.container_12 .pull_6 {<br />
left: -480px;<br />
}<br />
.container_12 .pull_7 {<br />
left: -560px;<br />
}<br />
.container_12 .pull_8 {<br />
left: -640px;<br />
}<br />
.container_12 .pull_9 {<br />
left: -720px;<br />
}<br />
.container_12 .pull_10 {<br />
left: -800px;<br />
}<br />
.container_12 .pull_11 {<br />
left: -880px;<br />
}<br />
/* `Clear Floated Elements<br />
*/<br />
/* http://sonspring.com/journal/clearing-floats */ /* .clear {<br />
clear: both;<br />
display: block;<br />
overflow: hidden;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}*/<br />
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */<br />
.clearfix:before, .clearfix:after, .container_12:before, .container_12:after {<br />
content: '.';<br />
display: block;<br />
overflow: hidden;<br />
visibility: hidden;<br />
font-size: 0;<br />
line-height: 0;<br />
width: 0;<br />
height: 0;<br />
}<br />
.clearfix:after, .container_12:after {<br />
clear: both;<br />
}<br />
/*<br />
The following zoom:1 rule is specifically for IE6 + IE7.<br />
Move to separate stylesheet if invalid CSS is a problem.<br />
/<br />
.clearfix, .container_12 {<br />
zoom: 1;<br />
}</div>
Romie
http://2013.igem.org/Team:The_Tech_Museum/CSS/main_design
Team:The Tech Museum/CSS/main design
2014-10-09T00:12:21Z
<p>Romie: create stylesheet</p>
<hr />
<div>/**<br />
*<br />
* COLOURS<br />
*<br />
* RED: #E51837<br />
* BLUE: #00467F<br />
*<br />
*/<br />
/**<br />
*<br />
* Overwriting WIKI-standard style<br />
*<br />
*/<br />
/**<br />
*<br />
* Custom stuff<br />
*<br />
*/<br />
body{<br />
margin:0px 0px 8px;<br />
background:url("BareCillus_Background_wiki_light.png") fixed;<br />
font-family:"Helvetica"; }<br />
p{ /*text-indent:15px;*/<br />
font-size:15px;<br />
padding:5px;<br />
text-align:left;<br />
margin:1px 5px 0px;<br />
line-height:1.2em; }<br />
a{<br />
text-decoration:none;<br />
color:#00467F;<br />
}<br />
ul { margin:.3em 0 0 3em; }<br />
page_content {<br />
width:729px;<br />
}<br />
a:visited{<br />
color:#00467F;<br />
}<br />
h1, h2, h3, h4, h5{<br />
color:black;<br />
background:none;<br />
font-weight:bold;<br />
margin:10px;<br />
padding:5px;<br />
border:0px;<br />
font-family:"Helvetica";<br />
line-height:1.1em;<br />
}<br />
h1{<br />
text-align:center;<br />
font-size:50px;<br />
color:black;<br />
}<br />
bodyContent h1{<br />
margin-bottom:5px; }<br />
h2{<br />
font-size:40px;<br />
}<br />
h3{<br />
font-size:32px;<br />
}<br />
h1 .editsection, h2 .editsection, h3 .editsection, h4 .editsection{ display:none; }<br />
h4{<br />
font-size:20px;<br />
}<br />
hr{ width:50%; border-top: 2px solid #E51837; /*border-right: 5px solid white; border-left: 5px solid white; border-bottom:white;*/ margin:0px auto 10px; height:0px; }<br />
hr.blue_bg{ border-right: 5px solid #00467F; border-left: 5px solid #00467F; border-bottom:#00467F; }<br />
hr.blue{ width:50%; border-top: 3px solid #00467F; border-right: 4px solid #E51837; border-left: 4px solid #E51837; border-bottom:#E51837; }<br />
ol ol{ list-style-type:lower-roman; }<br />
div.syntaxhighlighter{ width:735px !important; }<br />
code, .gutter{ font-size:15px; }<br />
top-section{<br />
/*display:none;*/<br />
}<br />
h1.firstHeading{<br />
display:none;<br />
}<br />
title_bar{<br />
width:940px; z-index:9999; margin-bottom:10px; }<br />
title_bar img{<br />
max-width:940px; }<br />
.menu{<br />
clear:both;<br />
width:980px;<br />
position:relative;<br />
left:-10px;<br />
background-color:#00467F;<br />
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);<br />
z-index:501;<br />
}<br />
.menu:before, .menu:after{<br />
content:" ";<br />
border-top:10px solid #0563af;<br />
position:absolute;<br />
top:35px;<br />
}<br />
.menu:before{<br />
border-left:10px solid transparent;<br />
left:0px;<br />
}<br />
.menu:after{<br />
border-right:10px solid transparent;<br />
right:0px;<br />
}<br />
.top_menu {<br />
list-style-type:none;<br />
display:inline-block;<br />
margin:0px 15px;<br />
padding:0px;<br />
}<br />
.top_menu li{<br />
display:inline;<br />
margin:0px;<br />
float:left;<br />
position:relative;<br />
}<br />
.top_menu li a{<br />
color:white;<br />
text-decoration:none;<br />
display:block;<br />
padding:5px 10px;<br />
margin:0px;<br />
font:20px bold Cambria,sans-serif;<br />
background-color:#00467F;<br />
height:25px;<br />
}<br />
.top_menu li a:hover{<br />
background-color: #ffffff;<br />
color:#00467F;<br />
}<br />
.top_menu ul {<br />
float:left;<br />
list-style-type:none;<br />
margin:-5px 5px 0px;<br />
padding:0px;<br />
position:absolute;<br />
display:none;<br />
z-index:999; }<br />
.top_menu ul li{<br />
margin:0px;<br />
display:inline-block;<br />
float:left;<br />
clear:left;<br />
width:150px;<br />
z-index:9999; }<br />
.top_menu ul li a{<br />
color:white;<br />
text-decoration:none;<br />
display:block;<br />
padding:5px 15px;<br />
margin:0px;<br />
font:12px bold Cambria,sans-serif;<br />
background-color: #00467F;<br />
height:auto;<br />
}<br />
.top_menu ul li a:hover{<br />
background-color:#ffffff;<br />
color:#00467F;<br />
}<br />
.page_title h1{/*<br />
margin:-20px;<br />
position:relative;<br />
top:-30px;<br />
text-align:center;<br />
font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
color:black;*/<br />
}<br />
.col_1{<br />
width:235px;<br />
display:inline;<br />
float:left;<br />
}<br />
/**<br />
*<br />
* RSS Feed stuff<br />
*<br />
*/<br />
rss_feed h4{<br />
color:white;<br />
text-align:center;<br />
}<br />
rss_feed_tooltip{<br />
display:none;<br />
}<br />
rss_feed,<br />
rss_feed_cover{<br />
width:150px;<br />
height:100%;<br />
position:fixed;<br />
top:0px;<br />
}<br />
rss_feed{<br />
background-color: #E51837;<br />
box-shadow:0px 0px 20px 5px #D0D0D0;<br />
z-index:-2;<br />
cursor:pointer;<br />
color:white; <br />
}<br />
rss_feed_cover{<br />
background-color: white;<br />
z-index: -1;<br />
}<br />
rss_feed #title{<br />
position:absolute;<br />
height:100%;<br />
left:-63px;<br />
padding-top:330px;<br />
}<br />
rss_feed #title h2{<br />
transform: rotate(-90deg);<br />
-ms-transform: rotate(-90deg);<br />
-webkit-transform: rotate(-90deg);<br />
-moz-transform: rotate(-90deg);<br />
font-size:20px;<br />
color:white;<br />
padding:0px;<br />
margin:0px;<br />
position:relative;<br />
left:30px;<br />
}<br />
<br />
rss_feed #rss_content{<br />
padding:0px 5px 0px 30px;<br />
}<br />
/**<br />
*<br />
* Social Media Display<br />
*<br />
*/<br />
social_media{<br />
vertical-align:left; margin:15px 10px -17px; }<br />
social_media .social_logo{<br />
float:left;<br />
}<br />
social_media img{<br />
height:50px;<br />
float:right;<br />
margin:2px;<br />
}<br />
social_media .box{<br />
text-align:center; float:left; width:305px;<br />
margin:0px 1px;<br />
padding:3px;<br />
vertical-align:middle; }<br />
social_media .box p,<br />
social_media .box a{<br />
text-indent:0px;<br />
font-size:12px;<br />
color:white;<br />
text-align:center;<br />
/*display: none !important;*/<br />
}<br />
social_media .fb{<br />
background-color:#6E0610;<br />
}<br />
social_media .twitter{<br />
background-color:#6E0610;<br />
width:306px;<br />
}<br />
social_media .youtube{<br />
background-color:#6E0610;<br />
}<br />
<br />
/**<br />
* <br />
* Image display<br />
* <br />
*/<br />
image_display{<br />
margin-top:-40px; }<br />
image_display h2,<br />
image_display h3,<br />
image_display h4{<br />
/*color:white;*/ margin:10px 2px 0px; text-align:center; }<br />
image_display h3{<br />
text-align:center; }<br />
.image_box{ overflow:hidden; }<br />
.image_box:hover{<br />
cursor:pointer;<br />
}<br />
.display_image{<br />
height:100%;<br />
width:100%;<br />
overflow:hidden;<br />
}<br />
.under_text{<br />
padding:5px;<br />
display:none;<br />
color:black;<br />
overflow:hidden;<br />
text-align:center; <br />
}<br />
.under_text img{<br />
max-width:400px;<br />
}<br />
.under_text img.small{<br />
max-width:275px;<br />
}<br />
.under_text .spacer_l{ float:left; clear:left; }<br />
.under_text .spacer_r{ float:right; clear:right; }<br />
.slice img{ width:400px; }<br />
.under_text h3{<br />
margin:10px 2px 0px;<br />
padding:0px 5px;<br />
}<br />
.display_image h2{<br />
font-weight:normal;<br />
}<br />
image_display .cliches .cliche_1,<br />
image_display .cliches .cliche_2,<br />
image_display .cliches .cliche_3{<br />
width:140px;<br />
height:140px;<br />
float:left;<br />
background-color:#DADBD5;<br />
margin:1px;<br />
padding:2px;<br />
}<br />
.cliches .under_text{<br />
height:100%;<br />
width:100%;<br />
vertical-align:middle;<br />
text-align:center;<br />
padding:0px;<br />
}<br />
.cliches p{<br />
text-indent:0px;<br />
padding:0px;<br />
margin:0px;<br />
height:100%;<br />
width:100%;<br />
text-align:center;<br />
}<br />
.cliches img{<br />
width:140px;<br />
}<br />
.slice_text{ position:absolute; z-index:3; width:100%; }<br />
.left{<br />
float:left;<br />
}<br />
.proj_box{<br />
width:249px;<br />
height:249px;<br />
float:left;<br />
margin:1px;<br />
cursor:pointer;<br />
}<br />
.title{<br />
margin-top:10px;<br />
height:46px;<br />
padding:20px;<br />
}<br />
.title img{<br />
width:462px;<br />
}<br />
.proj_box img{<br />
width:249px;<br />
}<br />
.top_left{<br />
background-color:#FDDC99;<br />
}<br />
.top_right{<br />
background-color:#8EDADA;<br />
}<br />
.bottom_left{<br />
background-color:#BFE2AC;<br />
}<br />
.bottom_right{<br />
background-color:#FABA9E;<br />
}<br />
.project_description{<br />
background-color:#b8dbef;<br />
width:436px;<br />
margin-left:1px;<br />
}<br />
/**<br />
*<br />
* Pop up box style<br />
*<br />
*/<br />
pop_up{<br />
display:none;<br />
z-index:502;<br />
position:relative;<br />
}<br />
pop_up_underlay{<br />
height:100%; width:100%; background-color:black; position:fixed;<br />
left:0px;<br />
margin:0px;<br />
top:0px;<br />
opacity:0.8;<br />
text-align:center;<br />
cursor:pointer; <br />
}<br />
pop_up_display{<br />
height:75%; width:85%; max-width:860px; background-color:white; border-top:10px solid #0563af; border-left:10px solid #0563af; border-right:10px solid #00467F; border-bottom:10px solid #00467F;<br />
margin: 5% 35px 0px;<br />
position:fixed;<br />
padding:5px;<br />
top:0px;<br />
}<br />
pop_up_content{<br />
height:100%;<br />
width:96%;<br />
overflow-y:auto;<br />
}<br />
pop_up_close{<br />
position:relative;<br />
z-index:99;<br />
color:grey;<br />
font-family:Calibri;<br />
float:right;<br />
margin:-3px 5px 6px;<br />
cursor:pointer;<br />
font-size:25px;<br />
}<br />
/**<br />
*<br />
* Preformatted Stuff<br />
*<br />
**/<br />
.side_menu{<br />
float:right;<br />
width:250px;<br />
font-family:Cambria;<br />
border-left:5px solid #E51837;<br />
margin-right:5px;<br />
margin-bottom:auto;<br />
}<br />
/**<br />
*<br />
* Wiki Specific Stuff<br />
* (Overwriting the styles that already exist)<br />
*<br />
**/<br />
content{<br />
position: relative;<br />
width: 960px;<br />
margin: 0px auto;<br />
padding: 5px 0px;<br />
background: white;<br />
color: black;<br />
border:none;<br />
line-height: 1.5em;<br />
background-color:white;<br />
box-shadow:0px 0px 20px 5px #D0D0D0;<br />
padding-bottom:10px;<br />
}<br />
/* #content will nest if multiple templates are used, bad practise but something you have to cope with,<br />
the following overrides certain stylistic features so nested #content divs aren't obvious */<br />
content #content{<br />
margin: 0px;<br />
padding: 0px;<br />
background: transparent;<br />
padding-bottom:0px;<br />
box-shadow:none;<br />
}<br />
top-section {<br />
position: relative;<br />
width: 960px;<br />
margin: 0 auto 0 auto;<br />
border:0px;<br />
height:0px;<br />
}<br />
p-logo{<br />
display:none;<br />
}<br />
search-controls{<br />
display:none;<br />
}<br />
mw-content-text{<br />
}<br />
toc,<br />
.toc{<br />
float:right;<br />
position:relative;<br />
width:200px;<br />
border:none;<br />
border-left:5px solid #E51837;<br />
margin:0px 0px 0px 10px;<br />
background-color:#00467F;<br />
padding:0px;<br />
}<br />
toc tbody{<br />
vertical-align:top;<br />
}<br />
toc h2,<br />
.toc h2{ display:block;<br />
font:20px bold Cambria,sans-serif;<br />
color:white;<br />
}<br />
.toctoggle{<br />
display:none;<br />
}<br />
toc h2,<br />
.toc ul{<br />
list-style-type:none;<br />
padding-left:0px;<br />
}<br />
tod ul li,<br />
.tod ul li{<br />
display:block;<br />
margin:0px;<br />
}<br />
toc li a,<br />
.toc li a{<br />
padding:5px 5px;<br />
text-decoration:none;<br />
background-color:#00467F;<br />
display:block;<br />
color:white;<br />
font:15px bold "Quando","Georgia",serif;<br />
width:200px;<br />
}<br />
toc li a:hover,<br />
.toc li a:hover,<br />
toc li a.active,<br />
.toc li a.active{<br />
background-color:white;<br />
color:#00467F;<br />
}<br />
toc ul li ul,<br />
.toc ul li ul{<br />
/*display:none;*/<br />
margin:0px;<br />
}<br />
.tocnumber{ display:none; }<br />
.toclevel-3, .toclevel-4{<br />
display:none;<br />
}<br />
h2 .editsection{<br />
font:17px "Quando","Georgia",serif;<br />
}<br />
h3 .editsection{<br />
font:14px "Quando","Georgia",serif;<br />
}<br />
h4 .editsection{<br />
font:12px "Quando","Georgia",serif;<br />
}<br />
.page_section img{ max-width:700px; }<br />
/**<br />
*<br />
* DATA TABLES<br />
*<br />
*/<br />
table.data{ margin:5px auto 15px; border:2px solid #00467F; border-collapse:collapse; border-spacing:0px; -webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); }<br />
table.data tr.odd{ background-color:#3399CC; }<br />
table.data tr.even{ background-color:#0563af; }<br />
table.data td, table.data th{ border-top:2px dashed #00467F; padding:2px 5px; }<br />
table.data tr.odd:hover, table.data tr.even:hover{ background-color:#00467F; pointer:cursor; }<br />
table.data td a{ color:white; }<br />
table.data td a:hover{ text-decoration:none; color:#E51837; }<br />
table.data td{ color:white; }<br />
table.game th, table.game td{ border-right:1px solid #00467F; }<br />
table.game td{ width:100px; text-align:center; }<br />
table.Feedback td.text{ width:350px; }<br />
table.Feedback td.data{ width:50px; }<br />
div.floatleft{ margin:0px; padding:10px; }<br />
logos{<br />
text-align:center; padding:0px; clear:both; }<br />
<br />
/*<br />
960 Grid System ~ Core CSS.<br />
Learn more ~ http://960.gs/<br />
Licensed under GPL and MIT.<br />
/<br />
/*<br />
Forces backgrounds to span full width,<br />
even if there is horizontal scrolling.<br />
Increase this if your layout is wider.<br />
Note: IE6 works fine without this fix.<br />
/<br />
body {<br />
min-width: 960px;<br />
}<br />
/* `Container<br />
*/<br />
.container_12 {<br />
margin-left: auto;<br />
margin-right: auto;<br />
width: 960px;<br />
}<br />
/* `Grid >> Global<br />
*/<br />
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {<br />
display: inline;<br />
float: left;<br />
margin:0px 10px;<br />
}<br />
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 {<br />
position: relative;<br />
}<br />
/* `Grid >> Children (Alpha ~ First, Omega ~ Last)<br />
*/<br />
.alpha {<br />
margin-left: 0;<br />
}<br />
.omega {<br />
margin-right: 0;<br />
}<br />
/* `Grid >> 12 Columns<br />
*/<br />
.container_12 .grid_1 {<br />
width: 60px;<br />
}<br />
.container_12 .grid_2 {<br />
width: 140px;<br />
}<br />
.container_12 .grid_3 {<br />
width: 220px;<br />
}<br />
.container_12 .grid_4 {<br />
width: 300px;<br />
}<br />
.container_12 .grid_5 {<br />
width: 380px;<br />
}<br />
.container_12 .grid_6 {<br />
width: 460px;<br />
}<br />
.container_12 .grid_7 {<br />
width: 540px;<br />
}<br />
.container_12 .grid_8 {<br />
width: 620px;<br />
}<br />
.container_12 .grid_9 {<br />
width: 700px;<br />
}<br />
.container_12 .grid_10 {<br />
width: 780px;<br />
}<br />
.container_12 .grid_11 {<br />
width: 860px;<br />
}<br />
.container_12 .grid_12 {<br />
width: 940px;<br />
}<br />
/* `Prefix Extra Space >> 12 Columns<br />
*/<br />
.container_12 .prefix_1 {<br />
padding-left: 80px;<br />
}<br />
.container_12 .prefix_2 {<br />
padding-left: 160px;<br />
}<br />
.container_12 .prefix_3 {<br />
padding-left: 240px;<br />
}<br />
.container_12 .prefix_4 {<br />
padding-left: 320px;<br />
}<br />
.container_12 .prefix_5 {<br />
padding-left: 400px;<br />
}<br />
.container_12 .prefix_6 {<br />
padding-left: 480px;<br />
}<br />
.container_12 .prefix_7 {<br />
padding-left: 560px;<br />
}<br />
.container_12 .prefix_8 {<br />
padding-left: 640px;<br />
}<br />
.container_12 .prefix_9 {<br />
padding-left: 720px;<br />
}<br />
.container_12 .prefix_10 {<br />
padding-left: 800px;<br />
}<br />
.container_12 .prefix_11 {<br />
padding-left: 880px;<br />
}<br />
/* `Suffix Extra Space >> 12 Columns<br />
*/<br />
.container_12 .suffix_1 {<br />
padding-right: 80px;<br />
}<br />
.container_12 .suffix_2 {<br />
padding-right: 160px;<br />
}<br />
.container_12 .suffix_3 {<br />
padding-right: 240px;<br />
}<br />
.container_12 .suffix_4 {<br />
padding-right: 320px;<br />
}<br />
.container_12 .suffix_5 {<br />
padding-right: 400px;<br />
}<br />
.container_12 .suffix_6 {<br />
padding-right: 480px;<br />
}<br />
.container_12 .suffix_7 {<br />
padding-right: 560px;<br />
}<br />
.container_12 .suffix_8 {<br />
padding-right: 640px;<br />
}<br />
.container_12 .suffix_9 {<br />
padding-right: 720px;<br />
}<br />
.container_12 .suffix_10 {<br />
padding-right: 800px;<br />
}<br />
.container_12 .suffix_11 {<br />
padding-right: 880px;<br />
}<br />
/* `Push Space >> 12 Columns<br />
*/<br />
.container_12 .push_1 {<br />
left: 80px;<br />
}<br />
.container_12 .push_2 {<br />
left: 160px;<br />
}<br />
.container_12 .push_3 {<br />
left: 240px;<br />
}<br />
.container_12 .push_4 {<br />
left: 320px;<br />
}<br />
.container_12 .push_5 {<br />
left: 400px;<br />
}<br />
.container_12 .push_6 {<br />
left: 480px;<br />
}<br />
.container_12 .push_7 {<br />
left: 560px;<br />
}<br />
.container_12 .push_8 {<br />
left: 640px;<br />
}<br />
.container_12 .push_9 {<br />
left: 720px;<br />
}<br />
.container_12 .push_10 {<br />
left: 800px;<br />
}<br />
.container_12 .push_11 {<br />
left: 880px;<br />
}<br />
/* `Pull Space >> 12 Columns<br />
*/<br />
.container_12 .pull_1 {<br />
left: -80px;<br />
}<br />
.container_12 .pull_2 {<br />
left: -160px;<br />
}<br />
.container_12 .pull_3 {<br />
left: -240px;<br />
}<br />
.container_12 .pull_4 {<br />
left: -320px;<br />
}<br />
.container_12 .pull_5 {<br />
left: -400px;<br />
}<br />
.container_12 .pull_6 {<br />
left: -480px;<br />
}<br />
.container_12 .pull_7 {<br />
left: -560px;<br />
}<br />
.container_12 .pull_8 {<br />
left: -640px;<br />
}<br />
.container_12 .pull_9 {<br />
left: -720px;<br />
}<br />
.container_12 .pull_10 {<br />
left: -800px;<br />
}<br />
.container_12 .pull_11 {<br />
left: -880px;<br />
}<br />
/* `Clear Floated Elements<br />
*/<br />
/* http://sonspring.com/journal/clearing-floats */ /* .clear {<br />
clear: both;<br />
display: block;<br />
overflow: hidden;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}*/<br />
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */<br />
.clearfix:before, .clearfix:after, .container_12:before, .container_12:after {<br />
content: '.';<br />
display: block;<br />
overflow: hidden;<br />
visibility: hidden;<br />
font-size: 0;<br />
line-height: 0;<br />
width: 0;<br />
height: 0;<br />
}<br />
.clearfix:after, .container_12:after {<br />
clear: both;<br />
}<br />
/*<br />
The following zoom:1 rule is specifically for IE6 + IE7.<br />
Move to separate stylesheet if invalid CSS is a problem.<br />
/<br />
.clearfix, .container_12 {<br />
zoom: 1;<br />
}</div>
Romie