Wiki/skins/common/index-top-nav-and-right-sidebar.css

From 2012.igem.org

/*EM 'reset baseline' style rules*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; text-align: left; vertical-align: baseline; background: transparent; }

/*tables still need 'cellspacing="0"' in the markup*/ table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; }

q:before, q:after, blockquote:before, blockquote:after { content: ""; } blockquote, q { quotes: "" ""; } img { border: none; }

a { color: #B70101; text-decoration: none; }

a:hover { text-decoration: underline; } q:before, q:after, blockquote:before, blockquote:after { content: ""; } blockquote, q { quotes: "" ""; } img { border: none; } acronym, abbr.initialism, dfn { cursor: help; } abbr { speak: spell-out; } acronym, abbr.truncation, dfn { speak: normal; } cite { font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } li > h3, li > p, li > a { font-size: 1em; } ol li {list-style: decimal;} ul li {list-style: disc;} .no_bullet {list-style: none;}

html { color: #000; background-color: #fff; background-image: url(../images/window-bg.jpg); background-repeat: repeat-x; }

body { margin: 40px auto 0; width: 960px; color: #333; background-color: transparent; font: normal 100%/1.5 "Lucida Grande", Verdana, sans-serif; }

  1. header {

position: relative; width: 100%; height: 90px; color: #fff; background-color: #B70101; }

  1. uwhome {

position: absolute; top: -26px; left: 75px; }

  1. crest {

width: 70px; height: 104px; position: absolute; top: -22px; left: 5px; z-index: 100; }


/* global nav menu*/

  1. globalnav {

position: absolute; top: -21px; right: 7px; font-size: 0.6875em; }

  1. globalnav li {

display: inline-block; padding: 0px 10px 0 10px; border-left: 1px solid #c9ab80; line-height: 1; }

  1. globalnav #uwsearch {

padding-left: 0; border-left: 0; }

  1. globalnav #last_tool { padding-right: 0; }
  1. globalnav a {

color: #efe8d8; line-height: 1; margin: 0; padding: 0 0 1px 0; display: block; }

  1. siteTitle {

position: absolute; top: 20px; /*CUSTOMIZATION: If not using a tagline; change top: to 26px; */ left: 80px; width: 600px; }

h1 span { position: absolute; top: 0; left: 0; z-index: 5000; width: 336px; /*CUSTOMIZIZATION: Set width of your site-title.png image*/ height: 36px; margin-top: 0px; text-indent: -999em; background-image: url(../images/site-title.png); /*NOTE: E-mail web@uc.wisc.edu to request the main site-title.png graphic for your department*/ background-repeat: no-repeat; }

h1 a { display: block; width: 100%; height: 100%; margin-top: 0px; text-indent: -999em; }

  1. tagline {

color:#F7F5E8; font-size:0.775em; font-weight:bold; padding-top: 30px; margin: 4px 0 0 2px;; }

  1. search {

position: absolute; top: 14px; right: 5px; font-size: 0.6875em; color: #eee7d6; }

  1. search > div {

display: inline;

}

  1. search > label {

margin-right: 3px; }

  1. search > input {

margin-right: 2px; }


/*** navigation menus ***/ .main-menu { width: 100%; background: transparent url(../images/nav_bg.jpg) repeat-x; color: #333; position: relative; z-index: 50000; box-shadow: 0 3px 4px rgba(60, 60, 60, 0.3); -moz-box-shadow: 0 3px 4px rgba(60, 60, 60, 0.3); -webkit-box-shadow: 0 3px 4px rgba(60, 60, 60, 0.3); }

.main-menu > li { display: inline-block; vertical-align: top; font-size: 0.8125em; line-height: 25px; background: transparent url(../images/nav_button_border.gif) no-repeat right; height: 25px; /*min-width: 120px;*/ position: relative; }

.main-menu > li a {padding-left: 0;}

.main-menu h2 { height: 100%;

 width: 100%;

}

.main-menu h2 > a { display: block; height: 100%; padding: 0 15px; text-align: center; color: #b70101; background-color: transparent; position: relative; line-height: 24px; text-transform: uppercase; } .main-menu .current h2 > a {color: #333;}

.main-menu h2 > a:hover { text-decoration: none; }

.main-menu > li:hover, .main-menu > a:focus, .main-menu > a:hover, .main-menu > a:active, .main-menu .current { background-color: #e7d9c1; text-decoration: none; }

.main-menu > #n_search:hover { background-color: transparent; }

.current a { color: #333; }


/*** submenus ***/

.main-menu > li:hover > ul, .main-menu > .sfHover > ul { position: absolute; left: -1px; top: 25px; /* match top ul list item height */ z-index: 99; }

.submenu { padding: 10px 0; background-color: #e7d9c1; opacity: .95; border-color: #AB907D; border-width: 1px; border-style: none none solid solid; box-shadow: 3px 3px 4px rgba(60, 60, 60, 0.4); -moz-box-shadow: 3px 3px 4px rgba(60, 60, 60, 0.4); -webkit-box-shadow: 3px 3px 4px rgba(60, 60, 60, 0.4); width: 200px; }

.submenu > li { margin-left: 7px; margin-right: 4px; margin-bottom: .75em; display: block; line-height: 1.2; background-color: transparent; }

.submenu > li > a:link { margin-left: 7px; margin-right: 4px; text-align: left; font-size: 1em; text-transform: none; }

.submenu > li > a:hover, .submenu > li > a:focus { color: #b70101; background-color: #d0bd9a; text-decoration: none; }

/*** additional superfish rules (adapted from superfish.css) ***/ .main-menu, .main-menu * { margin: 0; padding: 0; list-style: none; } .main-menu { line-height: 1.0; } .main-menu .submenu { position: absolute; top: -999em; width: 20em; /* left offset of submenus need to match (see below) */ } .main-menu .submenu li { max-width: 90%; } .main-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .main-menu li { position: relative; } .main-menu a { display: block; position: relative; } .main-menu li:hover .submenu, .main-menu li.sfHover .submenu { left: 0; top: 25px; /* match top ul list item height */ padding-top: 10px; z-index: 99; } ul.main-menu li:hover li .submenu, ul.main-menu li.sfHover li .submenu { top: -999em; } ul.main-menu li li:hover .submenu, ul.main-menu li li.sfHover .submenu { left: 20em; /* match ul width */ top: 0; } ul.main-menu li li:hover li .submenu, ul.main-menu li li.sfHover li .submenu { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; }


/*left sidebar menu*/

  1. secondary-nav {

width: 100%; margin: 40px 0 50px 0; font-size: 0.875em; }

  1. secondary-nav li {

margin-left: 0px; margin-right: 0px; list-style: none; margin-bottom: 15px; line-height: 1.2; text-transform: uppercase; }

  1. sidebar h2 {

margin: 1em 0 .5em 0px; text-transform: uppercase; font-size: 0.8125em; color: #666; }

  1. quicklinks li {

margin-left: 0px; margin-right: 0px; list-style: none; margin-bottom: 15px; line-height: 1.2; }

  1. quicklinks a {

font-size: 0.875em; }

  1. sidebar .highlight {margin: 50px 0;}
  1. sidebar .highlight img {

border:2px solid #FFFFFF; box-shadow:3px 3px 4px rgba(60, 60, 60, 0.4); -moz-box-shadow:3px 3px 4px rgba(60, 60, 60, 0.4); -webkit-box-shadow:3px 3px 4px rgba(60, 60, 60, 0.4); }


/*

layout
  • /
  1. shell {

position: relative; width: 958px; border-width: 1px 1px 2px; border-color: #c3bca1 #c3bca1 #b70101; border-style: none solid solid; padding-bottom: 30px; }

.col { display: inline-block; vertical-align: top; }

  1. sidebar {

width: 180px; background-color: #F7F5E8; padding: 0 15px 0 30px; }

  1. content {

width: 673px; padding: 20px 30px 0 30px;

 background-color: #fff;

}

  1. sidebar:after {

content: ; position: absolute; left: 733px; bottom: 0; height: 100%; width: 225px; background-color: #F7F5E8; z-index: -2; }

  1. content:after {

content: ; position: absolute; left: 0; bottom: 0; height: 100%; width: 673px; background-color: #fff; z-index: -2; }


/*Basic content styles*/

  1. content > h1, #content > h2, #content > h3, #content > h4 {

margin: 1em 0 .25em; font-weight: bold; }

  1. content > h1 {

font-size: 1em; }

  1. content > h2 {

font-size: 0.875em; }

  1. content > h3 {

font-size: 0.8125em; }

  1. content > p {

margin: 1em 0; }

  1. content > h1 + p, #content > h2 + p, #content > h3 + p, #content > .left + p, #content > .right + p {

margin-top: .25em; }

  1. content > p, #content ul > li, #content ol > li {

font-size: 0.85em; }

  1. content > ul {

margin: 1em 0 1em 1em; }

  1. content > ol {

margin: 1em 0 1em 1.5em; }

  1. content li { margin-bottom: 1em; }


.right { float: right; margin: .5em 0 1.5em 2.5em; }

.left { float: left; margin: .5em 1.5em 2.5em 0; }

.photo { width: 204px; } .photo > img { border: 2px solid #DDDAC7; }

.photo > p { font-size: 0.7125em; color: #7f7c5e; line-height: 1.3; }

.credit { display: block; margin-top: 0.75em; font-size: .9em; text-transform: normal; }


/* footer */

  1. footer {

padding-bottom: 40px; width: 100%; padding-top: 10px; background-color: transparent; font-size: 0.6875em; line-height: 1; color: #666; border-top: 10px #666152 solid; }

  1. footer p {

text-align: center; margin-bottom: .5em; }

/*

skip navigation, etc.

  • /

/*Skip links*/ .skip a, .skip a:hover, .skip a:visited { position: absolute; left: 0px; top: -1000px; width: 1px; height: 1px; overflow: hidden; color: #fff; font-size: .725em; padding: 0 5px; }

.skip a:active, .skip a:focus { position: absolute; top: -35px; left: 5px; width: auto; height: auto; color: #fff; /*border: 2px solid #000;*/ }

.hide { position: absolute; top: -100em; left: -5000em; height: 0; }

.hide a, .hide a:hover, .hide a:visited { position: absolute; top: 0; left: -5000em; }

.hide a:focus { position: static; width: auto; height: auto; }

a:hover, a:active { outline: none; }