Template:Team:Trieste/frontend.css

From 2012.igem.org

Latest revision as of 18:47, 26 October 2012

/* vim: set ft=css: */ /* CSS Document */ @charset "utf-8";

/* ::::::::::::: STILI DI SETUP ::::::::::::::: */

body, html{height:100%; min-height:100%; position:relative; color:#666666; background:url() #E1E1E1 repeat-x center top; line-height:18px; font-family:Arial, sans-serif; font-size:12px;} html{overflow-y:scroll;}

• {outline:none; padding:0px; margin:0px; border:0px;}

a{color:#b50b3e; text-decoration:none;} a:hover{text-decoration:none; color:#e50f4f;}

h1{font-size:30px; font-weight:normal; font-family:HelveticaNeueLTStd35Thin, arial, serif; line-height:normal; line-height:normal;} h2{font-size:18px; font-weight:normal; padding-bottom:10px; margin-bottom:10px; border-bottom:1px dotted #abbac4; line-height:normal;}

.enfasi{font-style:italic; font-weight:bold;}

.stabilizzatore{display:block; clear:both; float:none;}

.elenco{margin-top:6px; margin-bottom:15px;} .elenco li{margin-left:25px;}

/* ::::::::::::: STRUTTURA ESSENZIALE ::::::::::::::: */

1. container{width:100%; height:auto !important; height:100%; min-height:100%; position:relative; min-width:1024px; background:url() no-repeat center top transparent;}

1. header{width:990px; min-height:172px; position:relative; z-index:1; margin:0 auto;}

1. content{width:990px; height:auto !important; position:relative; margin:0px auto 0; padding-top:215px; min-height:400px; background:url() no-repeat;}

1. footer{width:990px; margin:0 auto; color:#666666; position:relative; bottom:0;}

body#home #footer{top:-35px;}

1. footer #box_footer{text-align: right; margin:0 auto; width:300px; padding:0px 30px 15px 0px;/* background-color:#ffffff;

text-align right; -moz-border-radius-topleft:6px; -ms-border-radius-top-left:6px; -webkit-border-radius-top-left:6px; border-top-left-radius:6px; -moz-border-radius-topright:6px; -ms-border-radius-top-right:6px; -webkit-border-radius-top-right:6px; border-top-right-radius:6px;

• /

}

/* ::::::::::::: STRUTTURA COMPOSTA ::::::::::::::: */

/* ----------- start header ----------- */

1. logo{float:left; margin-top:19px; margin-left:-80px; width:154px; height:181px;}

1. payoff{float:left; color:#ffffff; font-size:65px; line-height:normal; margin-top:27px; margin-left: 40px; font-weight:normal;}
2. payoff div{font-size:16px; margin-left:260px; font-weight:bold;}

1. navigation{list-style:none; float:left; margin-top:7px; font-size:13px;margin-left:35px;}
2. navigation li{float:left; padding-right:6px; position:relative;}
3. navigation li a{display:block; padding:15px 6px 21px 6px; color:#999999;}
4. navigation li a:hover{color:#ffffff;}
5. navigation > li.select{background:url() no-repeat bottom right}
6. navigation li.select > a{background:url() repeat-x; color:#ffffff;}

/* submenu, it's hidden by default */

1. navigation ul {

   position:absolute;
   display: none;
   left:0; 
   margin:0 0 0 -1px; 
   padding:0; 
   list-style:none;
   background-color: black;

}

1. navigation ul li {

   width:120px; 
   float:none; 
   border-top:1px solid #fff;

}

1. navigation ul li a{

   padding:2px 2px 2px 5px;

}

img.logo-igem{float:right; position:relative; right:-16px; top:9px;} img.logo-igem2011{float:right; position:relative; right:-21px; top:9px;} img.logo-socialigem{ float:right; left:30px; position:relative; top:9px; }

/* ------------- start content --------------*/

1. image_main{width:100%; text-align:center; position:absolute;}

1. box_left, #box_right, body#home #box_main{float:left; min-height:730px; margin-top:9px; position:relative;

-moz-border-radius-topleft:6px; -ms-border-radius-top-left:6px; -webkit-border-radius-top-left:6px; border-top-left-radius:6px; -moz-border-radius-topright:35px; -ms-border-radius-top-right:35px; -webkit-border-radius-top-right:35px; border-top-right-radius:35px;}

1. box_left{width:315px; padding:30px 20px 20px 20px; z-index:5; background-color:#ffffff;

-moz-border-radius-topright:0px !important; -ms-border-radius-top-right:0px !important; -webkit-border-radius-top-right:0px !important; border-top-right-radius:6px !important; -moz-border-radius-bottomleft:6px !important; -ms-border-radius-bottom-left:6px !important; -webkit-border-radius-bottom-left:6px !important; border-bottom-left-radius:6px !important;} body#home #box_main{width:315px; padding:30px 20px 20px 20px; z-index:10; background:url() no-repeat top right #ffffff;}

1. box_right{width:240px; padding:30px 20px 34px 20px; float:right !important; margin-top:63px; margin-top:99px !important; z-index:15; background:url() no-repeat top right #ffffff; min-height:310px;

-moz-border-radius-bottomright:6px !important; -ms-border-radius-bottom-right:6px !important; -webkit-border-radius-bottom-right:6px !important; border-bottom-right-radius:6px !important; }

1. box_main{width:660px; padding:30px 30px 20px 20px; z-index:10; background:url() no-repeat top right #ffffff; float:left; min-height:auto; margin-top:9px; position:relative;

-moz-border-radius-topleft:6px; -ms-border-radius-top-left:6px; -webkit-border-radius-top-left:6px; border-top-left-radius:6px; -moz-border-radius-topright:35px; -ms-border-radius-top-right:35px; -webkit-border-radius-top-right:35px; border-top-right-radius:35px;

}

h1.main_tit, h1.main_tit, body#home h1.main_tit{position:absolute; -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); transform:rotate(-3deg); color:#ffffff; padding:15px 20px 20px 20px; top:170px; -moz-border-radius:10px; -ms-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}

h1.main_tit#h1_lf{left:-18px; z-index:3; /* blu */ background: #0a51a1; /* Old browsers */ background: -moz-linear-gradient(top, #0a51a1 0%, #0e7bcf 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a51a1), color-stop(100%,#0e7bcf)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0a51a1 0%,#0e7bcf 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0a51a1 0%,#0e7bcf 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0a51a1 0%,#0e7bcf 100%); /* IE10+ */ background: linear-gradient(to bottom, #0a51a1 0%,#0e7bcf 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a51a1', endColorstr='#0e7bcf',GradientType=0 ); /* IE6-9 */

}

h1.main_tit#h1_mn{left:337px; z-index:8;

/* rosso */

background: #930829; /* Old browsers */ background: -moz-linear-gradient(top, #930829 0%, #ca0e4b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#930829), color-stop(100%,#ca0e4b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #930829 0%,#ca0e4b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #930829 0%,#ca0e4b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #930829 0%,#ca0e4b 100%); /* IE10+ */ background: linear-gradient(to bottom, #930829 0%,#ca0e4b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#930829', endColorstr='#ca0e4b',GradientType=0 ); /* IE6-9 */

}

h1.main_tit#h1_rt{left:692px; z-index:13; top:260px !important; /* verde */

background: #369014; /* Old browsers */ background: -moz-linear-gradient(top, #369014 0%, #82bb22 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#369014), color-stop(100%,#82bb22)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #369014 0%,#82bb22 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #369014 0%,#82bb22 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #369014 0%,#82bb22 100%); /* IE10+ */ background: linear-gradient(to bottom, #369014 0%,#82bb22 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#369014', endColorstr='#82bb22',GradientType=0 ); /* IE6-9 */

}

h1.main_tit div, h1.main_tit div, body#home h1.main_tit div{ -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -webkit-transform:rotate(3deg); transform:rotate(3deg);}

.ombra{position:absolute;} .ombra.orr-left{top:215px; left:15px; z-index:4;} .ombra.orr-right{top:305px; right:25px; z-index:14;} .ombra.ver-left1{left:-7px; top:227px; z-index:4;} .ombra.ver-left2{left:347px; top:227px; z-index:9;} .ombra.ver-left3{left:702px; top:315px; z-index:13;} .ombra.ver-right{right:-7px; top:340px; z-index:14;}

1. widget_left{}
2. widget_left h2{width:125px; height:50px; text-align:right; padding:23px 102px 0 0px; background:url(../images/header_more.png) no-repeat center top transparent; font-family: 'Century Gothic', arial, serif; font-size:20px; color:#73767b;}
3. widget_left .box_dati{padding-top:15px; background:url(../images/hr_more.png) repeat-y; padding-bottom:15px;}
4. widget_left .box_dati .dati{margin-bottom:13px; height:40px;}
5. widget_left #referenze{padding-left:15px;}
6. widget_left .box_dati .dati > div{float:left; text-align:right;}
7. widget_left .box_dati .dati div > div{color:#649dc3}
8. widget_left .box_dati .dati div > div span{color:#666666;}
9. widget_left .box_dati .dati div img{margin-left:30px;}
10. widget_left .box_dati #tel{margin-left:42px;}
11. widget_left .box_dati #fax{margin-left:42px;}
12. widget_left .box_dati .azzera_margin{margin-left:42px !important;}

/* ----------- elementi comuni pagine interne ----------- */

.box_contenuti{text-align:justify;} .box_contenuti p, #box_left p, #box_right p{margin:10px 0;text-align: justify;}

/* ----------- box_loghi ----------- */

body#home .box_loghi{background-color:#ffffff; padding:20px 35px; margin-bottom:10px; text-align:center; border-top:3px solid #e4e4e4;width:auto !important; top:-35px; clear:both; float:none;}

.box_loghi{background-color:#ffffff; padding:20px 35px; margin-bottom:10px; text-align:center; width:640px; border-top:3px solid #e4e4e4; height:138px; float:left; position:relative; z-index:100; -moz-border-radius-bottomleft:6px !important; -ms-border-radius-bottom-left:6px !important; -webkit-border-radius-bottom-left:6px !important; border-bottom-left-radius:6px !important; -moz-border-radius-bottomright:6px !important; -ms-border-radius-bottom-right:6px !important; -webkit-border-radius-bottom-right:6px !important; border-bottom-right-radius:6px !important; }

.box_loghi img{margin:0 17px;} body#home .box_loghi img{margin:0 25px;}

/* ----------- start modelli ----------- */

/* modello per il sub menu */

1. sub_menu{list-style:none; margin-bottom:10px;}
2. sub_menu li{border-bottom:1px solid #dddddd; margin-bottom:1px; background-color:#eeeeee; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;}
3. sub_menu li a{display:block; padding:7px 5px 7px 10px; color:#333333;}
4. sub_menu li a:hover, #sub_menu li.select a{color:#ffffff;

background: #369014; /* Old browsers */ background: -moz-linear-gradient(top, #369014 0%, #82bb22 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#369014), color-stop(100%,#82bb22)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #369014 0%,#82bb22 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #369014 0%,#82bb22 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #369014 0%,#82bb22 100%); /* IE10+ */ background: linear-gradient(to bottom, #369014 0%,#82bb22 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#369014', endColorstr='#82bb22',GradientType=0 ); /* IE6-9 */

}

/* Definisco modello Article */

.article{width:auto; height:auto; margin-bottom:20px; padding-bottom:10px; position:relative; border-bottom:15px dotted #e5e5e5;} .article .title{width:auto; max-height:48px; line-height:normal; overflow:hidden; font-size:18px; text-transform:uppercase; padding-bottom:10px; margin-bottom:10px; border-bottom:1px dotted #abbac4;} .article .date{color:#252c30; font-weight:bold; font-style:italic; margin-bottom:20px;} .article .intro{width:auto; overflow:hidden; line-height:18px; max-height:58px;} .article .read_more{background:url() no-repeat center center #ffffff; position:absolute; width:13px; height:20px; bottom:-27px; right:-14px; padding:10px;} .article .read_more a{text-indent:-9999px; display:block;}

/* ----------- start contents ----------- */

/* home page */

1. box_left #video_pres{margin-bottom:20px;}
2. box_right .box_contacts{background:url("") no-repeat scroll 70px 22px transparent;}
3. box_right .box_contacts h2{font-family:HelveticaNeueLTStd35Thin, arial, serif; font-size:30px; margin-top:20px;}
4. box_right .box_contacts p{margin-top:15px; margin-bottom:15px; font-weight:bold; font-style:italic;}
5. box_right .box_contacts a.btn{padding:10px 15px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px; color:#ffffff;

background: #369014; /* Old browsers */ background: -moz-linear-gradient(top, #369014 0%, #82bb22 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#369014), color-stop(100%,#82bb22)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #369014 0%,#82bb22 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #369014 0%,#82bb22 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #369014 0%,#82bb22 100%); /* IE10+ */ background: linear-gradient(to bottom, #369014 0%,#82bb22 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#369014', endColorstr='#82bb22',GradientType=0 ); /* IE6-9 */

}

1. box_right .box_contacts .social{margin-top:30px;}
2. box_right .box_contacts .social img{top:6px; position:relative; left:8px;}

body#home #box_left{padding-bottom:50px;} body#home #box_main{padding-bottom:70px;} body#home #box_right{padding-bottom:140px;}

/* allignamenti foto */

.image_top_left{float:left; margin:0 15px 15px 0 !important; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;} .image_middle_left{float:left; margin:15px 15px 15px 0 !important; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;} .image_bottom_left{float:left; margin:15px 15px 0 0 !important; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;}

.image_top_right{float:right; margin:0 0 15px 15px !important; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;} .image_middle_right{float:right; margin:15px 0 15px 15px !important; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;} .image_bottom_right{float:right; margin:15px 0 0 15px !important; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -ms-border-radius:3px;}

/* fancy paragraphs */ p.fancy { margin-top: 1.5em;} ul.fancy,ul.fancy > li, ol.fancy > li { margin-left: 2em;}

1. content.team { background-image: none; padding-top: 0px; width: 1200px; }

div.notebook_section {

   border: 5px solid #930829;
   background-color: #ca0e4b ;
   margin-bottom: 1em;
   padding: 0.5em;
   border-radius: 5px;
   color: white;

}

1. suicide {

}

1. antibody {

   background-color: #0e7bcf;
   border-color: #0a51a1;

}

1. chassis {

   background-color: #82bb22;
   border-color: #369014;

}

1. antibody > h2.notebook_title {

   background-color: #0a51a1;

}

1. chassis > h2.notebook_title {

   background-color: #369014;

}

h2.notebook_title {

   border:5px solid;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-bottom-left-radius: 5px;
   background-color: #930829;
   bottom:11px;
   float:right;
   left:11px;
   margin:0;
   padding:2px;
   position:relative;

}

h2.header {

   padding-top: 2em;

}

td {

   padding: 5px;

}

.footnotes {

   border-top: 1px dashed #CCCCCC;
   margin-top: 4em;
   padding-top: 1em;
   font-size: 10px;

}

p.didascalia {

   font-size: 10px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 1em;
   width: 70%;

}

.centrato { margin-left: auto; margin-right: auto; }

table.outreach span {

   display: none;

}

table.outreach td {

   padding: 2em;

}

table#team { border-spacing: 0.5em 2em; }

table#team h2 {

   text-align: center;

}

table#team h1 {

   text-align: center;
   border-bottom: 2px solid #CCCCCC;
   margin-top: 1em;

}

div#counter {

   background-image:url("");
   background-repeat:no-repeat;
   bottom:-10em;
   height:300px;
   padding-left:15px;
   padding-top:140px;
   position:absolute;
   width:215px;
   z-index:100;
   left:62%;

}

body#home div#counter { left:80%; }

.post-jamboree {

   margin: 1em auto;
   text-align: center;

}

span.small {

   font-size: 0.8em;

}