Template:Team:Trieste/frontend.css

From 2012.igem.org

(Difference between revisions)
(better notebook suport)
(added padding)
Line 261: Line 261:
     border: 5px solid #930829;
     border: 5px solid #930829;
     margin-bottom: 1em;
     margin-bottom: 1em;
 +
    padding: 0.5em;
     border-radius: 5px;
     border-radius: 5px;
}
}

Revision as of 11:32, 16 September 2012

@charset "utf-8"; /* CSS Document */

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

body, html{height:100%; min-height:100%; position:relative; color:#666666; background:url(Trieste-bg_body.jpg) #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;}

@font-face { 

   font-family: 'HelveticaNeueLTStd35Thin';
   src: url('../fonts/helveticaneueltstd-th-webfont.eot');
   src: url('../fonts/helveticaneueltstd-th-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/helveticaneueltstd-th-webfont.woff') format('woff'),
        url('../fonts/helveticaneueltstd-th-webfont.ttf') format('truetype'),
        url('../fonts/helveticaneueltstd-th-webfont.svg#HelveticaNeueLTStd35Thin') format('svg');
   font-weight: normal;
   font-style: normal;

}

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(Trieste-bg_header.jpg) 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(Trieste-img_main.jpg) no-repeat;}
  1. footer{width:990px; margin:0 auto; color:#666666; position:relative; bottom:0;}

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

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

-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:16px; line-height:normal; margin-top:27px; margin-left: 2em; font-weight:bold;}
  2. payoff div{font-size:65px; font-family:HelveticaNeueLTStd35Thin, arial, serif; margin-left:38px; font-weight:normal;}
  1. navigation{list-style:none; float:left; margin-top:7px; font-size:13px;}
  2. navigation li{float:left; padding-right:6px;}
  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(Trieste-angolo_menu.png) no-repeat bottom right}
  6. navigation li.select a{background:url(Trieste-bg_select_menu.jpg) repeat-x; color:#ffffff;}

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:530px; 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(Trieste-angolo_rosso.png) 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(Trieste-angolo_verde.png) 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(Trieste-angolo_blu.png) 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(Trieste-freccia.png) 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("Trieste-bg_mouse.png") 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: 2px; text-indent: 2em; } 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;
   margin-bottom: 1em;
   padding: 0.5em;
   border-radius: 5px;

}

  1. suicide {

}

  1. antibody { 
   border-color: #0a51a1;

}

  1. chassis { 
   border-color: #369014;

}

Retrieved from "http://2012.igem.org/Template:Team:Trieste/frontend.css"