Team:Carnegie Mellon/stylesheet

From 2012.igem.org

(Difference between revisions)
 
(51 intermediate revisions not shown)
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 80: Line 81:
     -webkit-stroke-color: #FF0000;
     -webkit-stroke-color: #FF0000;
     -webkit-fill-color: #FF0000;
     -webkit-fill-color: #FF0000;
-
     text-shadow: 40px 40px 40px #FF0000;
+
     text-shadow: 0px 0px 10px #FF0000;
     color: #000000
     color: #000000
}
}
.glow2{
.glow2{
     -webkit-stroke-width: 16px;
     -webkit-stroke-width: 16px;
-
     -webkit-stroke-color: #00FF73;
+
     -webkit-stroke-color: #36FF00;
-
     -webkit-fill-color: #00FF73;
+
     -webkit-fill-color: #36FF00;
-
     text-shadow: 40px 40px 40px #00FF73;
+
     text-shadow: 0px 0px 10px #36FF00;
     color: #000000
     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{
.text-glow{
     -webkit-stroke-width: 16px;
     -webkit-stroke-width: 16px;
-
     -webkit-stroke-color: #00FF73;
+
     -webkit-stroke-color: #36FF00;
-
     -webkit-fill-color: #00FF73;
+
     -webkit-fill-color: #36FF00;
-
     text-shadow: 40px 40px 40px #00FF73;
+
     text-shadow: 0px 0px 10px #36FF00;
     color: #0094FF
     color: #0094FF
   
   
Line 103: Line 112:
     -webkit-stroke-color: #FF0000;
     -webkit-stroke-color: #FF0000;
     -webkit-fill-color: #FF0000;
     -webkit-fill-color: #FF0000;
-
     text-shadow: 40px 40px 40px #FF0000;
+
     text-shadow: 0px 0px 10px #FF0000;
     color: #FF2700;
     color: #FF2700;
   
   
}
}
-
+
 
/* Link color formatting */
/* Link color formatting */
Line 142: Line 151:
#main{
#main{
-
padding: 1px;
+
padding: 20px;
-
         opacity:0.8;
+
         background: url("https://static.igem.org/mediawiki/2012/6/62/Trans65.png") repeat;
-
        filter:alpha(opacity=80); /* For IE8 and earlier */
+
}
}
Line 152: Line 160:
color:#000000;
color:#000000;
background-color: #FFFFFF;
background-color: #FFFFFF;
-
        /* To get a gradient bg */
+
         background: url("https://static.igem.org/mediawiki/2012/7/7a/Cmu-mosiacbg.png") repeat;
-
         background: -webkit-linear-gradient(#d4d4d4, #ffffff, #d4d4d4);
+
padding: 25px;
-
background: -moz-linear-gradient(#d4d4d4, #ffffff, #d4d4d4);
+
        position: relative;
-
background: -o-linear-gradient(#d4d4d4, #ffffff, #d4d4d4);
+
        width: 880px;
-
background: -ms-linear-gradient(#d4d4d4, #ffffff, #d4d4d4);
+
-
background: linear-gradient(#d4d4d4, #ffffff, #d4d4d4);
+
-
padding: 5px;
+
}
}
 +
.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 169: 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 */
 
-
#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 */
/* Testing Jquery TOC */
Line 253: Line 248:
position: fixed;
position: fixed;
margin-top: 0px;
margin-top: 0px;
-
         margin-left: -150px;
+
         margin-left: 715px;
}
}
Line 291: Line 286:
}
}
-
.toc {
+
.toc-new {
position: absolute;
position: absolute;
z-index: 30;
z-index: 30;
width: 100%;
width: 100%;
-
background: #990000;
+
background: #c1a562;
         margin-top:174px;
         margin-top:174px;
         margin-left: -1px;
         margin-left: -1px;
Line 353: Line 348:
}
}
-
.toc {
+
.toc-new {
width: 155%;
width: 155%;
}
}

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"