Team:UCL-London/Test

From 2013.igem.org

(Difference between revisions)
Line 3: Line 3:
<!--CSS styles: global-->
<!--CSS styles: global-->
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
-
 
-
<style>
 
-
/*======
 
-
Desktop Styling
 
-
======*/
 
-
 
-
/***Body styling***/
 
-
h1{
 
-
font-size: 2.5em;
 
-
}
 
-
h2{
 
-
font-size: 1.8em;
 
-
}
 
-
 
-
#box1{
 
-
width: 968px;
 
-
margin-top: -8px;
 
-
background: threedface;
 
-
float: left;
 
-
padding-bottom: 20px;
 
-
margin-bottom: 13px;
 
-
}
 
-
#box1 h2{
 
-
padding: 20px 20px 20px 20px;
 
-
}
 
-
#box1 p{
 
-
padding: 0px 20px 0px 20px;
 
-
font-size: 1.1em;
 
-
}
 
-
 
-
#FredOscarFlag{
 
-
display: block;
 
-
float: left;
 
-
width: 250px;
 
-
height: 274px;
 
-
background: url('https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012_FRED_and_OSCAR_Main_Page.png');
 
-
background-position: top;
 
-
margin: 15px;
 
-
}
 
-
#FredOscarFlag:hover{
 
-
background-position: bottom;
 
-
}
 
-
 
-
 
-
#box2{
 
-
width: 968px;
 
-
background: #C68DD8;
 
-
float: left;
 
-
margin-bottom: 13px;
 
-
}
 
-
#box2 h2{
 
-
padding: 20px 20px 20px 20px;
 
-
color: white;
 
-
}
 
-
#box2 p{
 
-
padding: 0px 20px 0px 20px;
 
-
font-size: 1.1em;
 
-
color: white;
 
-
}
 
-
#box2 img{
 
-
float: left;
 
-
margin: 15px;
 
-
height: 110px;
 
-
}
 
-
#box2:hover{
 
-
background: #D79EE9;
 
-
}
 
-
 
-
/***positioning of elements in ZE EPIC BOX***/
 
-
#epicbox{
 
-
margin-top: 4px;
 
-
}
 
-
 
-
#boximgcontainer{
 
-
float: left;
 
-
width: 644px;
 
-
height: 655px;
 
-
}
 
-
#boximgcontainer div{
 
-
float: left;
 
-
position: relative;
 
-
}
 
-
#orangebox{
 
-
margin-bottom: 4px;
 
-
}
 
-
#orangebox .imgbox{
 
-
width: 644px;
 
-
height: 215px;
 
-
top: 108px;
 
-
background: #F6A82D;
 
-
margin-bottom: 4px;
 
-
}
 
-
.oblank{
 
-
width: 644px;
 
-
height: 104px;
 
-
background: #FFE485;
 
-
position: relative;
 
-
top: -219px;
 
-
}
 
-
#orangebox:hover .oblank, .oblank:hover{
 
-
display: none;
 
-
}
 
-
#orangebox .iconcontainer{
 
-
position: relative;
 
-
display: none;
 
-
left: auto;
 
-
top: -219px;
 
-
}
 
-
.iconbox div, .iconbox{
 
-
width: 104px;
 
-
height: 104px;
 
-
margin-right: 4px;
 
-
}
 
-
a.obox1 div{
 
-
background: #FFD35A;
 
-
}
 
-
a.obox2 div{
 
-
background: #FECC44;
 
-
}
 
-
a.obox3 div{
 
-
background: #F8C22E;
 
-
}
 
-
a.obox4 div{
 
-
background: #F8B32E;
 
-
}
 
-
a.obox5 div{
 
-
background: #F6A82D;
 
-
}
 
-
a.obox6 div{
 
-
background: #F39808;
 
-
margin-right: 0;
 
-
}
 
-
#orangebox div:hover, #orangebox div.iconbox:hover div{
 
-
background: #FFE44F;
 
-
}
 
-
#orangebox:hover .iconcontainer{
 
-
display: block;
 
-
background: transparent;
 
-
}
 
-
 
-
 
-
#greenbox .imgbox{
 
-
width: 320px;
 
-
height: 215px;
 
-
background: #58CD45;
 
-
}
 
-
.gblank{
 
-
width: 320px;
 
-
height: 104px;
 
-
background: #B6FFA3;
 
-
position: relative;
 
-
top: 219px;
 
-
left: -320px;
 
-
}
 
-
#greenbox .iconcontainer{
 
-
position: relative;
 
-
margin-top: 4px;
 
-
left: -999em;
 
-
z-index: 1;
 
-
}
 
-
a.gbox1 div{
 
-
background: #72E85B;
 
-
}
 
-
a.gbox2 div{
 
-
background: #5BCD45;
 
-
}
 
-
a.gbox3 div{
 
-
background: #4CC035;
 
-
}
 
-
a.gbox4 div{
 
-
background: #44AF2F;
 
-
}
 
-
#greenbox div:hover, #greenbox div.iconbox:hover div{
 
-
background: #94FF7D;
 
-
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
 
-
}
 
-
#greenbox:hover .gblank, .gblank:hover{
 
-
display: none;
 
-
}
 
-
#greenbox:hover .iconcontainer{
 
-
left: auto;
 
-
background: transparent;
 
-
}
 
-
 
-
#bluebox{
 
-
position: relative;
 
-
top: -323px;
 
-
left: 320px;
 
-
}
 
-
#bluebox .imgbox{
 
-
width: 320px;
 
-
height: 215px;
 
-
background: #5BB5E8;
 
-
margin-left: 4px;
 
-
}
 
-
.bblank{
 
-
width: 320px;
 
-
height: 104px;
 
-
background: #C5F0F0;
 
-
position: relative;
 
-
top: 219px;
 
-
left: -320px;
 
-
z-index: 0;
 
-
}
 
-
#bluebox .iconcontainer{
 
-
position: relative;
 
-
margin-top: 4px;
 
-
left: -999em;
 
-
z-index: 0;
 
-
}
 
-
a.bbox1 div{
 
-
background: #1574AA;
 
-
}
 
-
a.bbox2 div{
 
-
background: #2580B3;
 
-
}
 
-
a.bbox3 div{
 
-
background: #3285B4;
 
-
}
 
-
a.bbox4 div{
 
-
background: #4292BF;
 
-
}
 
-
a.bbox5 div{
 
-
background: #50A2D0;
 
-
}
 
-
a.bbox6 div{
 
-
background: #5BB5E8;
 
-
margin: 0;
 
-
}
 
-
#bluebox div:hover, #bluebox .iconbox:hover div{
 
-
background: #7DD7FF;
 
-
z-index: 99; /*hovers are not overridden by FRED boxes*/
 
-
}
 
-
#bluebox:hover .bblank, .bblank:hover{
 
-
display: none;
 
-
}
 
-
#bluebox:hover .iconcontainer{
 
-
left: -212px;
 
-
background: transparent;
 
-
}
 
-
 
-
#boxinfo{
 
-
float: right;
 
-
position: relative;
 
-
width: 320px;
 
-
left: 3px;
 
-
background: #555555;
 
-
height: 650px;
 
-
margin-bottom: 12px;
 
-
}
 
-
#boxinfo h2{
 
-
color: white;
 
-
padding: 20px 20px 0px;
 
-
}
 
-
#boxinfo p{
 
-
color: white;
 
-
padding: 10px 20px 20px;
 
-
font-size: 1.2em;
 
-
}
 
-
/*initial boxinfo appearance settings*/
 
-
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
 
-
display: none;
 
-
}
 
-
#boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
 
-
#boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
 
-
position: relative;
 
-
padding-top: 320px;
 
-
display: none;
 
-
}
 
-
/*bold colours for FRED and OSCAR*/
 
-
#boxinfo div.greenbox b{
 
-
color: #72E85B;
 
-
}
 
-
#boxinfo div.bluebox b{
 
-
color: #5EB7F0;
 
-
}
 
-
.threeboxes{
 
-
clear: both;
 
-
position: relative;
 
-
width: 968px;
 
-
margin-bottom: 12px;
 
-
}
 
-
.threeboxes a, .threeboxes a div{
 
-
width: 320px;
 
-
height: 155px;
 
-
float: left;
 
-
margin-bottom: 12px;
 
-
}
 
-
.threeboxes div h2{
 
-
padding: 20px 20px 0px;
 
-
position: relative;
 
-
top: -155px;
 
-
}
 
-
.threeboxes div p{
 
-
padding: 0px 20px;
 
-
position: relative;
 
-
top: -155px;
 
-
}
 
-
#greybox1, #greybox6{
 
-
margin-right: 4px;
 
-
background: #58CD45;
 
-
}
 
-
#greybox1:hover, #greybox6:hover{
 
-
background: #94FF7D;
 
-
}
 
-
#greybox2, #greybox5{
 
-
margin-right: 4px;
 
-
background: #5BB5E8;
 
-
}
 
-
#greybox2:hover, #greybox5:hover{
 
-
background: #7DD7FF;
 
-
}
 
-
#greybox3, #greybox4{
 
-
margin: 0;
 
-
background: #F6A82D;
 
-
}
 
-
#greybox3:hover, #greybox4:hover{
 
-
background: #FFE44F;
 
-
}
 
-
 
-
#sponsorsbox{
 
-
clear: both;
 
-
position: relative;
 
-
width: 968px;
 
-
margin: 4px 0px;
 
-
background: #EEEEEE;
 
-
}
 
-
#sponsorsbox h2{
 
-
padding: 20px 20px 0px 20px;
 
-
}
 
-
#sponsorsbox p{
 
-
padding: 0px 20px;
 
-
}
 
-
#sponsorsbox table{
 
-
width: 950px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
background: #EEEEEE;
 
-
}
 
-
#sponsorsbox td{
 
-
padding: 15px 0px;
 
-
width: 300px;
 
-
}
 
-
#sponsorsbox img{
 
-
display: block;
 
-
margin-right: auto;
 
-
margin-left: auto;
 
-
}
 
-
 
-
</style>
 
<script>
<script>

Revision as of 15:49, 13 June 2013