Team:WITS-CSIR SA/style.css

From 2011.igem.org

(Difference between revisions)
Line 164: Line 164:
/* BEGIN: Menu */
/* BEGIN: Menu */
-
#nav {
+
ul.topnav {
-
margin: 0;
+
list-style: none;
-
padding: 7px 6px 0;
+
padding: 0 20px;
-
/*background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px;*/
+
margin: 0;
-
        background: #2191C0; /* for non-css3 browsers */
+
float: left;
-
line-height: 100%;
+
width: 920px;
-
 
+
background: #222;
-
        z-index: 100;
+
font-size: 1.2em;
-
 
+
background: url(topnav_bg.gif) repeat-x;
-
border-radius: 2em;
+
-
-webkit-border-radius: 2em;
+
-
-moz-border-radius: 2em;
+
-
 
+
-
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
+
-
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
+
}
}
-
#nav li {
+
ul.topnav li {
-
margin: 0 5px;
+
-
padding: 0 0 8px;
+
float: left;
float: left;
-
position: relative;
 
-
list-style: none;
 
-
        z-index: 100;
 
-
}
 
-
 
-
 
-
/* main level link */
 
-
#nav a {
 
-
font-weight: bold;
 
-
color: #ffffff;
 
-
text-decoration: none;
 
-
display: block;
 
-
padding:  8px 20px;
 
margin: 0;
margin: 0;
-
 
+
padding: 0 15px 0 0;
-
-webkit-border-radius: 1.6em;
+
position: relative; /*--Declare X and Y axis base--*/
-
-moz-border-radius: 1.6em;
+
-
+
-
text-shadow: 0 1px 1px rgba(0,0,0, .3);
+
}
}
-
#nav a:hover {
+
ul.topnav li a{
-
background: #000;
+
padding: 10px 5px;
color: #fff;
color: #fff;
 +
display: block;
 +
text-decoration: none;
 +
float: left;
}
}
-
 
+
ul.topnav li a:hover{
-
/* main level link hover */
+
background: url(topnav_hover.gif) no-repeat center top;
-
#nav .current a, #nav li:hover > a {
+
-
background: #ccc url(img/gradient.png) repeat-x 0 -40px;
+
-
color: #444;
+
-
border-top: solid 1px #f8f8f8;
+
-
 
+
-
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
+
-
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
+
-
box-shadow: 0 1px 1px rgba(0,0,0, .2);
+
-
 
+
-
text-shadow: 0 1px 0 rgba(255,255,255, 1);
+
}
}
-
 
+
ul.topnav li span { /*--Drop down trigger styles--*/
-
/* sub levels link hover */
+
width: 17px;
-
#nav ul li:hover a, #nav li:hover li a {
+
height: 35px;
-
background: none;
+
float: left;
-
border: none;
+
background: url(subnav_btn.gif) no-repeat center top;
-
color: #666;
+
-
 
+
-
-webkit-box-shadow: none;
+
-
-moz-box-shadow: none;
+
}
}
-
#nav ul a:hover {
+
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
-
background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important;
+
ul.topnav li ul.subnav {
-
color: #fff !important;
+
list-style: none;
-
 
+
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
-
-webkit-border-radius: 0;
+
left: 0; top: 35px;
-
-moz-border-radius: 0;
+
background: #333;
-
 
+
margin: 0; padding: 0;
-
text-shadow: 0 1px 1px rgba(0,0,0, .1);
+
-
}
+
-
 
+
-
/* dropdown */
+
-
#nav li:hover > ul {
+
-
display: block;
+
-
}
+
-
 
+
-
/* level 2 list */
+
-
#nav ul {
+
display: none;
display: none;
-
 
+
float: left;
-
margin: 0;
+
width: 170px;
-
padding: 0;
+
-moz-border-radius-bottomleft: 5px;
-
width: 185px;
+
-moz-border-radius-bottomright: 5px;
-
position: absolute;
+
-webkit-border-bottom-left-radius: 5px;
-
top: 35px;
+
-webkit-border-bottom-right-radius: 5px;
-
left: 0;
+
border: 1px solid #111;
-
background: #ddd url(img/gradient.png) repeat-x 0 0;
+
-
border: solid 1px #b4b4b4;
+
-
 
+
-
-webkit-border-radius: 10px;
+
-
-moz-border-radius: 10px;
+
-
border-radius: 10px;
+
-
 
+
-
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
+
-
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
+
-
box-shadow: 0 1px 3px rgba(0,0,0, .3);
+
}
}
-
#nav ul li {
+
ul.topnav li ul.subnav li{
-
float: none;
+
margin: 0; padding: 0;
-
margin: 0;
+
border-top: 1px solid #252525; /*--Create bevel effect--*/
-
padding: 0;
+
border-bottom: 1px solid #444; /*--Create bevel effect--*/
 +
clear: both;
 +
width: 170px;
}
}
-
 
+
html ul.topnav li ul.subnav li a {
-
#nav ul a {
+
float: left;
-
font-weight: normal;
+
width: 145px;
-
text-shadow: 0 1px 0 #fff;
+
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
 +
padding-left: 20px;
}
}
-
 
+
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
-
/* level 3+ list */
+
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
-
#nav ul ul {
+
-
left: 181px;
+
-
top: -3px;
+
-
}
+
-
 
+
-
/* rounded corners of first and last link */
+
-
#nav ul li:first-child > a {
+
-
-webkit-border-top-left-radius: 9px;
+
-
-moz-border-radius-topleft: 9px;
+
-
 
+
-
-webkit-border-top-right-radius: 9px;
+
-
-moz-border-radius-topright: 9px;
+
-
}
+
-
#nav ul li:last-child > a {
+
-
-webkit-border-bottom-left-radius: 9px;
+
-
-moz-border-radius-bottomleft: 9px;
+
-
 
+
-
-webkit-border-bottom-right-radius: 9px;
+
-
-moz-border-radius-bottomright: 9px;
+
-
}
+
-
 
+
-
/* clearfix */
+
-
#nav:after {
+
-
content: ".";
+
-
display: block;
+
-
clear: both;
+
-
visibility: hidden;
+
-
line-height: 0;
+
-
height: 0;
+
-
}
+
-
#nav {
+
-
display: inline-block;
+
}  
}  
-
html[xmlns] #nav {
 
-
display: block;
 
-
}
 
-
 
-
* html #nav {
 
-
height: 1%;
 
-
}
 
/* END:  Menu */
/* END:  Menu */

Revision as of 11:00, 8 May 2011

/* 

* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* March 2010
*/

/* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { 

   display:none;

} /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }

/*============================*/ /*=== Custom Slider Styles ===*/ /*============================*/

  1. slider-wrapper { 
   background:url(images/slider.png) no-repeat;
   width:998px;
   height:392px;
   margin:0 auto;
   padding-top:74px;
   margin-top:50px;

}

  1. slider {

position:relative; 

   width:618px;
   height:246px;

/* margin-left:190px;*/ background:url('https://static.igem.org/mediawiki/2011/4/42/Loading.gif') no-repeat 50% 50%; }

  1. slider img {

position:absolute; top:0px; left:0px; display:none; }

  1. slider a {

border:0; display:block; }

.nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url('https://static.igem.org/mediawiki/2011/c/c3/Bullets.png') no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; }

.nivo-directionNav a { display:block; width:30px; height:30px; background:url('https://static.igem.org/mediawiki/2011/f/f0/Arrows.png') no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; }

.nivo-caption { 

   text-shadow:none;
   font-family: Helvetica, Arial, sans-serif;

} .nivo-caption a { 

   color:#efe9d1;
   text-decoration:underline;

}

/* BEGIN: Menu */ ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 920px; background: #222; font-size: 1.2em; background: url(topnav_bg.gif) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(topnav_hover.gif) no-repeat center top; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(subnav_btn.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; } /* END: Menu */

/* BEGIN: Site */

html, body { height:100%; overflow: auto; }

body { 

 font-family: Tahoma, Verdana, Sans-Serif, Arial, Helvetica;
 /* font-size: 0.75em; */

}

.gradient { 

 background: #A6C9E2; /* for non-css3 browsers */

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A6C9E2', endColorstr='#245FB3'); /* for IE */
 background: -webkit-gradient(linear, left top, left bottom, from(#A6C9E2), to(#245FB3)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #A6C9E2,  #245FB3); /* for firefox 3.6+ */ 
 background-attachment:fixed;

}

.padding { 

 padding: 1em;

}

p { 

 margin: 0.5em;

}

div.contentBox { 

 padding:0.5em;
 margin: 0.5em;
 width: 30%;
 float: left;
 border: 1px solid #c00;
 border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;

}

/* END: Site */

Retrieved from "http://2011.igem.org/Team:WITS-CSIR_SA/style.css"