Team:Carnegie Mellon/stylesheet

From 2012.igem.org

(Difference between revisions)
 
(173 intermediate revisions not shown)
Line 12: Line 12:
     margin: 10px 0 0 0;
     margin: 10px 0 0 0;
     padding: 0;
     padding: 0;
-
}
+
}
#top-section {
#top-section {
     width: 965px;
     width: 965px;
Line 62: Line 62:
Spinach Blue Excitation #0094FF
Spinach Blue Excitation #0094FF
Spinach Green Emission #00FF73
Spinach Green Emission #00FF73
 +
Spinach Green Emission2 #36FF00
Malachite Green Orange Excitation #FF2700
Malachite Green Orange Excitation #FF2700
Malachite Green Red Emssion #FF0000
Malachite Green Red Emssion #FF0000
Line 69: Line 70:
/* Layout */
/* 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
 +
}
 +
.glow-title{
 +
    -webkit-stroke-width: 16px;
 +
    -webkit-stroke-color: #36FF00;
 +
    -webkit-fill-color: #36FF00;
 +
    text-shadow: 0px 0px 10px #36FF00;
 +
    color: #000000
 +
    font-size: 24px;
 +
}
 +
.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 */
/* Div IDs */
/***********/
/***********/
-
body, #main, #content {
+
body, #content {
     background: url("https://static.igem.org/mediawiki/2012/d/d6/TartanBg.jpg") repeat;
     background: url("https://static.igem.org/mediawiki/2012/d/d6/TartanBg.jpg") repeat;
}
}
Line 88: Line 151:
#main{
#main{
-
padding: 1px;
+
padding: 20px;
 +
        background: url("https://static.igem.org/mediawiki/2012/6/62/Trans65.png") repeat;
}
}
-
 
+
-
 
+
-
 
+
-
/* Div Classes */
+
-
/***************/
+
-
 
+
.main_content{
.main_content{
-
font-size:14px;
+
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
color:#000000;
-
background: #FFFFFF;
+
background-color: #FFFFFF;
-
padding: 5px;
+
        background: url("https://static.igem.org/mediawiki/2012/7/7a/Cmu-mosiacbg.png") repeat;
 +
padding: 25px;
 +
        position: relative;
 +
        width: 880px;
}
}
 +
 +
.main_content h1{
 +
font-size:26px;
 +
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 */
 +
}
 +
 +
.name {color:#990000; font-weight:bold;}
 +
 +
.view pre {font-family: monospace; color: #000000; background-color: #ffffff;}
 +
 +
.view body { font-family: monospace; color: #000000; background-color: #ffffff;}
 +
 +
.view lnr { color: #888888; background-color: #e6e6e6; }
 +
 +
.view String { color: #4a708b; }
 +
 +
.view Constant { color: #ff8c00; }
 +
 +
.view Special { color: #8a2be2; }
 +
 +
.view Statement { color: #b03060; font-weight: bold; }
 +
 +
.view Comment { color: #0000ee; font-style: italic; }
 +
 +
.view Identifier { color: #458b74;}
.center {
.center {
Line 111: Line 215:
}
}
-
/* 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 */
+
/* Testing Jquery TOC */
-
#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 */
+
.toc-holder {
-
#accordion h2.current {
+
width: 18%;
-
cursor:default;
+
max-width: 200px;
-
background-color: #d4d4d4;
+
}
-
}
+
-
/* accordion pane */
+
.toc-holder a:link, .toc-holder a:visited {
-
#accordion .pane {
+
text-decoration: none;
-
border:1px solid #fff;
+
-webkit-transition: all .7s ease;
-
border-width:0 2px;
+
-moz-transition: all .7s ease;
-
display:none;
+
-o-transition: all .7s ease;
-
height:180px;
+
-ms-transition: all .7s ease;
-
padding:15px;
+
transition: all .7s ease;
-
color:#fff;
+
}
-
font-size:12px;
+
-
font-color:#990000;
+
-
background-color: #f3f0e9;
+
-
}
+
-
/* a title inside pane */
+
.toc-holder li li a:link, .toc-holder li li a:visited {
-
#accordion .pane h3 {
+
padding-left: 50px;
-
font-weight:normal;
+
}
-
font-color:#464646;
+
 
-
margin:0;
+
.toc-holder li li li a:link, .toc-holder li li li a:visited {
-
font-size:14px;
+
padding-left: 75px;
-
color:#000;
+
}
-
}
+
 
 +
.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;
 +
}
 +
 +
}

Latest revision as of 01:59, 4 October 2012

/* Thanks to the DTU's Wiki Walkthrough! */ /* https://2011.igem.org/Team:DTU-Denmark/stylesheet?action=raw&ctype=text/css */

/* Remove Mediawiki stuff */

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo { 
   display:none;

}

/* Remove/Shrink iGEM top menu */ /***************************/ body { 

   margin: 10px 0 0 0;
   padding: 0;

}

  1. top-section { 
   width: 965px;
   height: 0;
   margin: 0 auto;
   padding: 0;
   border: none;

}

  1. menubar { 
   font-size: 75%;
   top: -14px;

} .left-menu:hover { 

   background-color: transparent;

}

  1. menubar li a { 
   background-color: transparent;

}

  1. menubar:hover { 
   color: white;

}

  1. menubar li a { 
   color: transparent;

}

  1. menubar:hover li a { 
   color: white;

}

  1. 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*/

  1. 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

} .glow-title{ 

   -webkit-stroke-width: 16px;
   -webkit-stroke-color: #36FF00;
   -webkit-fill-color: #36FF00;
   text-shadow: 0px 0px 10px #36FF00;
   color: #000000
   font-size: 24px;

} .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("TartanBg.jpg") repeat;

}

  1. globalWrapper { 
   border: none;
   width: 100%;
   margin: 0;
   padding: 0;

}

  1. content { 
 border: none;

}

  1. main{

padding: 20px; 

       background: url("Trans65.png") repeat;

}

.main_content{ font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; background-color: #FFFFFF; 

       background: url("Cmu-mosiacbg.png") repeat;

padding: 25px; 

       position: relative;
       width: 880px;

}

.main_content h1{ font-size:26px; 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 */ }

.name {color:#990000; font-weight:bold;}

.view pre {font-family: monospace; color: #000000; background-color: #ffffff;}

.view body { font-family: monospace; color: #000000; background-color: #ffffff;}

.view lnr { color: #888888; background-color: #e6e6e6; }

.view String { color: #4a708b; }

.view Constant { color: #ff8c00; }

.view Special { color: #8a2be2; }

.view Statement { color: #b03060; font-weight: bold; }

.view Comment { color: #0000ee; font-style: italic; }

.view Identifier { color: #458b74;}

.center { 

   margin: 0 auto;
   width: 965px;
   background: transparent;
   float: right;

}


/* 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; }

}

Retrieved from "http://2012.igem.org/Team:Carnegie_Mellon/stylesheet"