Team:Exeter/Template/Stylesheet

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
/*! Flatly bootstrap v2.3.2 style overrides for Exeter iGEM 2013 wiki */
/*! Flatly bootstrap v2.3.2 style overrides for Exeter iGEM 2013 wiki */
 +
 +
 +
.ddsmoothmenu{
 +
}
 +
 +
.ddsmoothmenu ul{
 +
z-index: 100;
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
}
 +
 +
/*Top level list items*/
 +
.ddsmoothmenu ul li{
 +
position: relative;
 +
display: inline;
 +
float: left;
 +
}
 +
 +
/*Top level menu link items style*/
 +
.ddsmoothmenu ul li a {
 +
display: block;
 +
height: 30px;
 +
width: 80px;
 +
margin-left: 5px;
 +
line-height: 30px;
 +
font-size: 13px;
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
color: #333;
 +
text-align: center;
 +
text-decoration: none;
 +
font-weight: 400;
 +
outline: none;
 +
}
 +
 +
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
 +
display: inline-block;
 +
}
 +
 +
.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
 +
color: #fff;
 +
background: url(../images/templatemo_menu_hover.png)
 +
}
 +
 +
/*1st sub level menu*/
 +
.ddsmoothmenu ul li ul {
 +
position: absolute;
 +
width: 178px;
 +
padding: 0 2px;
 +
margin: 10px 0 0 5px;
 +
display: none; /*collapse all sub menus to begin with*/
 +
visibility: hidden;
 +
background: url(../images/templatemo_smm.png) repeat-y;
 +
}
 +
.ddsmoothmenu ul li ul span {
 +
position: absolute;
 +
width: 182px;
 +
height: 5px;
 +
}
 +
.ddsmoothmenu ul li ul span.top {
 +
top: -5px;
 +
left: 0;
 +
background: url(../images/templatemo_smt.png)
 +
}
 +
.ddsmoothmenu ul li ul span.bottom {
 +
bottom: -5px;
 +
left: 0;
 +
background: url(../images/templatemo_smb.png)
 +
}
 +
 +
/*Sub level menu list items (undo style from Top level List Items)*/
 +
.ddsmoothmenu ul li ul li{
 +
display: list-item;
 +
float: none;
 +
}
 +
 +
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
 +
.ddsmoothmenu ul li ul li ul{
 +
top: 0;
 +
}
 +
 +
/* Sub level menu links style */
 +
.ddsmoothmenu ul li ul li a{
 +
font-weight: 500;
 +
width: 138px; /*width of sub menus*/
 +
height: 35px;
 +
padding: 0 20px;
 +
margin: 0;
 +
line-height: 35px;
 +
font-size: 12px;
 +
text-align: left;
 +
background: none;
 +
color: #666;
 +
}
 +
 +
.ddsmoothmenu ul li ul li .last {
 +
border-bottom: none;
 +
}
 +
 +
.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a:hover {
 +
color: #333;
 +
background: url(../images/templatemo_smhover.png) no-repeat
 +
}
 +
 +
/* Holly Hack for IE \*/
 +
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
 +
 +
 +
/* ######### CSS classes applied to down and right arrow images  ######### */
 +
 +
.downarrowclass{
 +
position: absolute;
 +
top: 12px;
 +
right: 7px;
 +
}
 +
 +
.rightarrowclass{
 +
position: absolute;
 +
top: 6px;
 +
right: 5px;
 +
}
 +
 +
/* ######### CSS for shadow added to sub menus  ######### */
 +
 +
.ddshadow{
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
width: 0;
 +
height: 0;
 +
}
 +
 +
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
 +
opacity: 0.5;
 +
}
 +
 +
/* menu */
 +
 +
/*
 +
* jQuery Nivo Slider v2.4
 +
* 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:60;
 +
display:none;
 +
}
 +
/* The slices in the Slider */
 +
.nivo-slice {
 +
display:block;
 +
position:absolute;
 +
z-index:50;
 +
height:100%;
 +
}
 +
/* 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:89;
 +
}
 +
.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:99;
 +
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:99;
 +
cursor:pointer;
 +
}
 +
.nivo-controlNav a.active {
 +
font-weight:bold;
 +
}
 +
 +
 +
 +
/* SLIMBOX */
 +
 +
#lbOverlay {
 +
position: fixed;
 +
z-index: 9999;
 +
left: 0;
 +
top: 0;
 +
width: 100%;
 +
height: 100%;
 +
background-color: #000;
 +
cursor: pointer;
 +
}
 +
 +
#lbCenter, #lbBottomContainer {
 +
position: absolute;
 +
z-index: 9999;
 +
overflow: hidden;
 +
background-color: #fff;
 +
}
 +
 +
.lbLoading {
 +
background: #fff url(../images/loading.gif) no-repeat center;
 +
}
 +
 +
#lbImage {
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
border: 10px solid #fff;
 +
background-repeat: no-repeat;
 +
}
 +
 +
#lbPrevLink, #lbNextLink {
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
width: 50%;
 +
outline: none;
 +
}
 +
 +
#lbPrevLink {
 +
left: 0;
 +
}
 +
 +
#lbPrevLink:hover {
 +
background: transparent url(../images/prevlabel.gif) no-repeat 0 15%;
 +
}
 +
 +
#lbNextLink {
 +
right: 0;
 +
}
 +
 +
#lbNextLink:hover {
 +
background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;
 +
}
 +
 +
#lbBottom {
 +
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
 +
font-size: 10px;
 +
color: #666;
 +
line-height: 1.4em;
 +
text-align: left;
 +
border: 10px solid #fff;
 +
border-top-style: none;
 +
}
 +
 +
#lbCloseLink {
 +
display: block;
 +
float: right;
 +
width: 66px;
 +
height: 22px;
 +
background: transparent url(../images/closelabel.gif) no-repeat center;
 +
margin: 5px 0;
 +
outline: none;
 +
}
 +
 +
#lbCaption, #lbNumber {
 +
margin-right: 71px;
 +
}
 +
 +
#lbCaption {
 +
font-weight: bold;
 +
}
 +
 +
/*
 +
Credit: http://www.templatemo.com
 +
*/
 +
 +
body {
 +
margin: 0;
 +
padding: 0;
 +
color: #444444;
 +
font-family: Verdana, Arial, Helvetica, sans-serif;
 +
font-size: 11px;
 +
line-height: 20px;
 +
background-color: #fff;
 +
background-image: url(../images/templatemo_main_bgr.jpg);
 +
background-repeat: repeat-y;
 +
background-position: center;
 +
}
 +
 +
h1, h2, h3, h4, h5, h6 {
 +
color:#000;
 +
letter-spacing:-1px;
 +
font-weight:400;
 +
padding: 0;
 +
margin: 0;
 +
}
 +
 +
em { color: #ff0d40 }
 +
 +
h1 { font-size:32px; margin-bottom: 20px; }
 +
h2 { font-size:28px; margin-bottom: 20px; }
 +
h3 { font-size:20px; margin-bottom: 20px; }
 +
h4 { font-size:16px; margin-bottom: 10px; font-weight:100 }
 +
h5 { font-size:14px }
 +
h6 { font-size:12px }
 +
.header { display: block }
 +
 +
.left { float:left }
 +
.right { float:right }
 +
 +
.float_l { float: left }
 +
.float_r { float:right; margin-right:48px;}
 +
 +
.img_fl { float: left; margin: 3px 15px 5px 0 }
 +
.img_fr { float: left; margin: 3px 0 5px 15px }
 +
.img_border { background: #fff; padding: 4px; border: 1px solid #eee }
 +
 +
a:link, a:visited { color:#ff0d40}
 +
a:visited { text-decoration:none }
 +
a:hover { text-decoration:none }
 +
a:hover,a:active { outline:none }
 +
 +
a.more {
 +
clear: both;
 +
display: block;
 +
width: 58px;
 +
height: 25px;
 +
line-height: 25px;
 +
text-align: center;
 +
text-decoration: none;
 +
background: url(../images/templatemo_button01.png) no-repeat;
 +
}
 +
 +
.tmo_ul_list {
 +
margin: 10px 0 10px 15px;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 +
.tmo_ul_list li {
 +
color:#666;
 +
margin: 0 0 7px 0;
 +
padding: 2px 0 2px 30px;
 +
background: url(../images/templatemo_list.png) no-repeat scroll 0 3px; 
 +
}
 +
 +
.tmo_ul_list li a {
 +
color: #666;
 +
font-weight: normal;
 +
text-decoration: none;
 +
}
 +
 +
.tmo_ul_list li a:hover {
 +
color: #666;
 +
}
 +
 +
.no_bullet {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 +
.no_bullet li {
 +
margin: 0 0 20px 0;
 +
padding: 0;
 +
}
 +
 +
#templatemo_body_wrapper {
 +
padding: 50px 0 0;
 +
background:url(../images/templatemo_main_bg.jpg) center top no-repeat
 +
}
 +
#templatemo_wrapper {
 +
position: relative;
 +
margin: 0 auto;
 +
width: 960px;
 +
padding: 10px 12px;
 +
background:url(../images/templatemo_wrapper_m.png) repeat-y center
 +
}
 +
 +
#templatemo_wrapper_top {
 +
position: absolute;
 +
top: -5px;
 +
left: 0;
 +
width: 984px;
 +
height: 5px;
 +
background: url(../images/templatemo_wrapper_t.png)
 +
}
 +
 +
#templatemo_header {
 +
width: 940px;
 +
height: 51px;
 +
padding: 25px 10px;
 +
margin-bottom: 10px;
 +
background: url(../images/templatemo_header_bg.jpg);
 +
position:relative;
 +
}
 +
.templatemo_header_img {
 +
position:absolute;
 +
right:-6px;
 +
top:-11px;
 +
display:block;
 +
width:30px;
 +
height:30px;
 +
background: url(../images/templatemo_header_nav_bg.png);
 +
text-indent:-999999px;
 +
cursor:default;
 +
}
 +
#templatemo_slider {
 +
}
 +
 +
#templatemo_main {
 +
padding: 30px 10px 0
 +
}
 +
 +
#templatemo_bottom {
 +
width: 940px;
 +
padding: 40px 22px 30px;
 +
margin: 0 auto;
 +
background: url(../images/templatemo_wrapper_b.png) top center no-repeat
 +
}
 +
 +
#templatemo_footer_wrapper {
 +
clear: both;
 +
background: #eaeaea;
 +
border-top: 5px solid #fff;
 +
padding: 20px 0;
 +
width: 100%;
 +
}
 +
 +
#templatemo_footer {
 +
width: 940px;
 +
padding: 0  22px;
 +
margin: 0 auto;
 +
}
 +
 +
#site_title {
 +
float: left;
 +
}
 +
 +
#site_title a {
 +
display: block;
 +
font-size: 12px;
 +
font-family: Georgia, "Times New Roman", Times, serif;
 +
width: 350px;
 +
height: 54px;
 +
color: #acacac;
 +
text-indent: -10000px;
 +
background: url(../images/templatemo_logo.png) no-repeat center left;
 +
}
 +
 +
#templatemo_menu {
 +
float: right;
 +
margin-top: 15px;
 +
}
 +
 +
#newsletter {
 +
padding: 10px;
 +
background: #fbe9ef;
 +
}
 +
 +
#newsletter h4 {
 +
margin-bottom: 5px;
 +
}
 +
 +
#newsletter p {
 +
font-size: 11px;
 +
margin: 0;
 +
margin-bottom: 5px;
 +
}
 +
 +
#newsletter form {
 +
margin: 0;
 +
padding: 0;
 +
border: 4px solid #fefbfc;
 +
}
 +
 +
#newsletter .txt_field {
 +
float: left;
 +
display: block;
 +
height: 18px;
 +
line-height: 18px;
 +
width: 160px;
 +
color: #333;
 +
font-size: 12px;
 +
padding: 5px;
 +
font-variant: normal;
 +
border: none;
 +
background: #eed2db;
 +
}
 +
 +
#newsletter .subscribe_btn {
 +
float: right;
 +
display: block;
 +
color: #fff;
 +
height: 28px;
 +
width: 80px;
 +
font-size: 11px;
 +
font-weight: 700;
 +
line-height: 26px;
 +
cursor: pointer;
 +
border: none;
 +
background: #ec858f;
 +
}
 +
 +
.post {
 +
margin-bottom: 40px;
 +
padding-bottom: 40px;
 +
border-bottom: 1px solid #eee
 +
}
 +
 +
.post h2 {
 +
margin-bottom: 40px;
 +
}
 +
 +
.post_left {
 +
float: left;
 +
width: 140px;
 +
text-align: right
 +
}
 +
.post_right {
 +
float: right;
 +
width: 450px;
 +
}
 +
 +
.post img {
 +
background: #fff;
 +
border: 1px solid #eee;
 +
padding: 4px;
 +
}
 +
 +
.post .post_meta {
 +
margin-bottom: 5px;
 +
}
 +
 +
.post .post_meuta span {
 +
display: block;
 +
}
 +
 +
.comment_list {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 +
.comment_list .comment_box {
 +
padding: 20px;
 +
border-bottom: 1px solid #ddd;
 +
}
 +
 +
.comment_list li {
 +
margin-bottom: 20px;
 +
}
 +
 +
.comment_list li ul {
 +
list-style: none;
 +
background: none;
 +
}
 +
 +
.comment_list li ul li { }
 +
 +
.comment_list li ul li .comment_box {
 +
background: #f6f3f3;
 +
}
 +
 +
.comment_content {
 +
float: right;
 +
width: 490px;
 +
}
 +
 +
.comment_list li ul li.depth_2 .comment_content  {
 +
width: 450px;
 +
}
 +
 +
.comment_list li ul li.depth_3 .comment_box {
 +
background: #fff;
 +
}
 +
 +
.comment_list li ul li.depth_3 .comment_content  {
 +
width: 410px;
 +
}
 +
 +
#comment_form { margin-top: 40px }
 +
 +
#comment_form textarea {
 +
color: #666;
 +
background:#fff none repeat fixed 0 0;
 +
border: 1px solid #ccc;
 +
height:150px;
 +
padding: 5px;
 +
width: 360px;
 +
font-family: Tahoma, Geneva, sans-serif;
 +
font-size: 12px;
 +
margin-top: 5px;
 +
}
 +
 +
#comment_form .form_row {
 +
width: 100%;
 +
margin-bottom: 15px;
 +
}
 +
 +
#comment_form form input {
 +
color: #666;
 +
padding: 5px;
 +
width: 230px;
 +
background:#fff none repeat fixed 0 0;
 +
border: 1px solid #ccc;
 +
font-family: Tahoma, Geneva, sans-serif;
 +
font-size: 12px;
 +
margin-top: 5px;
 +
}
 +
 +
#comment_form .submit_btn {
 +
display: block;
 +
width: 70px;
 +
height: 30px;
 +
line-height: 30px;
 +
padding: 0 8px;
 +
text-align: center;
 +
text-decoration: none;
 +
font-weight: bold; 
 +
background-color: #000;
 +
border: 1px solid #2f2f2f;
 +
color: #fff;
 +
font-size:11px;
 +
}
 +
 +
#gallery {
 +
margin: 0; padding: 0; list-style: none;
 +
}
 +
 +
#gallery li {
 +
display: block;
 +
float: left;
 +
width: 450px;
 +
margin-right: 40px;
 +
margin-bottom: 40px;
 +
padding-bottom: 40px;
 +
border-bottom: 1px solid #eee;
 +
}
 +
 +
#gallery li img {
 +
margin-bottom: 20px;
 +
border: 1px solid #eee;
 +
background: #fff;
 +
padding: 9px;
 +
}
 +
 +
#gallery .no_margin_right {
 +
margin-right: 0;
 +
}
 +
 +
#contact_form {
 +
padding: 0;
 +
margin: 0;
 +
}
 +
 +
#contact_form form {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 +
#contact_form form p {
 +
float: left;
 +
margin-right: 14px;
 +
}
 +
 +
#contact_form form .input_field {
 +
width: 164px;
 +
padding: 5px;
 +
color: #222; 
 +
background: #eed2db;
 +
border: 4px solid #fff;
 +
font-family: Tahoma, Geneva, sans-serif;
 +
font-size: 12px;
 +
margin-top: 5px;
 +
}
 +
 +
#contact_form form label {
 +
display: block;
 +
margin-right: 12px;
 +
font-size: 11px;
 +
}
 +
 +
#contact_form form textarea {
 +
width: 554px;
 +
height: 200px;
 +
padding: 5px;
 +
color: #222;
 +
background: #eed2db;
 +
border: 4px solid #fff;
 +
font-family: Tahoma, Geneva, sans-serif;
 +
font-size: 12px;
 +
margin-top: 5px;
 +
}
 +
 +
#contact_form form .submit_btn {
 +
padding: 5px 14px;
 +
background: #e5499c;
 +
border: 4px solid #ffffff;
 +
color: #fff;
 +
}
 +
 +
.footer_gallery {
 +
margin: 0;
 +
padding:0;
 +
list-style: none;
 +
}
 +
 +
.footer_gallery li {
 +
margin: 0;
 +
padding: 0;
 +
display: block;
 +
float: left;
 +
}
 +
 +
.col {
 +
float: left;
 +
margin: 0 30px 30px 0;
 +
}
 +
 +
.half { width: 455px }
 +
#sidebar, .col13 { width: 280px }
 +
#content, .col23 { width: 620px }
 +
.padding_right { padding-right: 20px }
 +
.col14 { width: 205px }
 +
.no_margin_right { margin-right: 0 }
 +
.last_box { margin-bottom: 0; background: none }
 +
 +
.pagging {
 +
margin: 0 0 20px;
 +
padding: 0;
 +
}
 +
 +
.pagging ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 +
.pagging ul li {
 +
margin: 0;
 +
padding: 0;
 +
display: inline;
 +
}
 +
 +
.pagging ul li a {
 +
float: left;
 +
display: block;
 +
color: #333;
 +
text-decoration: none;
 +
margin-right: 5px;
 +
padding: 5px 10px;
 +
background: #fff;
 +
border: 1px solid #eee;
 +
}
 +
 +
.pagging ul li a:hover {
 +
background: #f3b2bd;
 +
border: 1px solid #eee;
 +
color: #fff; 
 +
}
 +
 +
.cleaner {
 +
clear: both;
 +
display: block;
 +
}
 +
 +
.h20 { height: 20px }
 +
.h40 { height: 40px }
 +
 +
/*============================*/
 +
/*=== Custom Slider Styles ===*/
 +
/*============================*/
 +
#slider {
 +
position:relative;
 +
    width: 960px;
 +
    height: 340px;
 +
background:url(../images/loading.gif) no-repeat 50% 50%;
 +
}
 +
 +
#slider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
display:none;
 +
}
 +
 +
#slider a {
 +
border:0;
 +
display:block;
 +
}
 +
 +
.nivo-controlNav {
 +
position:absolute;
 +
right: -17px;
 +
bottom: 10px;
 +
width: 98px;
 +
height: 17px;
 +
padding: 9px 20px;
 +
z-index: 1000;
 +
background: url(../images/templatemo_slider_nbg.png)
 +
}
 +
 +
.nivo-controlNav a {
 +
display:block;
 +
width:10px;
 +
height:10px;
 +
background: url(../images/bullets.png) no-repeat;
 +
text-indent:-9999px;
 +
border:0;
 +
margin-right: 8px;
 +
float:left;
 +
}
 +
 +
.nivo-controlNav a.active {
 +
background-position:0 -10px;
 +
}
 +
 +
.nivo-directionNav a {
 +
display:block;
 +
width:30px;
 +
height:30px;
 +
background:url(../images/arrows.png) no-repeat;
 +
text-indent:-9999px;
 +
border:0;
 +
}
 +
 +
.col .about_more {
 +
color:#444444;
 +
text-decoration:none;
 +
cursor:default;
 +
}
 +
 +
a.nivo-nextNav {
 +
background-position:-30px 0;
 +
right:15px;
 +
}
 +
 +
a.nivo-prevNav {
 +
left:15px;
 +
}
 +
 +
.nivo-caption {
 +
    text-shadow:none;
 +
padding: 15px 0;
 +
    font-family: Helvetica, Arial, sans-serif;
 +
}
 +
.nivo-caption a {
 +
    color:#efe9d1;
 +
    text-decoration:underline;
 +
}
 +
 +
 +
 +

Revision as of 11:25, 30 September 2013

/*! Flatly bootstrap v2.3.2 style overrides for Exeter iGEM 2013 wiki */


.ddsmoothmenu{ }

.ddsmoothmenu ul{ z-index: 100; margin: 0; padding: 0; list-style-type: none; }

/*Top level list items*/ .ddsmoothmenu ul li{ position: relative; display: inline; float: left; }

/*Top level menu link items style*/ .ddsmoothmenu ul li a { display: block; height: 30px; width: 80px; margin-left: 5px; line-height: 30px; font-size: 13px; font-family: Georgia, "Times New Roman", Times, serif; color: #333; text-align: center; text-decoration: none; font-weight: 400; outline: none; }

  • html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/

display: inline-block; }

.ddsmoothmenu ul li a.selected, .ddsmoothmenu ul li a:hover { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ color: #fff; background: url(../images/templatemo_menu_hover.png) }

/*1st sub level menu*/ .ddsmoothmenu ul li ul { position: absolute; width: 178px; padding: 0 2px; margin: 10px 0 0 5px; display: none; /*collapse all sub menus to begin with*/ visibility: hidden; background: url(../images/templatemo_smm.png) repeat-y; } .ddsmoothmenu ul li ul span { position: absolute; width: 182px; height: 5px; } .ddsmoothmenu ul li ul span.top { top: -5px; left: 0; background: url(../images/templatemo_smt.png) } .ddsmoothmenu ul li ul span.bottom { bottom: -5px; left: 0; background: url(../images/templatemo_smb.png) }

/*Sub level menu list items (undo style from Top level List Items)*/ .ddsmoothmenu ul li ul li{ display: list-item; float: none; }

/*All subsequent sub menu levels vertical offset after 1st level sub menu */ .ddsmoothmenu ul li ul li ul{ top: 0; }

/* Sub level menu links style */ .ddsmoothmenu ul li ul li a{ font-weight: 500; width: 138px; /*width of sub menus*/ height: 35px; padding: 0 20px; margin: 0; line-height: 35px; font-size: 12px; text-align: left; background: none; color: #666; }

.ddsmoothmenu ul li ul li .last { border-bottom: none; }

.ddsmoothmenu ul li ul li a.selected, .ddsmoothmenu ul li ul li a:hover { color: #333; background: url(../images/templatemo_smhover.png) no-repeat }

/* Holly Hack for IE \*/

  • html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{ position: absolute; top: 12px; right: 7px; }

.rightarrowclass{ position: absolute; top: 6px; right: 5px; }

/* ######### CSS for shadow added to sub menus ######### */

.ddshadow{ position: absolute; left: 0; top: 0; width: 0; height: 0; }

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/ opacity: 0.5; }

/* menu */

/* 

* jQuery Nivo Slider v2.4
* 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:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* 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:89; } .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:99; 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:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }


/* SLIMBOX */

  1. lbOverlay {

position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; cursor: pointer; }

  1. lbCenter, #lbBottomContainer {

position: absolute; z-index: 9999; overflow: hidden; background-color: #fff; }

.lbLoading { background: #fff url(../images/loading.gif) no-repeat center; }

  1. lbImage {

position: absolute; left: 0; top: 0; border: 10px solid #fff; background-repeat: no-repeat; }

  1. lbPrevLink, #lbNextLink {

display: block; position: absolute; top: 0; width: 50%; outline: none; }

  1. lbPrevLink {

left: 0; }

  1. lbPrevLink:hover {

background: transparent url(../images/prevlabel.gif) no-repeat 0 15%; }

  1. lbNextLink {

right: 0; }

  1. lbNextLink:hover {

background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%; }

  1. lbBottom {

font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 10px; color: #666; line-height: 1.4em; text-align: left; border: 10px solid #fff; border-top-style: none; }

  1. lbCloseLink {

display: block; float: right; width: 66px; height: 22px; background: transparent url(../images/closelabel.gif) no-repeat center; margin: 5px 0; outline: none; }

  1. lbCaption, #lbNumber {

margin-right: 71px; }

  1. lbCaption {

font-weight: bold; }

/* Credit: http://www.templatemo.com

  • /

body { margin: 0; padding: 0; color: #444444; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 20px; background-color: #fff; background-image: url(../images/templatemo_main_bgr.jpg); background-repeat: repeat-y; background-position: center; }

h1, h2, h3, h4, h5, h6 { color:#000; letter-spacing:-1px; font-weight:400; padding: 0; margin: 0; }

em { color: #ff0d40 }

h1 { font-size:32px; margin-bottom: 20px; } h2 { font-size:28px; margin-bottom: 20px; } h3 { font-size:20px; margin-bottom: 20px; } h4 { font-size:16px; margin-bottom: 10px; font-weight:100 } h5 { font-size:14px } h6 { font-size:12px } .header { display: block }

.left { float:left } .right { float:right }

.float_l { float: left } .float_r { float:right; margin-right:48px;}

.img_fl { float: left; margin: 3px 15px 5px 0 } .img_fr { float: left; margin: 3px 0 5px 15px } .img_border { background: #fff; padding: 4px; border: 1px solid #eee }

a:link, a:visited { color:#ff0d40} a:visited { text-decoration:none } a:hover { text-decoration:none } a:hover,a:active { outline:none }

a.more { clear: both; display: block; width: 58px; height: 25px; line-height: 25px; text-align: center; text-decoration: none; background: url(../images/templatemo_button01.png) no-repeat; }

.tmo_ul_list { margin: 10px 0 10px 15px; padding: 0; list-style: none; }

.tmo_ul_list li { color:#666; margin: 0 0 7px 0; padding: 2px 0 2px 30px; background: url(../images/templatemo_list.png) no-repeat scroll 0 3px; }

.tmo_ul_list li a { color: #666; font-weight: normal; text-decoration: none; }

.tmo_ul_list li a:hover { color: #666; }

.no_bullet { margin: 0; padding: 0; list-style: none; }

.no_bullet li { margin: 0 0 20px 0; padding: 0; }

  1. templatemo_body_wrapper {

padding: 50px 0 0; background:url(../images/templatemo_main_bg.jpg) center top no-repeat }

  1. templatemo_wrapper {

position: relative; margin: 0 auto; width: 960px; padding: 10px 12px; background:url(../images/templatemo_wrapper_m.png) repeat-y center }

  1. templatemo_wrapper_top {

position: absolute; top: -5px; left: 0; width: 984px; height: 5px; background: url(../images/templatemo_wrapper_t.png) }

  1. templatemo_header {

width: 940px; height: 51px; padding: 25px 10px; margin-bottom: 10px; background: url(../images/templatemo_header_bg.jpg); position:relative; } .templatemo_header_img { position:absolute; right:-6px; top:-11px; display:block; width:30px; height:30px; background: url(../images/templatemo_header_nav_bg.png); text-indent:-999999px; cursor:default; }

  1. templatemo_slider {

}

  1. templatemo_main {

padding: 30px 10px 0 }

  1. templatemo_bottom {

width: 940px; padding: 40px 22px 30px; margin: 0 auto; background: url(../images/templatemo_wrapper_b.png) top center no-repeat }

  1. templatemo_footer_wrapper {

clear: both; background: #eaeaea; border-top: 5px solid #fff; padding: 20px 0; width: 100%; }

  1. templatemo_footer {

width: 940px; padding: 0 22px; margin: 0 auto; }

  1. site_title {

float: left; }

  1. site_title a {

display: block; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; width: 350px; height: 54px; color: #acacac; text-indent: -10000px; background: url(../images/templatemo_logo.png) no-repeat center left; }

  1. templatemo_menu {

float: right; margin-top: 15px; }

  1. newsletter {

padding: 10px; background: #fbe9ef; }

  1. newsletter h4 {

margin-bottom: 5px; }

  1. newsletter p {

font-size: 11px; margin: 0; margin-bottom: 5px; }

  1. newsletter form {

margin: 0; padding: 0; border: 4px solid #fefbfc; }

  1. newsletter .txt_field {

float: left; display: block; height: 18px; line-height: 18px; width: 160px; color: #333; font-size: 12px; padding: 5px; font-variant: normal; border: none; background: #eed2db; }

  1. newsletter .subscribe_btn {

float: right; display: block; color: #fff; 

	height: 28px;

width: 80px; font-size: 11px; font-weight: 700; line-height: 26px; cursor: pointer; border: none; background: #ec858f; }

.post { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee }

.post h2 { margin-bottom: 40px; }

.post_left { float: left; width: 140px; text-align: right } .post_right { float: right; width: 450px; }

.post img { background: #fff; border: 1px solid #eee; padding: 4px; }

.post .post_meta { margin-bottom: 5px; }

.post .post_meuta span { display: block; }

.comment_list { margin: 0; padding: 0; list-style: none; }

.comment_list .comment_box { padding: 20px; border-bottom: 1px solid #ddd; }

.comment_list li { margin-bottom: 20px; }

.comment_list li ul { list-style: none; background: none; }

.comment_list li ul li { }

.comment_list li ul li .comment_box { background: #f6f3f3; }

.comment_content { float: right; width: 490px; }

.comment_list li ul li.depth_2 .comment_content { width: 450px; }

.comment_list li ul li.depth_3 .comment_box { background: #fff; }

.comment_list li ul li.depth_3 .comment_content { width: 410px; }

  1. comment_form { margin-top: 40px }
  1. comment_form textarea {

color: #666; background:#fff none repeat fixed 0 0; border: 1px solid #ccc; height:150px; padding: 5px; width: 360px; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; margin-top: 5px; }

  1. comment_form .form_row {

width: 100%; margin-bottom: 15px; }

  1. comment_form form input {

color: #666; padding: 5px; width: 230px; background:#fff none repeat fixed 0 0; border: 1px solid #ccc; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; margin-top: 5px; }

  1. comment_form .submit_btn {

display: block; width: 70px; height: 30px; line-height: 30px; padding: 0 8px; text-align: center; text-decoration: none; font-weight: bold; background-color: #000; border: 1px solid #2f2f2f; color: #fff; font-size:11px; }

  1. gallery {

margin: 0; padding: 0; list-style: none; }

  1. gallery li {

display: block; float: left; width: 450px; margin-right: 40px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee; }

  1. gallery li img {

margin-bottom: 20px; border: 1px solid #eee; background: #fff; padding: 9px; }

  1. gallery .no_margin_right {

margin-right: 0; }

  1. contact_form {

padding: 0; margin: 0; }

  1. contact_form form {

margin: 0; padding: 0; }

  1. contact_form form p {

float: left; margin-right: 14px; }

  1. contact_form form .input_field {

width: 164px; padding: 5px; color: #222; background: #eed2db; border: 4px solid #fff; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; margin-top: 5px; }

  1. contact_form form label {

display: block; margin-right: 12px; font-size: 11px; }

  1. contact_form form textarea {

width: 554px; height: 200px; padding: 5px; color: #222; background: #eed2db; border: 4px solid #fff; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; margin-top: 5px; }

  1. contact_form form .submit_btn {

padding: 5px 14px; background: #e5499c; border: 4px solid #ffffff; color: #fff; }

.footer_gallery { margin: 0; padding:0; list-style: none; }

.footer_gallery li { margin: 0; padding: 0; display: block; float: left; }

.col { float: left; margin: 0 30px 30px 0; }

.half { width: 455px }

  1. sidebar, .col13 { width: 280px }
  2. content, .col23 { width: 620px }

.padding_right { padding-right: 20px } .col14 { width: 205px } .no_margin_right { margin-right: 0 } .last_box { margin-bottom: 0; background: none }

.pagging { margin: 0 0 20px; padding: 0; }

.pagging ul { margin: 0; padding: 0; list-style: none; }

.pagging ul li { margin: 0; padding: 0; display: inline; }

.pagging ul li a { float: left; display: block; color: #333; text-decoration: none; margin-right: 5px; padding: 5px 10px; background: #fff; border: 1px solid #eee; }

.pagging ul li a:hover { background: #f3b2bd; border: 1px solid #eee; color: #fff; }

.cleaner { clear: both; display: block; }

.h20 { height: 20px } .h40 { height: 40px }

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

  1. slider {

position:relative; 

   width: 960px;
   height: 340px;

background:url(../images/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; right: -17px; bottom: 10px; width: 98px; height: 17px; padding: 9px 20px; z-index: 1000; background: url(../images/templatemo_slider_nbg.png) }

.nivo-controlNav a { display:block; width:10px; height:10px; background: url(../images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right: 8px; float:left; }

.nivo-controlNav a.active { background-position:0 -10px; }

.nivo-directionNav a { display:block; width:30px; height:30px; background:url(../images/arrows.png) no-repeat; text-indent:-9999px; border:0; }

.col .about_more { color:#444444; text-decoration:none; cursor:default; }

a.nivo-nextNav { background-position:-30px 0; right:15px; }

a.nivo-prevNav { left:15px; }

.nivo-caption { 

   text-shadow:none;

padding: 15px 0; 

   font-family: Helvetica, Arial, sans-serif;

} .nivo-caption a { 

   color:#efe9d1;
   text-decoration:underline;

}




a:visited {color: #99CCFF;}

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus { 

 color: white;
 background-color: #6699cc;

}


/* ==Header styles== */

/* Header colour (blueprint theme, 0A4360 primary (dark blueprint), 0c5172 secondary (brighter blueprint), 0e638b tertiary (brightest blueprint)) 

  Use rgb.to for colour picking */

.navbar-inverse .navbar-inner { 

 background-color: #0A4360;
 background-image: -moz-linear-gradient(top, #0A4360, #0c5172);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0A4360), to(#0c5172));
 background-image: -webkit-linear-gradient(top, #0A4360, #0c5172);
 background-image: -o-linear-gradient(top, #0A4360, #0c5172);
 background-image: linear-gradient(to bottom, #0A4360, #0c5172);
 border-color: #0e638b;

}

/* Hover as tertiary colour */ .navbar-inverse .nav > li > a:hover { 

 color: #0e638b;
 background-color: transparent;

}

/* Wiki edit menu colours, slightly lighter than secondary colour */ .navbar .navbar-inner { border-bottom: 17px solid; border-color: #0d5375; } /*


/* OVER RIDE IGEM CSS */ 

     #globalWrapper{
       font-size:14px;
     }

     #content{
       width:auto;
     }

     #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
         display:none;}
     #top-section {
         border: none;
         height: 0px;}
     #content {
         border: none;}

     /* MediaWiki Top Menu 

     #menubar {
         font-size: 65%;
         top: -14px;
         display:none;
     }
     .left-menu:hover {
         background-color: transparent;}
     #menubar li a {
         background-color: transparent;}
     #menubar:hover {
         color: white;}
     #menubar li a {
         color: transparent;}
     #menubar:hover li a {
         color: white;}
     #previewnote {
       display:none;
     }
  • /


  1. menubar { 
   position: fixed;
   white-space: nowrap;
   width: 400px;
   z-index: 5;
   font-family: sans-serif;
   font-size: 95%;
   line-height: 1em;
   margin-top:58px;
   //padding-left: 9%;

}

.left-menu, .left-menu a { 

   left: 0px;
   text-align: left;
   color:transparent;
   text-transform: lowercase;

}

.left-menu:hover { 

   color: white;
   background-color: transparent;

} .right-menu, .right-menu a { 

   right: 0px;
   text-align: right;
   color: white;

}

  1. menubar li { 
   display: inline;
   position: relative;
   cursor: pointer;
   padding-left: 0px;
   padding-right: 0px;

} .left-menu li a { 

   padding: 0px 10px 0px 0px;
   color:white;

} .left-menu .selected {

  1. color: white;

}

  1. .left-menu .selected:hover {
  2. color: #5555FF;
  3. }

.left-menu:hover a { 

   color: white;

} .right-menu li {

  1. background-color: transparent;

} .right-menu li a { 

       background-color: transparent;

} .right-menu li a:hover { 

   color: #aaaaff;
   text-decoration: underline;

} 


     #bodyContent{
     	background: none;
     }
  1. bodyContent a[href^="https://"], .link-https { 
   background: none;
   padding-right: none;

} 


     /* Sticky footer styles
     -------------------------------------------------- */

     /* Wrapper for page content to push down footer */
     #wrap {
       min-height: 100%;
       height: auto !important;
       height: 100%;
       /* Negative indent footer by it's height */
       margin: 0 auto -60px;
     }

     /* Set the fixed height of the footer here */
     #push,
     #footer {
       height: 60px;
     }
     #footer {
       /*background-color: #f5f5f5;*/
      text-align:center;
     }

     /* Lastly, apply responsive CSS fixes as necessary */
     @media (max-width: 767px) {
       #footer {
         margin-left: -20px;
         margin-right: -20px;
         padding-left: 20px;
         padding-right: 20px;
       }
     }

     /* Custom page CSS
     -------------------------------------------------- */
     /* Not required for template or sticky footer method. */

     #wrap > .container {
       padding-top: 60px;
     }
     .container .credit {
       margin: 20px 0;
     }

     code {
       font-size: 80%;
     }



     /* end Over ride */


  1. mainwrapper {

margin: 80px auto 0 auto; text-align: center; }

/* Image Box Style */

  1. mainwrapper .box {

cursor: pointer; height: 255px; float: left; margin: 5px; position: relative; overflow: hidden; width: 220px; top: -85px; }

  1. mainwrapper .box img {

position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }

/* Caption Common Style */

  1. mainwrapper .box .caption {

background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; left: 0; }


/** Caption 1: Simple **/

  1. mainwrapper .box .simple-caption {

height: 30px; width: 200px; display: block; bottom: -30px; line-height: 25pt; text-align: center; }

/** Caption 2: Full Width & Height **/

  1. mainwrapper .box .full-caption {

width: 220px; height: 255px; top: -200px; text-align: left; padding: 15px; }

/** Caption 3: Fade **/

  1. mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {

opacity: 0; width: 220px; height: 255px; text-align: left; padding: 15px; }

/** Caption 4: Slide **/

  1. mainwrapper .box .slide-caption {

width: 170px; height: 170px; text-align: left; padding: 15px; left: 200px; }

/** Caption 5: Rotate **/

  1. mainwrapper #box-5.box .rotate-caption {

width: 170px; height: 170px; text-align: left; padding: 15px; top: 200px; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }

  1. mainwrapper .box .rotate {

width: 200px; height: 400px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }

/** Caption 6: Scale **/

  1. mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {

position: relative; left: -200px; width: 190px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; font-size:14px; }

  1. mainwrapper .box .scale-caption h3 {

-webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms; }

  1. mainwrapper .box .scale-caption p {

-webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; }

/** Simple Caption :hover Behaviour **/

  1. mainwrapper .box:hover .simple-caption {

-moz-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); opacity: 1; transform: translateY(-100%);

}

/** Full Caption :hover Behaviour **/

  1. mainwrapper .box:hover .full-caption {

-moz-transform: translateY(100%); -o-transform: translateY(100%); -webkit-transform: translateY(100%); opacity: 1; transform: translateY(100%); }

/** Fade Caption :hover Behaviour **/

  1. mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {

opacity: 1; }

/** Slide Caption :hover Behaviour **/

  1. mainwrapper .box:hover .slide-caption {

background-color: rgba(0,0,0,1) !important; -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); opacity: 1; transform: translateX(-100%); }

  1. mainwrapper .box:hover img#image-4 {

-moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; }

/** Rotate Caption :hover Behaviour **/

  1. mainwrapper .box:hover .rotate {

background-color: rgba(0,0,0,1) !important; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }

/** Scale Caption :hover Behaviour **/

  1. mainwrapper .box:hover #image-6 {

-moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); }

  1. mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p {

-moz-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); }

Retrieved from "http://2013.igem.org/Team:Exeter/Template/Stylesheet"