Team:Carnegie Mellon/stylesheet
From 2012.igem.org
Line 196: | Line 196: | ||
float: right; | float: right; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
Revision as of 19:16, 29 September 2012
/* Thanks to the DTU's Wiki Walkthrough! */ /* https://2011.igem.org/Team:DTU-Denmark/stylesheet?action=raw&ctype=text/css */
/* Remove Mediawiki stuff */
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;
}
/* Remove/Shrink iGEM top menu */ /***************************/ body {
margin: 10px 0 0 0; padding: 0;
}
- top-section {
width: 965px; height: 0; margin: 0 auto; padding: 0; border: none;
}
- menubar {
font-size: 75%; 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;
}
/* General Styles */ /* CMU Color Table from: http://www.cmu.edu/marcom/brand-guidelines/images/brand-guidelines.pdf */ /* Primary web colors: Red: #990000 Dark Gray: #464646 Light Gray: #d4d4d4 Light Tan: #f3f0e9
Secondary web colors: Violet: #674c56 Blue: #7493a2 Mustard: #c1a562 Brown: #936241 Orange #d17702 Green #999933 Tan #ac9d74 Spinach Blue Excitation #0094FF Spinach Green Emission #00FF73 Spinach Green Emission2 #36FF00 Malachite Green Orange Excitation #FF2700 Malachite Green Red Emssion #FF0000
- /
/* Layout */
/**********/
/*Glow text*/
- glow{
font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif;
text-decorations:none;
opacity: 1; } .glow1{
-webkit-stroke-width: 16px; -webkit-stroke-color: #FF0000; -webkit-fill-color: #FF0000; text-shadow: 0px 0px 10px #FF0000; color: #000000
} .glow2{
-webkit-stroke-width: 16px; -webkit-stroke-color: #36FF00; -webkit-fill-color: #36FF00; text-shadow: 0px 0px 10px #36FF00; color: #000000
} .text-glow{
-webkit-stroke-width: 16px; -webkit-stroke-color: #36FF00; -webkit-fill-color: #36FF00; text-shadow: 0px 0px 10px #36FF00; color: #0094FF
}
.text-glow-1{
-webkit-stroke-width: 16px; -webkit-stroke-color: #FF0000; -webkit-fill-color: #FF0000; text-shadow: 0px 0px 10px #FF0000; color: #FF2700;
}
/* Link color formatting */
a:link, a:visited { color: #990000;
-webkit-transition: color .7s ease; -moz-transition: color .7s ease; -o-transition: color .7s ease; -ms-transition: color .7s ease; transition: color .7s ease; }
a:hover, a:active, a:focus { color: #e06c1f; }
/* Div IDs */
/***********/
body, #content {
background: url("") repeat;
}
- globalWrapper {
border: none; width: 100%; margin: 0; padding: 0;
}
- content {
border: none;
}
- main{
padding: 20px;
background: url("") repeat;
}
.main_content{ font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; background-color: #FFFFFF;
/* To get a gradient bg */ /* background: -webkit-linear-gradient(#d4d4d4, #ffffff, #d4d4d4);
background: -moz-linear-gradient(#d4d4d4, #ffffff, #d4d4d4); background: -o-linear-gradient(#d4d4d4, #ffffff, #d4d4d4); background: -ms-linear-gradient(#d4d4d4, #ffffff, #d4d4d4); background: linear-gradient(#d4d4d4, #ffffff, #d4d4d4);
*/ background: url("") repeat;
padding: 25px;
position: relative; width: 880px;
}
.main_content h1{ font-size:32px; color:#FFFFFF; background: -moz-linear-gradient(left, rgba(153,0,0,1) 0%, rgba(153,0,0,1) 66%, rgba(153,0,0,0.7) 77%, rgba(153,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(153,0,0,1)), color-stop(66%,rgba(153,0,0,1)), color-stop(77%,rgba(153,0,0,0.7)), color-stop(100%,rgba(153,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(153,0,0,1) 0%,rgba(153,0,0,1) 66%,rgba(153,0,0,0.7) 77%,rgba(153,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(153,0,0,1) 0%,rgba(153,0,0,1) 66%,rgba(153,0,0,0.7) 77%,rgba(153,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(153,0,0,1) 0%,rgba(153,0,0,1) 66%,rgba(153,0,0,0.7) 77%,rgba(153,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(153,0,0,1) 0%,rgba(153,0,0,1) 66%,rgba(153,0,0,0.7) 77%,rgba(153,0,0,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#00990000',GradientType=1 ); /* IE6-9 */ }
.main_content h2{ background: -moz-linear-gradient(left, rgba(193,165,98,1) 0%, rgba(193,165,98,1) 66%, rgba(193,165,98,0.7) 77%, rgba(193,165,98,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(193,165,98,1)), color-stop(66%,rgba(193,165,98,1)), color-stop(77%,rgba(193,165,98,0.7)), color-stop(100%,rgba(193,165,98,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(193,165,98,1) 0%,rgba(193,165,98,1) 66%,rgba(193,165,98,0.7) 77%,rgba(193,165,98,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(193,165,98,1) 0%,rgba(193,165,98,1) 66%,rgba(193,165,98,0.7) 77%,rgba(193,165,98,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(193,165,98,1) 0%,rgba(193,165,98,1) 66%,rgba(193,165,98,0.7) 77%,rgba(193,165,98,0) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(193,165,98,1) 0%,rgba(193,165,98,1) 66%,rgba(193,165,98,0.7) 77%,rgba(193,165,98,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1a562', endColorstr='#00c1a562',GradientType=1 ); /* IE6-9 */
}
.center {
margin: 0 auto; width: 965px; background: transparent; float: right;
}
/* From Jquery Tools: Accordian */
/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion {
background: #fff;
width: 600px;
border: 2px solid #f3f0e9;
-background: #f3f0e9;
margin-left: 0;
font-color:#464646;
}
/* accordion header */ #accordion h2 { background:#990000; line-height: 14px; margin-left:0; padding:5px 15px; font-size:14px; font-weight:normal; border:1px solid #fff; border-bottom:1px solid #ddd; cursor:pointer; }
/* currently active header */ #accordion h2.current { cursor:default; background-color: #d4d4d4; }
/* accordion pane */ #accordion .pane { border:1px solid #fff; border-width:0 2px; display:none; height:180px; padding:15px; color:#fff; font-size:12px; font-color:#990000; background-color: #f3f0e9; }
/* a title inside pane */ #accordion .pane h3 { font-weight:normal; font-color:#464646; margin:0; font-size:14px; color:#000; }
/* Testing Jquery TOC */
.toc-holder { width: 18%; max-width: 200px; }
.toc-holder a:link, .toc-holder a:visited { text-decoration: none; -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -o-transition: all .7s ease; -ms-transition: all .7s ease; transition: all .7s ease; }
.toc-holder li li a:link, .toc-holder li li a:visited { padding-left: 50px; }
.toc-holder li li li a:link, .toc-holder li li li a:visited { padding-left: 75px; }
.toc-holder li a:hover {
background: #990000;
border-left: solid 5px transparent; }
.toc-holder { position: fixed; margin-top: 0px;
margin-left: 715px;
}
.toc-link:link,.toc-link:visited { color: white; position: relative; display: block; z-index: 20; height: 40px; line-height: 40px; padding-left: 10px; width: 100%; background: #990000; }
/*.toc-link:hover { background: #990000; }*/
.toc-link span { font-size: 16px; margin-right: 5px; display: inline-block; -webkit-transition: -webkit-transform .4s ease; -moz-transition: -moz-transform .4s ease; -o-transition: -o-transform .4s ease; -ms-transition: -ms-transform .4s ease; transition: transform .4s ease; }
.toc-link span.rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.toc-new { position: absolute; z-index: 30; width: 100%; background: #c1a562;
margin-top:174px; margin-left: -1px;
padding: 40px 0 20px 0; }
.toc-h1,.toc-h1 ul { list-style: none; margin: 0; padding: 0; }
.toc-h1 a:link,.toc-h1 a:visited { color: white; padding: 5px 20px 5px 30px; display: block; }
.closed { display: block; }
footer { padding-bottom: 30px; }
p { margin-bottom: 30px; }
.top-link:link,.top-link:visited {
display: block;
text-decoration: none;
position: fixed;
bottom: 0;
right: 2%;
color: white;
//background: #222;
background: #990000;
padding: 8px 16px 0 16px; height: 30px; font-size: 14px; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; }
@media (max-width: 300px) { .toc-holder { left: 0; right: 0; }
.toc-link:link,.toc-link:visited { width: 150%; }
.toc-new { width: 155%; }
.top-link:link,.top-link:visited { top: 2px; z-index: 20; background: none; }
}