Team:Newcastle/CSS/main design
From 2013.igem.org
Line 574: | Line 574: | ||
#pop_up_content{ | #pop_up_content{ | ||
- | + | height:100%; | |
width:96%; | width:96%; | ||
overflow-y:auto; | overflow-y:auto; |
Revision as of 18:40, 2 October 2013
/**
* * COLOURS * * RED: #E51837 * BLUE: #00467F * */
/**
* * Overwriting WIKI-standard style * */
/**
* * Custom stuff * */
body{
margin:0px 0px 8px; background:url("") fixed;
font-family:"Helvetica"; }
p{ text-indent:15px;
font-size:15px; padding:5px; text-align:left; margin:1px 5px 0px;
line-height:1.2em; }
a{
text-decoration:none; color:#00467F;
}
ul { margin:.3em 0 0 3em; }
- page_content {
width:729px;
}
a:visited{
color:#00467F;
}
h1, h2, h3, h4, h5{
color:black; background:none; font-weight:bold; margin:10px; padding:5px; border:0px; font-family:"Helvetica"; line-height:1.1em;
}
h1{
text-align:center; font-size:50px; color:black;
}
- bodyContent h1{
margin-bottom:5px; }
h2{
font-size:40px;
}
h3{
font-size:32px;
}
h1 .editsection, h2 .editsection, h3 .editsection, h4 .editsection{ display:none; }
h4{
font-size:20px;
}
hr{ width:50%; border-top: 2px solid #E51837; /*border-right: 5px solid white; border-left: 5px solid white; border-bottom:white;*/ margin:0px auto 10px; height:0px; }
hr.blue_bg{ border-right: 5px solid #00467F; border-left: 5px solid #00467F; border-bottom:#00467F; }
hr.blue{ width:50%; border-top: 3px solid #00467F; border-right: 4px solid #E51837; border-left: 4px solid #E51837; border-bottom:#E51837; }
ol ol{ list-style-type:lower-roman; }
div.syntaxhighlighter{ width:735px !important; }
code, .gutter{ font-size:15px; }
- top-section{
/*display:none;*/
}
h1.firstHeading{
display:none;
}
- title_bar{
width:940px; z-index:9999; margin-bottom:10px; }
- title_bar img{
max-width:940px; }
.menu{
clear:both; width:980px; position:relative; left:-10px; background-color:#00467F;
-webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1);
z-index:501;
}
.menu:before, .menu:after{
content:" "; border-top:10px solid #0563af; position:absolute; top:35px;
}
.menu:before{
border-left:10px solid transparent; left:0px;
}
.menu:after{
border-right:10px solid transparent; right:0px;
}
.top_menu {
list-style-type:none; display:inline-block; margin:0px 15px; padding:0px;
}
.top_menu li{
display:inline; margin:0px; float:left; position:relative;
}
.top_menu li a{
color:white; text-decoration:none; display:block; padding:5px 10px; margin:0px; font:20px bold Cambria,sans-serif; background-color:#00467F; height:25px;
}
.top_menu li a:hover{
background-color: #ffffff; color:#00467F;
}
.top_menu ul {
float:left; list-style-type:none; margin:-5px 5px 0px; padding:0px; position:absolute; display:none;
z-index:999; }
.top_menu ul li{
margin:0px; display:inline-block; float:left; clear:left; width:150px;
z-index:9999; }
.top_menu ul li a{
color:white; text-decoration:none; display:block; padding:5px 15px; margin:0px; font:12px bold Cambria,sans-serif; background-color: #00467F; height:auto;
}
.top_menu ul li a:hover{
background-color:#ffffff; color:#00467F;
}
.page_title h1{/*
margin:-20px; position:relative; top:-30px; text-align:center; font:40px "Finger paint","Lucida Sans Unicode", "Lucida Grande", sans-serif; color:black;*/
}
.col_1{
width:235px; display:inline; float:left;
}
/**
* * RSS Feed stuff * */
- rss_feed h4{
color:white; text-align:center;
}
- rss_feed_tooltip{
display:none;
}
- rss_feed,
- rss_feed_cover{
width:150px; height:100%; position:fixed; top:0px;
}
- rss_feed{
background-color: #E51837; box-shadow:0px 0px 20px 5px #D0D0D0; z-index:-2; cursor:pointer; color:white;
}
- rss_feed_cover{
background-color: white; z-index: -1;
}
- rss_feed #title{
position:absolute; height:100%; left:-63px; padding-top:330px;
}
- rss_feed #title h2{
transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); font-size:20px;
color:white;
padding:0px; margin:0px; position:relative; left:30px;
}
- rss_feed #rss_content{
padding:0px 5px 0px 30px;
}
/**
* * Social Media Display * */
- social_media{
vertical-align:left; margin:15px 10px -17px; }
- social_media .social_logo{
float:left;
}
- social_media img{
height:50px;
float:right; margin:2px;
}
- social_media .box{
text-align:center; float:left; width:305px;
margin:0px 1px; padding:3px;
vertical-align:middle; }
- social_media .box p,
- social_media .box a{
text-indent:0px; font-size:12px; color:white;
text-align:center;
/*display: none !important;*/
}
- social_media .fb{
background-color:#6E0610;
}
- social_media .twitter{
background-color:#6E0610; width:306px;
}
- social_media .youtube{
background-color:#6E0610;
}
/**
* * Image display * */
- image_display{
margin-top:-40px; }
- image_display h2,
- image_display h3,
- image_display h4{
/*color:white;*/ margin:10px 2px 0px; text-align:center; }
- image_display h3{
text-align:center; }
.image_box{ overflow:hidden; }
.image_box:hover{
cursor:pointer;
}
.display_image{
height:100%; width:100%; overflow:hidden;
}
.under_text{
padding:5px; display:none; color:black;
overflow:hidden;
text-align:center;
}
.under_text img{
max-width:400px;
}
.under_text img.small{
max-width:275px;
}
.under_text .spacer_l{ float:left; clear:left; }
.under_text .spacer_r{ float:right; clear:right; }
.slice img{ width:400px; }
.under_text h3{
margin:10px 2px 0px; padding:0px 5px;
}
.display_image h2{
font-weight:normal;
}
- image_display .cliches .cliche_1,
- image_display .cliches .cliche_2,
- image_display .cliches .cliche_3{
width:140px; height:140px; float:left; background-color:#DADBD5; margin:1px; padding:2px;
}
.cliches .under_text{
height:100%; width:100%; vertical-align:middle; text-align:center; padding:0px;
}
.cliches p{
text-indent:0px; padding:0px; margin:0px; height:100%; width:100%; text-align:center;
}
.cliches img{
width:140px;
}
.slice_text{ position:absolute; z-index:3; width:100%; }
.left{
float:left;
}
.proj_box{
width:249px; height:249px; float:left; margin:1px; cursor:pointer;
}
.title{
margin-top:10px; height:46px; padding:20px;
}
.title img{
width:462px;
}
.proj_box img{
width:249px;
}
.top_left{
background-color:#FDDC99;
}
.top_right{
background-color:#8EDADA;
}
.bottom_left{
background-color:#BFE2AC;
}
.bottom_right{
background-color:#FABA9E;
}
.project_description{
background-color:#b8dbef; width:436px; margin-left:1px;
}
/**
* * Pop up box style * */
- pop_up{
display:none; z-index:502; position:relative;
}
- pop_up_underlay{
height:100%; width:100%; background-color:black; position:fixed;
left:0px;
margin:0px;
top:0px;
opacity:0.8;
text-align:center; cursor:pointer;
}
- pop_up_display{
height:75%; width:85%; max-width:860px; background-color:white; border-top:10px solid #0563af; border-left:10px solid #0563af; border-right:10px solid #00467F; border-bottom:10px solid #00467F;
margin: 5% 35px 0px; position:fixed; padding:5px; top:0px;
}
- pop_up_content{
height:100%; width:96%; overflow-y:auto;
}
- pop_up_close{
position:relative; z-index:99; color:grey; font-family:Calibri; float:right; margin:-3px 5px 6px; cursor:pointer; font-size:25px;
}
/**
* * Preformatted Stuff * **/
.side_menu{
float:right; width:250px; font-family:Cambria; border-left:5px solid #E51837; margin-right:5px; margin-bottom:auto;
}
/**
* * Wiki Specific Stuff * (Overwriting the styles that already exist) * **/
- content{
position: relative; width: 960px; margin: 0px auto; padding: 5px 0px; background: white; color: black; border:none; line-height: 1.5em; background-color:white; box-shadow:0px 0px 20px 5px #D0D0D0; padding-bottom:10px;
}
/* #content will nest if multiple templates are used, bad practise but something you have to cope with,
the following overrides certain stylistic features so nested #content divs aren't obvious */
- content #content{
margin: 0px; padding: 0px; background: transparent; padding-bottom:0px; box-shadow:none;
}
- top-section {
position: relative; width: 960px; margin: 0 auto 0 auto; border:0px; height:0px;
}
- p-logo{
display:none;
}
- search-controls{
display:none;
}
- mw-content-text{
}
- toc,
.toc{
float:right; position:relative; width:200px; border:none; border-left:5px solid #E51837; margin:0px 0px 0px 10px; background-color:#00467F; padding:0px;
}
- toc tbody{
vertical-align:top;
}
- toc h2,
.toc h2{ display:block;
font:20px bold Cambria,sans-serif; color:white;
}
.toctoggle{
display:none;
}
- toc h2,
.toc ul{
list-style-type:none; padding-left:0px;
}
- tod ul li,
.tod ul li{
display:block; margin:0px;
}
- toc li a,
.toc li a{
padding:5px 5px; text-decoration:none; background-color:#00467F; display:block; color:white; font:15px bold "Quando","Georgia",serif; width:200px;
}
- toc li a:hover,
.toc li a:hover,
- toc li a.active,
.toc li a.active{
background-color:white; color:#00467F;
}
- toc ul li ul,
.toc ul li ul{
/*display:none;*/ margin:0px;
}
.tocnumber{ display:none; }
.toclevel-3, .toclevel-4{
display:none;
}
h2 .editsection{
font:17px "Quando","Georgia",serif;
}
h3 .editsection{
font:14px "Quando","Georgia",serif;
}
h4 .editsection{
font:12px "Quando","Georgia",serif;
}
.page_section img{ max-width:700px; }
/**
* * DATA TABLES * */
table.data{ margin:5px auto 15px; border:2px solid #00467F; border-collapse:collapse; border-spacing:0px; -webkit-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 1); }
table.data tr.odd{ background-color:#3399CC; }
table.data tr.even{ background-color:#0563af; }
table.data td, table.data th{ border-top:2px dashed #00467F; padding:2px 5px; }
table.data tr.odd:hover, table.data tr.even:hover{ background-color:#00467F; pointer:cursor; }
table.data td a{ color:white; }
table.data td a:hover{ text-decoration:none; color:#E51837; }
table.data td{ color:white; }
table.game th, table.game td{ border-right:1px solid #00467F; }
table.game td{ width:100px; text-align:center; }
table.Feedback td.text{ width:350px; }
table.Feedback td.data{ width:50px; }
div.floatleft{ margin:0px; padding:10px; }
- logos{
text-align:center; padding:0px; clear:both; }