Team:METU Turkey Software/css

From 2010.igem.org

Revision as of 21:23, 24 October 2010 by Fsyauqy (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

body { height: 100%; width: 100%; margin: 0 auto; padding: 0; overflow: hidden; font: trebuchet, verdana, arial, times new roman; }

  1. wrapper {

width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #ccc; overflow: hidden; margin: 0 auto; } div#header { position: fixed; top: 0; left: 5%; right: 5%; width: 995px; height: 50px; background-color: #000; } }

  • html body {

overflow: hidden; }

  1. mask {

width: 900%; height: 100%; background-color: #eee; } .item { width: 12%; height: 100%; float: left; background-color: #ddd; background-image: url('images/bg.jpg'); } .content { width: 900px; height: 500px;; top: 50px; margin: 0 auto; background: url('images/content2.png') no-repeat; position: relative; font-size: .8em; } .content .text { width: 800px; margin: 0 auto; padding-top: 50px; text-align: justify; } .homepage { width: 900px; height: 500px; top: 50px; margin: 0 auto; background: url('images/home.png') no-repeat; position: relative; } .selected { color: red; font-weight: 300; } .clear { clear: both; }

  1. slider {

min-height: 300px; width: 404px; border: 4px solid #b4c8c4; background: #000; background: url(images/loading.gif) no-repeat 50% 50%; margin: 0 auto; }

  1. slider img {

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

  1. slider a {

border: 0; display: block; } .nivoSlider { position: relative; } .nivoSlider img { position: absolute; top: 0px; left: 0px; } .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; } .nivo-slice { display: block; position: absolute; z-index: 50; height: 100%; } .nivo-caption { position: absolute; left: 0px; bottom: 0px; background: #000; color: #fff; width: 880px; z-index: 89; } .nivo-caption p { padding: 5px; margin: 0; } .nivo-directionNav a { position: absolute; top: 45%; z-index: 99; cursor: pointer; } .nivo-prevNav { left: 0px; } .nivo-nextNav { right: 0px; } .nivo-controlNav a { position: relative; z-index: 99; cursor: pointer; } .nivo-controlNav a.active { font-weight: bold; } /*-----------------------------------------*/ .nivo-controlNav { position: absolute; left: 47%; bottom: -30px; } .nivo-controlNav a { display: none; width: 10px; height: 10px; background: none; text-indent: -9999px; border: 0; margin-right: 3px; float: left; } .nivo-controlNav a.active { background-position: -10px 0; } .nivo-directionNav a { display: block; width: 32px; height: 34px; background: url(images/arrows.png) no-repeat; text-indent: -9999px; border: 0; } a.nivo-nextNav { background-position: -32px 0; right: 10px; } a.nivo-prevNav { left: 10px; } /*-----------------------------------------*/ .nivo-controlNav { position: absolute; left: 47%; bottom: -30px; } .nivo-controlNav a { display: none; width: 10px; height: 10px; background: none; text-indent: -9999px; border: 0; margin-right: 3px; float: left; } .nivo-controlNav a.active { background-position: -10px 0; } .nivo-directionNav a { display: block; } .mainmenu { width: 130px; position: fixed; height: auto; top: 50px; text-align: right; float: left; z-index: 100; } .mainmenu ul { padding-right: 5px; float: left; list-style: none; line-height: 1; color: #FFFF00; background: #fff; opacity: .7; } .mainmenu a, .mainmenu a:visited { display: block; width: 100px; font-style: normal; text-decoration: none; color: #000; margin-top: 5px; margin-bottom: 5px; } .mainmenu li li a { text-indent: 2px; } .mainmenu ul ul a { width: 140px; height: 100%; } .mainmenu ul a { width: 140px; } .mainmenu li { width: 140px; margin: 0; padding: 0; text-indent: -20px; } .mainmenu ul li { position: relative; width: 100%; } .mainmenu ul li a.selected { color: blue; } /* !!!!! */ .mainmenu li ul { position: absolute; padding: 0px 5px 0 5px; left: -999em; height: auto; width: 100px; background: #fff; font-weight: normal; text-align: left; } .mainmenu li li { width: 100%; } .mainmenu li a { width: 90px; } .mainmenu li li a { width: 100%; } .mainmenu li ul { margin: -55px 0 0 0px; } .ul_ch, .mainmenu li:hover ul ul, .mainmenu li li:hover ul ul, .mainmenu li li li:hover ul ul, .mainmenu li li li li:hover ul ul, .mainmenu li li li li li:hover ul ul { left: -999em; } .mainmenu li:hover ul, .mainmenu li li:hover ul, .mainmenu li li li:hover ul, .mainmenu li li li li:hover ul, .mainmenu li li li li li:hover ul { left: 100%; /* !!! */ } .mainmenu li:hover > ul.ul_ch { left: 100%; /* !!! */ } .mainmenu li:hover a, .mainmenu li:hover a:visited, .mainmenu li:hover a:hover, .mainmenu li a:hover { color: red; } .mainmenu li:hover li a, .mainmenu li li:hover li a, .mainmenu li li li:hover li a, .mainmenu li li li li:hover li a, .mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, .mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited { color: #000; } .mainmenu ul ul a:hover, .mainmenu li:hover li:hover a, .mainmenu li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited { color: red; } /*-------------------final----------------------------*/

  1. menu {

text-align: left; position:fixed; top:50px; height:auto; width:auto; z-index:999; height:500px; }

  1. menu ul li a.selected{

color:red; background:silver; } /*Toggle Area*/

  1. menu .toggle {

float: right; width: 9px; padding: 5px; cursor: pointer; border-top: 1px solid white; border-left: 1px solid #E0E0E0; color: #999; }

  1. menu ul.navmenu li:first-child .toggle {

border-width: 0 0 0 1px; } /*Menu Setup*/

  1. menu ul {

padding: 0; margin: 0; width: 150px; }

  1. menu ul ul {

border: 1px solid #CCC; overflow: hidden; }

  1. menu ul.navmenu li {

margin: 0; list-style: none; float: left; }

  1. menu ul.navmenu li li {

float: none; } /*Links*/

  1. menu ul.navmenu a, #menu ul.navmenu a:visited {

text-decoration: none; padding: 5px; display: block; color: #008FDD; }

  1. menu ul.navmenu ul.submenu a:hover {

background: #FFF4D2; color: #333; } /*Heading Outer div*/

  1. menu ul.navmenu .menutop {

border: 1px solid #CCC; border-width: 0 1px; overflow: hidden; width: 150px; background: #F9F9F9; } /*Header Links*/

  1. menu ul.navmenu .menutop a {

width: 120px; float: left; margin: 0 0 1px 0; border-top: 1px solid white; } /*Header Link Hover*/

  1. menu ul.navmenu .menutop a:hover {

color: #333; } /*Removes white border for the first header*/

  1. menu ul.navmenu li:first-child .menutop a {

border-width: 0px; } /*Single Menu Width Fix*/

  1. menu ul.navmenu .menusingle a {

width: 140px; } /*Border Radius and Special Border Width*/

  1. menu ul.navmenu li:first-child .menutop {

border-width: 1px 1px 0 1px; -moz-border-radius: 5px 5px 0 0; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; }

  1. menu ul.navmenu li:last-child .menutop {

border-width: 0px 1px 1px 1px; -moz-border-radius: 0 0 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }

  1. menu ul.navmenu li:last-child ul.submenu {

-moz-border-radius: 0 0 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; }

  1. menu ul.navmenu li:last-child .menutop-open {

-moz-border-radius: 0; -webkit-border-radius: 0px; border-width: 0 1px; }