Difference between revisions of "Team:Toulouse/css"

(Created page with "<html class='no-js' lang='en'> <!--<![endif]--> <head> <meta charset='utf-8' /> <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' /> <title>iGEM TOULOUSE 2015...")
 
Line 1: Line 1:
 
<html class='no-js' lang='en'>
 
<html class='no-js' lang='en'>
−
<!--<![endif]-->
 
 
<head>
 
<head>
−
<meta charset='utf-8' />
+
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix{height:1%}
−
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
+
−
<title>iGEM TOULOUSE 2015</title>
+
@media screen {
−
+
  .sIFR-flash {
−
<link rel="shortcut icon" href="favicon.ico" />
+
    visibility: visible !important;
−
<link rel="apple-touch-icon" href="favicon.png" />
+
    margin: 0;
−
+
    padding: 0;
−
<!--CSS 1-->
+
  }
−
<style type="text/css">
+
 
−
.mc-hide-scrolls{
+
  .sIFR-flash:focus{outline: none;}
−
overflow:hidden;
+
 
 +
  .sIFR-replaced, .sIFR-ignore {
 +
    visibility: visible !important;
 +
  }
 +
 
 +
  .sIFR-alternate {
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
    width: 0;
 +
    height: 0;
 +
    display: block;
 +
    overflow: hidden;
 +
  }
 +
 
 +
  .sIFR-replaced div.sIFR-fixfocus {
 +
    margin: 0pt;
 +
    padding: 0pt;
 +
    overflow: auto;  
 +
    letter-spacing: 0px;
 +
    float: none;
 +
  }
 
}
 
}
−
body .mc-cycle {
+
 
−
height:100%;
+
@media print {
−
left:0;
+
  .sIFR-flash {
−
overflow:hidden;
+
    display    : none !important;
−
position:fixed;
+
    height     : 0;
−
top:0;
+
    width      : 0;
−
width:100%;
+
    position  : absolute;
−
z-index:-1;
+
    overflow   : hidden;
 +
  }
 +
 
 +
  .sIFR-alternate {
 +
    visibility : visible !important;
 +
    display    : block  !important;
 +
    position   : static  !important;
 +
    left      : auto    !important;
 +
    top       : auto    !important;
 +
    width     : auto    !important;
 +
    height    : auto    !important;
 +
  }
 
}
 
}
−
div.mc-image {
+
 
−
/*NOTE: Mozilla flickers when fading and using 'all', so we have to be specific with what property we want to transition:
+
@media screen {
−
If you are using fading transitions, use 'opacity: */
+
  /* Example:
−
-webkit-transition: opacity 1s ease-in-out;
+
  .sIFR-active h1 {
−
-moz-transition: opacity 1s ease-in-out;  
+
    font-family: Verdana;
−
-o-transition: opacity 1s ease-in-out;  
+
    visibility: hidden;
−
transition: opacity 1s ease-in-out;
+
  }
−
/*If you are using horizontal slide transitions, use the following CSS:
+
  */
−
-webkit-transition: left 1s ease-in-out;
+
−
-moz-transition: left 1s ease-in-out;
+
−
-o-transition: left 1s ease-in-out;
+
−
transition: left 1s ease-in-out;*/
+
−
-webkit-background-size: cover;
+
−
-moz-background-size: cover;
+
−
-o-background-size: cover;
+
−
background-size: cover;
+
−
background-position:center center;
+
−
background-repeat:no-repeat;
+
−
height:100%;
+
−
overflow:hidden;
+
−
width:100%;
+
 
}
 
}
−
.mc-old-browser .mc-image {
+
/* Reset */
−
overflow:hidden;
+
 
 +
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
 +
 
 +
html,body{
 +
height: 100%;
 +
 
 
}
 
}
−
 
−
@import url(http://fonts.googleapis.com/css?family=Coustard|Open+Sans);
 
  
−
body {
+
body{
−
font-family: 'Open Sans', sans-serif;
+
margin:0;
−
font-size: 14px;
+
padding:0;
−
line-height: 21px;
+
background-size: 100% ;
−
font-weight:400;
+
 
−
-webkit-font-smoothing: antialiased;
+
background-attachment:fixed;
−
    font-smoothing: antialiased;
+
font-family:"Helvetica Neue",Helvetica, Arial;
−
color: #777;
+
background-image:url("https://static.igem.org/mediawiki/2015/1/12/Toulouse_-_Pont_Saint-Pierre_et_H%C3%B4pital_de_La_Grave.jpg");
−
background: #000;
+
 
}
 
}
−
h1, h2, h3, h4, h5, h6{
+
 
−
font-family: 'Coustard', serif;
+
div#shim{
−
color:#fff;
+
visibility: hidden;
−
font-weight: normal;
+
width: 100%;
−
letter-spacing: 1px;
+
height: 50%;                                                                    
 +
margin-top: -140px;                                                             
 +
float: left;
 
}
 
}
−
h1{font-size: 63px; line-height: 70px; padding: 0; margin: 0;}
 
−
h5{font-size: 28px; line-height: 35px; padding: 0; margin: 0; color: #b7b7b7;}
 
  
−
a {
+
div#content {
−
color: #b7b7b7;
+
width: 940px;
−
text-decoration:none;
+
height: 280px;
−
font-weight: normal;
+
margin: 0 auto;
 +
clear: both;
 +
position: relative;
 +
top: -140px;
 +
 
 +
/* IE4ever Hack: Hide from IE4 **/
 +
position: static;
 +
/** end hack */
 
}
 
}
−
a:hover {text-decoration:underline;}
+
 
 +
/* Hide from IE5mac \*//*/
 +
div#shim {
 +
display: none;
 +
}
 +
html, body {
 +
height: auto;
 +
}
 +
/* end hack */
 +
/* ]]> */
  
  
−
#maximage {
+
.logo_box{
−
display:none;
+
width: 349px;
−
position:fixed !important;
+
float: left;
 +
border-right: 1px solid #303030;
 +
height: 280px;
 +
position: relative;
 
}
 
}
  
−
.gradient {
+
h1{
−
left:0;
+
padding: 12px 70px 12px 20px;
−
height:100%;
+
position: absolute;
−
position:absolute;
+
right: 0;
−
top:0;
+
text-align:left;
−
width:100%;
+
top: 25%;
−
z-index:999;
+
float: left;
 +
color: #fff;
 +
letter-spacing: -1px;
 +
font-size: 38px;
 
}
 
}
  
−
.show{display: block;}
+
h1 cufon{
−
.hide{opacity: 0;}
+
margin-bottom: -4px;
 +
}
  
−
/* Set Page Elements */
+
h3{
−
.content {  
+
font-size: 24px;
−
float:left;
+
color: #333;
−
margin:40px;
+
float: left;
−
position:absolute;
+
margin-right: 15px;
−
top:200px;
+
padding-top: 5px;
−
width:600px;
+
−
z-index:9999;
+
−
-webkit-font-smoothing:antialiased;
+
 
}
 
}
  
−
#logo {
+
.main_box{
−
font-family: 'Coustard', serif;
+
float: left;
−
font-size: 30px;
+
width: 500px;
−
bottom:40px;
+
height: 95px;
−
height:auto;
+
padding: 25px;
−
left:40px;
+
−
position:absolute;
+
−
width:20%;
+
−
z-index:1000;
+
−
color: #fff;
+
 
}
 
}
  
−
.main-nav{
+
form{
−
position:absolute;
+
width: 590px;
−
bottom: 23px;
+
padding: 10px 0;
−
left:210px;
+
float: left;
−
z-index:1001;
+
background: url(./images/dots.gif) right top repeat-y;
 +
height: 80px;
 
}
 
}
−
.main-nav ul li {  
+
 
−
list-style: none;
+
h2{
−
display: inline;
+
font-family: Georgia;
−
padding-right: 10px;
+
color: #ffe400;
−
padding-left: 10px;
+
font-size: 24px;
−
border-left: 1px solid #b7b7b7;
+
margin-bottom: 20px;
 
}
 
}
−
.main-nav ul li a.active {color: #ffa800;}
 
  
−
.social-nav {
+
h2 span{
−
position:absolute;
+
color: #fff;
−
top: 0px;
+
font-size: 16px;
−
left: 40px;
+
line-height: 26px;
 +
font-style: italic;
 
}
 
}
−
.social-nav ul {margin: 0; padding:0;}
+
 
−
.social-nav ul li{
+
ul.info{
−
list-style: none;
+
width: 500px;
−
display:block;
+
padding: 0;
−
float: left;
+
margin: 10px 0 0 0;
−
background: #393939;
+
float: left;
−
padding:100px 10px 5px 10px;
+
−
margin: 1px;
+
−
opacity: .5;
+
 
}
 
}
−
.social-nav ul li:hover {opacity: 1;}
 
  
−
button.full-screen{  
+
ul.info li{
−
position: absolute;
+
margin-bottom: 20px;
−
top: 0;
+
clear: both;
−
right: 0;
+
float: left;
−
width: 31px;
+
−
height: 31px;
+
−
border: 0;
+
−
cursor: pointer;
+
−
opacity: .7;
+
 
}
 
}
−
button.full-screen:hover {opacity: 1;}
 
  
−
#arrow_left, #arrow_right {
+
ul.info li p{
−
bottom:30px;
+
font-size: 13px;
−
height:42px;
+
line-height: 20px;
−
position:absolute;
+
color: #fff;
−
right:40px;
+
float: left;
−
width:42px;
+
margin: 0;
−
z-index:1000;
+
 
}
 
}
−
#arrow_left {
+
 
−
right:95px;
+
 
 +
ul.info li p.social a.tw{
 +
width: 28px;
 +
height: 28px;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) left top no-repeat;
 +
margin-right: 8px;
 +
float: left;
 
}
 
}
−
</style>
+
 
 +
ul.info li p.social a.fb{
 +
width: 28px;
 +
height: 28px;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -36px top no-repeat;
 +
float: left;
 +
margin-right: 8px;
 +
}
 +
 
 +
ul.info li p.social a.li{
 +
width: 28px;
 +
height: 28px;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -72px top no-repeat;
 +
float: left;
 +
}
 +
 
 +
ul.info li p.social a.tw:hover{
 +
width: 28px;
 +
height: 28px;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) left bottom no-repeat;
 +
float: left;
 +
}
 +
 
 +
ul.info li p.social a.fb:hover{
 +
width: 28px;
 +
height: 28px;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -36px bottom no-repeat;
 +
float: left;
 +
}
 +
 
 +
ul.info li p.social a.li:hover{
 +
width: 28px;
 +
height: 28px;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -72px bottom no-repeat;
 +
float: left;
 +
}
 +
 
 +
 
 +
 
 +
.field{
 +
float: left;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) left top no-repeat;
 +
width: 425px;
 +
height: 21px;
 +
font-size: 14px;
 +
color: #666;
 +
padding: 10px;
 +
border: none;
 +
}
 +
 
 +
.submit_butt{
 +
float: left;
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) right top no-repeat;
 +
width: 109px;
 +
height: 41px;
 +
border: none;
 +
cursor: pointer;
 +
}
 +
 
 +
.submit_butt:hover{
 +
background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) right bottom no-repeat;
 +
}
 +
 
 +
.connect{
 +
width: 145px;
 +
padding-left: 20px;
 +
float: left;
 +
padding-top: 20px;
 +
}
 +
 
 +
.connect img{
 +
margin-right: 5px;
 +
}
 +
 
 
</head>
 
</head>
 
</html>
 
</html>

Revision as of 13:11, 3 June 2015

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}.container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px}.container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px}.alpha{margin-left:0}.omega{margin-right:0}.container_12 .grid_1{width:60px}.container_12 .grid_2{width:140px}.container_12 .grid_4{width:300px}.container_12 .grid_5{width:380px}.container_12 .grid_7{width:540px}.container_12 .grid_8{width:620px}.container_12 .grid_10{width:780px}.container_12 .grid_11{width:860px}.container_16 .grid_1{width:40px}.container_16 .grid_2{width:100px}.container_16 .grid_3{width:160px}.container_16 .grid_5{width:280px}.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}.container_16 .grid_11{width:640px}.container_16 .grid_13{width:760px}.container_16 .grid_14{width:820px}.container_16 .grid_15{width:880px}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}.container_12 .prefix_1{padding-left:80px}.container_12 .prefix_2{padding-left:160px}.container_12 .prefix_4{padding-left:320px}.container_12 .prefix_5{padding-left:400px}.container_12 .prefix_7{padding-left:560px}.container_12 .prefix_8{padding-left:640px}.container_12 .prefix_10{padding-left:800px}.container_12 .prefix_11{padding-left:880px}.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}.container_12 .suffix_1{padding-right:80px}.container_12 .suffix_2{padding-right:160px}.container_12 .suffix_4{padding-right:320px}.container_12 .suffix_5{padding-right:400px}.container_12 .suffix_7{padding-right:560px}.container_12 .suffix_8{padding-right:640px}.container_12 .suffix_10{padding-right:800px}.container_12 .suffix_11{padding-right:880px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_12 .push_3,.container_16 .push_4{left:240px}.container_12 .push_6,.container_16 .push_8{left:480px}.container_12 .push_9,.container_16 .push_12{left:720px}.container_12 .push_1{left:80px}.container_12 .push_2{left:160px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_12 .pull_3,.container_16 .pull_4{left:-240px}.container_12 .pull_6,.container_16 .pull_8{left:-480px}.container_12 .pull_9,.container_16 .pull_12{left:-720px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix{height:1%} @media screen { .sIFR-flash { visibility: visible !important; margin: 0; padding: 0; } .sIFR-flash:focus{outline: none;} .sIFR-replaced, .sIFR-ignore { visibility: visible !important; } .sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-replaced div.sIFR-fixfocus { margin: 0pt; padding: 0pt; overflow: auto; letter-spacing: 0px; float: none; } } @media print { .sIFR-flash { display : none !important; height : 0; width : 0; position : absolute; overflow : hidden; } .sIFR-alternate { visibility : visible !important; display : block !important; position : static !important; left : auto !important; top : auto !important; width : auto !important; height : auto !important; } } @media screen { /* Example: .sIFR-active h1 { font-family: Verdana; visibility: hidden; } */ } /* Reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,dfn,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} html,body{ height: 100%; } body{ margin:0; padding:0; background-size: 100% ; background-attachment:fixed; font-family:"Helvetica Neue",Helvetica, Arial; background-image:url("https://static.igem.org/mediawiki/2015/1/12/Toulouse_-_Pont_Saint-Pierre_et_H%C3%B4pital_de_La_Grave.jpg"); } div#shim{ visibility: hidden; width: 100%; height: 50%; margin-top: -140px; float: left; } div#content { width: 940px; height: 280px; margin: 0 auto; clear: both; position: relative; top: -140px; /* IE4ever Hack: Hide from IE4 **/ position: static; /** end hack */ } /* Hide from IE5mac \*//*/ div#shim { display: none; } html, body { height: auto; } /* end hack */ /* ]]> */ .logo_box{ width: 349px; float: left; border-right: 1px solid #303030; height: 280px; position: relative; } h1{ padding: 12px 70px 12px 20px; position: absolute; right: 0; text-align:left; top: 25%; float: left; color: #fff; letter-spacing: -1px; font-size: 38px; } h1 cufon{ margin-bottom: -4px; } h3{ font-size: 24px; color: #333; float: left; margin-right: 15px; padding-top: 5px; } .main_box{ float: left; width: 500px; height: 95px; padding: 25px; } form{ width: 590px; padding: 10px 0; float: left; background: url(./images/dots.gif) right top repeat-y; height: 80px; } h2{ font-family: Georgia; color: #ffe400; font-size: 24px; margin-bottom: 20px; } h2 span{ color: #fff; font-size: 16px; line-height: 26px; font-style: italic; } ul.info{ width: 500px; padding: 0; margin: 10px 0 0 0; float: left; } ul.info li{ margin-bottom: 20px; clear: both; float: left; } ul.info li p{ font-size: 13px; line-height: 20px; color: #fff; float: left; margin: 0; } ul.info li p.social a.tw{ width: 28px; height: 28px; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) left top no-repeat; margin-right: 8px; float: left; } ul.info li p.social a.fb{ width: 28px; height: 28px; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -36px top no-repeat; float: left; margin-right: 8px; } ul.info li p.social a.li{ width: 28px; height: 28px; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -72px top no-repeat; float: left; } ul.info li p.social a.tw:hover{ width: 28px; height: 28px; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) left bottom no-repeat; float: left; } ul.info li p.social a.fb:hover{ width: 28px; height: 28px; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -36px bottom no-repeat; float: left; } ul.info li p.social a.li:hover{ width: 28px; height: 28px; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) -72px bottom no-repeat; float: left; } .field{ float: left; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) left top no-repeat; width: 425px; height: 21px; font-size: 14px; color: #666; padding: 10px; border: none; } .submit_butt{ float: left; background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) right top no-repeat; width: 109px; height: 41px; border: none; cursor: pointer; } .submit_butt:hover{ background: url(https://static.igem.org/mediawiki/2015/7/76/Social.png) right bottom no-repeat; } .connect{ width: 145px; padding-left: 20px; float: left; padding-top: 20px; } .connect img{ margin-right: 5px; }