Team:Shenzhen BGIC ATCG/css/menu.css

From 2013.igem.org

(Difference between revisions)
Line 689: Line 689:
}
}
-
.eye_right {
+
.eye-right {
  position: absolute;  
  position: absolute;  
width:18px;  
width:18px;  

Revision as of 08:36, 17 September 2013

html {

 background:#ccc ;
 min-height: 100%;
 margin: 0;
 font-size: 100%;
 font-family: 'Terminal Dosis', Arial, sans-serif !important;
 font-size: 13px;

} ul, li {

 list-style: none; 
 padding: 0;

}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; border-bottom: 0px; }

  1. content {

width: 1171px; background: #ccc; border:0px; position:absolute; }

.container{ position:relative; } a{ color: #ccc ; text-decoration: none !important; outline: none !important; hide-focus: expression(this.hideFocus=true); } .clr{ clear: both; }

h1{ margin:0px; padding:20px; font-size:32px; color:#000;

   text-shadow:1px 1px 1px rgba(255,255,255,0.9);

text-align:center; font-weight:400; } h1 span{

   display:block;

font-size:14px; color:#666;

   font-style:italic;
   font-family:Georgia, serif;

padding-top:5px; } h2 { font-size:18px !important; font-family:'Terminal Dosis', Arial, sans-serif !important; font-weight:bold !important; color: #000; } /* Header Style */ .header{ font-family:'Arial Narrow', Arial, sans-serif; line-height: 24px; font-size: 11px; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; } .header a{ padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; } .header a:hover{ color: #fff; } .header span.right{ float: right; } .header span.right a{ float: none; display: inline; }

.more{ position:relative; clear:both;

   font-size: 11px;
   padding: 20px 0px;
   text-transform:uppercase;
   width: 390px;
   height:55px;
   margin: 0 auto;

} .more ul{ display:block; text-align:center; } .more ul li{ display: block;

   padding: 4px 4px;
   float:left;

} .more ul li.selected a, .more ul li.selected a:hover{ background:#0099c5; color:#fff; text-shadow:none;

   font-weight:bold;

} .more ul li a{ color:#555;

   float:left;

background:#fff;

   width:64px;

padding: 2px 5px; -moz-box-shadow:1px 1px 2px #aaa; -webkit-box-shadow:1px 1px 2px #aaa; box-shadow:1px 1px 2px #aaa; } .more ul li a:hover{ background:#000; color:#fff; } ul li { list-style:none; }

a, p{ font-size:15px; line-height:20px; font-family:'Terminal Dosis', Arial, sans-serif !important; color: #ccc !important; }

  1. bodymain {

position:relative; width: 986px; max-width: 988px; top:308px; left:193px; }

.context{ background-color:#333; opacity:0.8; } .context:hover{ opacity:1; }

h5 { background-color:#666; font-size:15px; color:#d9d9d9 ; line-height: 24px; height: 24px auto; padding-left:5px; padding-right:5px; } .context:hover h5{ background-color:#FBB042; color:#333 ; } h6 { font-size:15px; color:#d9d9d9; line-height: 24px; height: 24px auto; padding-left:5px; padding-right:5px; } .context p,.context li{ list-style:none; padding-left:5px; padding-right:5px; }


} .context li, .personintrolong li, .personintroshort li{ color:#fff; } .context:hover li{ color:#FBB042; } .context:hover table{ border:3px solid #FBB042; }

.context ul{ MARGIN-top: 10px; MARGIN-bottom: 10px; }

.figurep { width:100%; text-align: center !important; MARGIN-left: auto; MARGIN-right: auto; } .figurep img { text-align: center !important; MARGIN-left: auto; MARGIN-right: auto; } .figurep p{ width:30% auto; MARGIN-left: auto; MARGIN-right: auto; } table { background-color:#333; color:#D9D9D9 ; border:3px solid #999; text-align: center !important; MARGIN-left: auto; MARGIN-right: auto; } table td{ padding: 2px; border:2px solid #333; }


.menu {

 position: absolute;  
 height:302px;
 width:1171px;
 left: 20px;
 padding:0;
 background: url(Menu.png) no-repeat;

}


.menu_navi {

 position: relative;
 list-style: none; 
 margin: 0; 
 padding: 0;
 z-index:9999;

}

.subs {

 z-index: 9999998;
 background: #333;
 width: 242px;

} .mainnavi {

 position: relative;
 float: left;
 width: 118px;
 margin-right:6px;
 margin-top:227px;

}

.subnavi {

 text-align:center;

} .subnavi a{

 height:30px !important;
 text-align:center;
 width: 242px;
 background: #666  !important;
 line-height:30px  !important;
 z-index: 9999999;
 border-top:2px solid #ccc;

} .subnavi a:hover{

 background: #333  !important;

} .mainnavi ul{

 display:none;

} .menu_navi li:hover ul{

 display:block;

} .mainnavi a {

 position: relative; 
 display: block; 
 height: 60px;

background: url(Navi2.png) no-repeat; text-decoration: none !important; }

.js .mainnavi a:hover {

 top: 0;

}

.menu_navi li.c1 {

 padding-left: 179px;

}

.menu_navi li.c1 a {

 background-position: 0 0;

}

.menu_navi li.c1 a:hover {

 background-position: 0 -65px;

}

.menu_navi li.c2 a {

 background-position: -123px 0;

}

.menu_navi li.c2 a:hover {

 background-position: -123px -65px;

} .menu_navi li.c3 a {

 background-position: -246px 0;

}

.menu_navi li.c3 a:hover {

 background-position: -246px -65px;

}

.menu_navi li.c4 a {

 background-position: -369px 0;

}

.menu_navi li.c4 a:hover {

 background-position: -369px -65px;

} .menu_navi li.c5 a {

 background-position: -492px 0;

}

.menu_navi li.c5 a:hover {

 background-position: -492px -65px;

}

.menu_navi li.c6 a {

 background-position: -615px 0;

}

.menu_navi li.c6 a:hover {

 background-position: -615px -65px;

} .menu_navi li.c7 a {

 background-position: -738px 0;

}

.menu_navi li.c7 a:hover {

 background-position: -738px -65px;

}

.menu_navi li.c8 a {

 background-position: -861px 0;

}

.menu_navi li.c8 a:hover {

 background-position: -861px -65px;

}

.igemlogo { background: url(IGEM_basic_Logo_gray.png) no-repeat; text-decoration: none !important; background-size: contain;

 width: 60px;
 height: 60px;
 position: absolute;
 top: 102px;
 left:445px;
 z-index: 999999999;

} .igemlogo a{

 display: block; 

width: 100%; height: 100%;

 z-index: 999999999;

}

.hotspot1 {

 width: 40px;
 height: 40px;
 position: absolute;
 top: 188px;
 left:185px;
 z-index: 999;

} .hotspot2 {

 width: 320px;
 height: 300px;
 position: absolute;
 top: 20px;
 left:20px;
 z-index: 998;

}

.text1, .text2 { display: none; background: #333; padding:5px; position: absolute; white-space:nowrap; }

.text1 { top:-4px; left: 135px; } .text2 { top:164px; left: 300px; } .hotspot1:hover .text1{ display:block; } .hotspot2:hover .text2{ display:block; }

.backtotop a{ background: url(Backtotop.png) no-repeat; text-decoration: none !important;

 width: 145px;
 height: 130px;

position: fixed; bottom: -55px; right: -50px; z-index: 1000000; -moz-transform: translate(0,0);

    -webkit-transform: translate(0,0);
    -o-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);

-webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; } .backtotop a:hover{ -moz-transform: translate(-55px,-60px);

    -webkit-transform: translate(-55px,-60px);
    -o-transform: translate(-55px,-60px);
    -ms-transform: translate(-55px,-60px);
    transform: translate(-55px,-60px);

-webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; }

.board { top:10px; position:relative; display: inline; float:left;

 width: 500px;
 height:325px;
 margin-left:-8px;
 padding-right:4px;

padding-bottom:5px; }

.team #board1 { background:url(Board_team1.png) no-repeat; text-decoration: none !important; } .team #board2 { background:url(Board_team2.png) no-repeat; text-decoration: none !important; } .team #board3 { background:url(Board_team3.png) no-repeat; text-decoration: none !important; } .team #board4 { background:url(Board_team4.png) no-repeat; text-decoration: none !important; } .team #board5 { background:url(Board_team5.png) no-repeat; text-decoration: none !important; } .team #board6 { background:url(Board_team6.png) no-repeat; text-decoration: none !important; } .team #board7 { background:url(Board_team7.png) no-repeat; text-decoration: none !important; } .team #board8 { background:url(Board_team8.png) no-repeat; text-decoration: none !important; } .team #board9 { background:url(Board_team9.png) no-repeat; text-decoration: none !important; }

.stories #board1 { background:url(Board_stories1.png) no-repeat; text-decoration: none !important; } .stories #board2 { background:url(Board_stories2.png) no-repeat; text-decoration: none !important; } .stories #board3 { background:url(Board_stories3.png) no-repeat; text-decoration: none !important; } .stories #board4 { background:url(Board_stories4.png) no-repeat; text-decoration: none !important; } .stories #board5 { background:url(Board_stories5.png) no-repeat; text-decoration: none !important; } .stories #board6 { background:url(Board_stories6.png) no-repeat; text-decoration: none !important; } .stories #board7 { background:url(Board_stories7.png) no-repeat; text-decoration: none !important; } .stories #board8 { background:url(Board_stories8.png) no-repeat; text-decoration: none !important; } .stories #board9 { background:url(Board_stories9.png) no-repeat; text-decoration: none !important; }


.modeling #board1 { background:url(Board_modeling1.png) no-repeat; text-decoration: none !important; } .modeling #board2 { background:url(Board_modeling2.png) no-repeat; text-decoration: none !important; } .modeling #board3 { background:url(Board_modeling3.png) no-repeat; text-decoration: none !important; } .modeling #board4 { background:url(Board_modeling4.png) no-repeat; text-decoration: none !important; } .modeling #board5 { background:url(Board_modeling5.png) no-repeat; text-decoration: none !important; }

.results #board1 { background:url(Board_results1.png) no-repeat; text-decoration: none !important; } .results #board2 { background:url(Board_results2.png) no-repeat; text-decoration: none !important; } .results #board3 { background:url(Board_results3.png) no-repeat; text-decoration: none !important; } .results #board4 { background:url(Board_results4.png) no-repeat; text-decoration: none !important; } .results #board5 { background:url(Board_results5.png) no-repeat; text-decoration: none !important; } .results #board6 { background:url(Board_results6.png) no-repeat; text-decoration: none !important; }

.humanpractice #board1 { background:url(Board_humanpractice1.png) no-repeat; text-decoration: none !important; } .humanpractice #board2 { background:url(Board_humanpractice2.png) no-repeat; text-decoration: none !important; } .humanpractice #board3 { background:url(Board_humanpractice3.png) no-repeat; text-decoration: none !important; } .humanpractice #board4 { background:url(Board_humanpractice4.png) no-repeat; text-decoration: none !important; }

.parts #board1 { background:url(Board_parts1.png) no-repeat; text-decoration: none !important; } .parts #board2 { background:url(Board_parts2.png) no-repeat; text-decoration: none !important; } .parts #board3 { background:url(Board_parts3.png) no-repeat; text-decoration: none !important; } .parts #board4 { background:url(Board_parts4.png) no-repeat; text-decoration: none !important; }

.notes #board1 { background:url(Board_notes1.png) no-repeat; text-decoration: none !important; } .notes #board2 { background:url(Board_notes2.png) no-repeat; text-decoration: none !important; } .notes #board3 { background:url(Board_notes3.png) no-repeat; text-decoration: none !important; } .notes #board4 { background:url(Board_notes4.png) no-repeat; text-decoration: none !important; } .notes #board5 { background:url(Board_notes5.png) no-repeat; text-decoration: none !important; }

.safety #board1 { background:url(Board_safety1.png) no-repeat; text-decoration: none !important; }

.media { top:10px; display: inline;

 position: relative;

float:left;

 width: 490px;
 height:325px;

padding-bottom:5px; }

.iframes{ frameborder:0; scrolling:no; top:10px; display: inline;

 position: relative;

float:left;

 width: 490px;
 height:325px;

padding-bottom:5px; }

.navleft { width:100px; height:295px; position:fixed; left:75px; padding-top:80px; padding-right:10px; top:310px; z-index:1999; background:url(Subnavi.png) no-repeat; text-decoration: none !important; background-position :right; } .navleft li { display: block; float:right; text-align:right; cursor:pointer; padding-top:2px; } .navleft li a { height:26px; line-height:26px; white-space:nowrap;

text-align:center; 

background: #666; padding: 4px 6px 4px 6px; } .navleft li a:hover{ background:#333; } .navleft li a.cur { background:#ccc; color: #333 !important; border: 2px 4px 4px 2px; border-color: #333; height:24px; border-style:dotted; } .box { position:relative; float:left; width: 976px; min-height: 300px; border:5px solid #333; background: #aaa; top:10px; bottom:5px; margin-bottom:5px; } h3 { background:url(Box.png) no-repeat; text-decoration: none !important; background-position: -1px 0; height: 25px; color: #ccc !important; height:25px; line-height:25px !important; padding-left: 35px !important; border-bottom:5px solid #333; } .eye-left { position: absolute; width:20px; height:20px; top: 157px; left: 200px; }

.eye-right {

position: absolute; 

width:18px; height:18px; top: 190px; left: 147px; }