Team:DTU-Denmark/Mark/css
From 2014.igem.org
/* Removing wiki-like stuff */ /****************************/
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
/* Redesigning the topmenu -> removes the empty space above our header picture */ /***************************/ body {
margin: 10px 0 0 0; padding: 0;}
- top-section {
width: 965px; height: 0; margin: 0 auto; padding: 0; border: none;}
- menubar {
font-size: 65%; top: -14px;}
.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;}
- menubar > ul > li:last-child {
display:none;}
/* Redesigning Table Of Content -> for the javascript section*/
/*************************************************************/
table.toc, #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
text-align: left;}
- toctitle {
margin: 5px 0;}
.toc, #toc {
background-color: #F6F6F6 /* #FCEAEA; #F6F6F6;*/ /*color: #397F39;*/ border: 1px solid #CCCCCC; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); /* for the Safari browser*/ float: left; /* position: absolute; static - petaei left*/ width: 228px; display: block; overflow: hidden; padding: 0;}
- toc ul, .toc ul {
margin: 0 5px 5px 5px;}
.toc ul li {
padding-left: 12px; text-indent: -12px; /*width: 200px;*/}
.toc ul li ul li {
padding-left: 30px; text-indent: -24px; /*width: 170px;*/}
- toc ul ul, .toc ul ul {
margin: 0;}
.toc {
margin-left: -250px; margin-top: 20px;}
.stickBelowNavigation {
position: fixed; top: 35px; left: 50%; margin-left: -462px;}
.tochidden {
position: static; margin-left: -250px;}
/* Font style and general */ /**************************/
- content {
font-family: 'Lucida Sans Unicode',sans-serif; font-size: 14px; color: #444444; text-align:justify; }
p {
margin: 0;}
- innercontent p {
margin: 0.6em 0;}
h1 {
border: none; color: #383838; text-shadow: 0 1px rgba(255, 255, 255, 0.5); font-size: 32px; margin: 5px 0 0 0; font-weight: bold; text-align: left;}
h2 {
/*background: url("") repeat-x scroll 0 100% transparent;*/ border: none; padding: 20px 0 5px; font-family: Arial; font-size: 24px; font-weight: bold; color: #593672; /* header 2 color */ clear: right; margin-bottom: 0;}
h3 {
border: none; padding: 20px 0 5px; color: #000000; font-size: 20px; font-family: Arial;}
h4{
border: none; color: #000000; font-size: 20px; font-family: Arial;}
h5 {
border: none; font-size: 18px; font-family: Arial; color: #444444; /* background-color: #b0b2b1; */}
h6 {
border: none; font-size: 16px; font-family: Arial; color: #444444; /* background-color: #81F7BE; */ }
- bodyContent h1, #bodyContent h2 {
margin-bottom: 0;}
h3 {
font-size: 20px; padding: 15px 0 5px 0;}
h4 {
font-weight: bold;}
ul {
list-style-position: inside; margin: 0;}
a, a:visited, a:active {
color: #3366CC;}
pre {
overflow: auto; font-size: 12px;}
div.tright, div.floatright {
border: none; margin: 10px 0 10px 20px;}
div.tleft, div.floatleft {
border: none; margin: 10px 20px 10px 0;}
div.tnone {
border: none;}
iframe {
margin: 1px;}
hr {
height: 0; border-top: 1px solid #AAA; border-bottom: 1px solid #FFF;}
.clear {
clear: both; height: 0; padding: 0; margin: 0; border: none; visibility: hidden;}
.superscript {
font-size: 80%; position: relative; top: -5px;}
.subscript {
font-size: 80%; position: relative; top: 5px;}
.farve0 {
background-color: #999999;}
.farve1 {
background-color: #FFCC00;}
.farve2 {
background-color: #FF9900;}
.farve3 {
background-color: #FF6600;}
.farve4 {
background-color: #FF0000;}
.farve5 {
background-color: #990000;}
.farve6 {
background-color: #FF0099;}
.farve7 {
background-color: #CC3399;}
.farve8 {
background-color: #990066;}
.farve9 {
background-color: #660066;}
.farve10 {
background-color: #990099;}
.farve11 {
background-color: #3366CC;}
.farve12 {
background-color: #33CCFF;}
.farve13 {
background-color: #99CC33;}
.farve14 {
background-color: #66CC00;}
.coloredBg {
font-size: 12px; font-weight: normal; color: #FFFFFF; padding: 5px;}
/*Calendar*/ /**********/ table.calendar { margin: 0; padding: 10px; } table.calendar td { margin: 0; padding: 2px; vertical-align: top; } table.month .heading td { padding:2px; background-color:#E6BDC3; color:#7F4D8F; text-align:center; font-size:120%; font-weight:bold; } table.month .dow td { color:#7F4D8F; text-align:center; font-size:110%; } table.month td.today { background-color:#FCDEE8; } table.month td {
border: none; margin: 0; padding: 1pt 1.5pt; font-weight: bold; font-size: 8pt; text-align: right; background-color: #FFE9F0; }
- bodyContent table.month a { background:none; padding:0 }
.day-active { color:#0000cc } .day-empty { color:#7CC0C0 } /*81CBCB*/
/* Layout */
/**********/
body, #heading, #innercontent {
background: #EE0000;} /*side background colour */
- content, #globalWrapper {
border: none; width: 100%; margin: 0; padding: 0;}
.centering {
margin: 0 auto; width: 965px;}
.centering2 {
margin: 0 auto; width: 944px;
}
- header {
background: url("") no-repeat center #ffffff; /* headerpicture and colour beyond edges */
<a style="display: scroll; position: fixed; top: 25px; left: 0px; width: 20px; height: 20px;" href="#"></a>
/*![]()
![]()
*/ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* for the Safari browser */ height: 240px; width: 100%; border-top: 1px solid #593672; /* red: 990000, blue: 098C9F */ border-bottom: 1px solid #593672;} /* red: 990000, blue: 098C9F */
/*#header .centering {
background: url("") no-repeat top left transparent; height: 100px;}*/
- heading {
height: 50px; border-top: 1px solid #ffffff;}
- innercontent {
padding: 1px;}
.whitebox {
background: url("") repeat-x #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */ border: 1px solid #FFFFFF; /*text-align: justify;*/ margin: 0px 0;}
.article {
padding: 0 20px 10px 270px; width: 673px;}
.whitebox a {
font-weight: bold;}
- toc a {
font-weight: normal;}
/* For overview pages */ /**********************/ .overviewPage {
margin-left: -250px;}
.overviewBox {
width: 900px; /*450px;*/ }
.left {
float: left;}
.right {
float: right;}
/* Footer */ /**********/
- footer-panel {
background: #FFFFFF; /* #871717 #333333*/ border-top: 30px solid #593672; /*#990000 ->red, 098C9F->blue, older: #871717 1px solid #D9D9D9; */ color: #000000; width: 100%; }
- bodyContent {
background: #FFFFFF; /* #871717 */ color: #000000;
}
- footer-panel h4 {
color: #999999; font-weight: bold;}
- footer-panel p {
color: #000000; /*#CCCCCC*/
} div.footerBox3 {
border-right: 1px solid; float: left; margin: 10px 20px 10px 0; padding: 0 20px 0 0; width: 648px; min-height: 270px;}
div.footerBox2 {
border-right: 1px solid; float: left; margin: 10px 20px 10px 0; padding: 0 20px 0 0; width: 234px; min-height: 270px;}
div.footerBox2:last-child {
border: none; margin: 10px 0; padding: 0;}
div.footerBox1 {
border-right: 1px solid; float: left; margin: 10px 20px 10px 0; padding: 0 20px 0 0; width: 608px; min-height: 270px;}
div.footerBox {
border-right: 1px solid; float: left; margin: 10px 20px 10px 0; padding: 0 20px 0 0; width: 882px; /* 274px; */ min-height: 270px;}
div.footerBox:last-child {
border: none; margin: 10px 0; padding: 0;}
img.sponsorImage{
float: center; /* left */ width: 220px; /*180 - 84*/ padding: 0; margin: 0; border: 0px solid #444444;}
img.sponsorImage1{
float: left; width: 190px; /*84*/ height: 85px; padding: 0; margin: 0; border: 0px solid #444444;}
img.hasPicOnRight {
padding-right: 40px; /*10*/ /*border-right-width: 1px;*/}
img.hasPicOnLeft {
padding-left: 40px; /*10*/
} img.hasPicOnTop {
margin-top: 30px;
}
/* Redisigning [edit] button */
/*****************************/
span.editsection {color: #CCCCCC;}
/*span.editsection, a:link, a:visited, a:active {color: #CCCCCC;}*/
/* Sexy Drop Down Menu (thanks to sohtanaka.com) */
/*********************************************/
li.navitem1 > a, li.navitem1 > span {
border-bottom: 1px solid;}
li.navitem2 > a, li.navitem2 > span {
border-bottom: 1px solid;}
li.navitem3 > a, li.navitem3 > span {
border-bottom: 1px solid;}
li.navitem4 > a, li.navitem4 > span {
border-bottom: 1px solid;}
li.navitem5 > a, li.navitem5 > span {
border-bottom: 1px solid;}
li.navitem6 > a, li.navitem6 > span {
border-bottom: 1px solid;}
li.navitem7 > a, li.navitem7 > span {
border-bottom: 1px solid;}
li.navitem8 > a, li.navitem8 > span {
border-bottom: 1px solid;}
li.navitem9 > a, li.navitem9 > span {
border-bottom: 1px solid;}
.page-Team_DTU-Denmark li.home a,
.page-Team_DTU-Denmark_Team li.team a,
.page-Team_DTU-Denmark_Project li.project a, .page-Team_DTU-Denmark_Bioinformatics li.project a, .page-Team_DTU-Denmark_Timeline li.project a, .page-Team_DTU-Denmark_Experiments li.project a,
.page-Team_DTU-Denmark_Parts li.parts a,
.page-Team_DTU-Denmark_Modeling li.modeling a, .page-Team_DTU-Denmark_Protocols li.modeling a, .page-Team_DTU-Denmark_Technical_stuff_math li.modeling a, .page-Team_DTU-Denmark_Matlab li.modeling a,
.page-Team_DTU-Denmark_Notebook li.notebook a, .page-Team_DTU-Denmark_Methods li.notebook a,
.page-Team_DTU-Denmark_Safety li.safety a, .page-Team_DTU-Denmark_General li.safety a, .page-Team_DTU-Denmark_Answers li.safety a, .page-Team_DTU-Denmark_Risk_Assessment li.safety a,
.page-Team_DTU-Denmark_Human_Practices li.humanpractices a, .page-Team_DTU-Denmark_Overview li.humanpractices a, .page-Team_DTU-Denmark_High_School_Outreach li.humanpractices a, .page-Team_DTU-Denmark_University_Outreach li.humanpractices a, .page-Team_DTU-Denmark_Public_Outreach li.humanpractices a,
.page-Team_DTU-Denmark_Attributions li.sponsors a,
ul.topnav > li > a:hover {
padding-bottom: 1px; border-bottom-width: 5px;}
- navigation,.navigation {
height: 35px; width:100%; text-align:left;}
.navigation {
/* background: url("") repeat-x scroll 0 -1px #990000;*/ /* Image that gives the color to navigation bar */ /* background: url("
") repeat-x scroll 0 -1px #990000;*/ /* background: url("
") repeat-x scroll 0 -1px #098C9F; */ background: url("
") repeat-x scroll 0 -1px #990000; z-index: 1; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */ position: relative; width:100%; border-bottom: 1px solid #593672;} The previous red color was: 990000 & 593672 for blue was 098C9F */
.stickToTop {
position: fixed; top:0; width:100%;}
ul.topnav {
list-style: none; padding: 0; margin: 0; float: left; width: 100%; font-size: 15px;
} ul.topnav li {
float: left; margin: 0; padding: 0; position: relative; /*--Declare X and Y axis base for sub navigation--*/
} ul.topnav li a {
padding: 6px 20px 5px 20px; color: #fff; display: block; text-decoration: none; float: left;
} ul.topnav > li > a {
height: 23px; overflow: hidden;}
/* ul.topnav li:first-child a{
padding-left: 0;
} */ ul.topnav li span { /*--Drop down trigger styles--*/
/*width: 17px; height: 34px; float: left; background: url() no-repeat center top;*/ color: #ffffff /*CCCCCC Colour of menu arrows*/;
} ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav {
z-index: 1; //Stay on top of slider list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #593672; /* 990000 ->red, blue->098C9F, older:#333; Color of drop-down menu */ margin: 0; padding: 0; display: none; float: left; border: 1px solid #111; border-radius: 0 0 5px 5px;
} ul.topnav li ul.subnav li {
margin: 0; padding: 0; /*border-top: 1px solid #000000; #252525; --Create bevel effect--*/ border-bottom: 1px solid #000000; /*Color of border in drop-down menu (navigbar)#444;--Create bevel effect--*/ clear: both; list-style: none outside none;
} ul.topnav li ul.subnav, ul.topnav li ul.subnav li {
width: 160px;
} ul.topnav li ul.subnav li:last-child{
border-radius: 0 0 5px 5px;
} html ul.topnav li ul.subnav li a {
float: left; padding-left: 10px; padding-right: 10px; width: 140px;
} html ul.topnav li ul.subnav li a:last-child{
border-radius: 0 0 5px 5px;
} html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222;
/*url() no-repeat 10px center;*/
}
/* Slider (thanks to flowplayer.org) */ /*************************************/ .scrollable { /* required settinsg */ position: relative; overflow :hidden;
margin-top: 0px; /* 14px; */ width: 600px; /* 963px;*/ height: 400px; /*400px; */ border: 1px solid #FFFFFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */ background: #FFFFFF;}
.scrollable .items { /* this cannot be too large */ width: 50000px; position: absolute;} .items div { float: left; width: 963px; height: 370px;} .prev {
background: url() no-repeat; height: 74px; width: 74px; /* position: absolute; left: -518px; ceil(963/2) + 74/2 = 482 + 37 = 519 top: 310px; */ margin-left: 50%; cursor: pointer;}
.next {
background: url() no-repeat; height: 74px; width: 74px; margin-right: 50%; /* position: absolute; : -519px; floor(963/2) + 74/2 = 481 + 37 = 518 top: 310px; */ cursor: pointer;}
.disabled {
visibility: hidden;}
/* position and dimensions of the navigator */ .navi {
/*left: -56px; margin-left: 50%; position: absolute; top: 690px; */ width: 112px;}
.navi a {
width: 8px;
height: 8px;
float: left;
margin: 3px;
background: url() 0 0 no-repeat;
display: block;
font-size: 1px;}
.navi a:hover {
background-position: 0 -8px;}
.navi a.active {
background-position: 0 -16px;}
.navi2 {
left: -56px; margin-left: 50%; position: absolute; top: 700px; width: 112px;}
.navi2 a {
width: 8px;
height: 8px;
float: left;
margin: 3px;
background: url() 0 0 no-repeat;
display: block;
font-size: 1px;}
.navi2 a:hover {
background-position: 0 -8px;}
.navi2 a.active {
background-position: 0 -16px;}
FBox {
border="0"; width: 270px; padding: 0 20px 10px; float: left; margin-right: 15px;}