Team:Carnegie Mellon/stylesheet

From 2012.igem.org

(Difference between revisions)
Line 170: Line 170:
/* Testing Jquery TOC */
/* Testing Jquery TOC */
-
a:link, a:visited {
+
a:link, a:visited {
-
color: #3381d6;
+
color: #3381d6;
-
-webkit-transition: color .7s ease;
+
-webkit-transition: color .7s ease;
-
-moz-transition: color .7s ease;
+
-moz-transition: color .7s ease;
-
-o-transition: color .7s ease;
+
-o-transition: color .7s ease;
-
-ms-transition: color .7s ease;
+
-ms-transition: color .7s ease;
-
transition: color .7s ease;
+
transition: color .7s ease;
-
}
+
}
-
a:hover, a:active, a:focus {
+
a:hover, a:active, a:focus {
-
color: #e06c1f;
+
color: #e06c1f;
-
}
+
}
-
.container {
+
.container {
-
width: 90%;
+
width: 90%;
-
max-width: 900px;
+
max-width: 900px;
-
margin: 0 auto;
+
margin: 0 auto;
-
position: relative;
+
position: relative;
-
padding: 70px 10px 0 10px;
+
padding: 70px 10px 0 10px;
-
}
+
}
-
.toc-holder {
+
.toc-holder {
-
width: 18%;
+
width: 18%;
-
min-width: 220px;
+
min-width: 220px;
-
}
+
}
-
.toc-holder a:link, .toc-holder a:visited {
+
.toc-holder a:link, .toc-holder a:visited {
-
text-decoration: none;
+
text-decoration: none;
-
-webkit-transition: all .7s ease;
+
-webkit-transition: all .7s ease;
-
-moz-transition: all .7s ease;
+
-moz-transition: all .7s ease;
-
-o-transition: all .7s ease;
+
-o-transition: all .7s ease;
-
-ms-transition: all .7s ease;
+
-ms-transition: all .7s ease;
-
transition: all .7s ease;
+
transition: all .7s ease;
-
}
+
}
-
.toc-holder li li a:link, .toc-holder li li a:visited {
+
.toc-holder li li a:link, .toc-holder li li a:visited {
-
padding-left: 60px;
+
padding-left: 60px;
-
}
+
}
-
.toc-holder li li li a:link, .toc-holder li li li a:visited {
+
.toc-holder li li li a:link, .toc-holder li li li a:visited {
-
padding-left: 90px;
+
padding-left: 90px;
-
}
+
}
-
.toc-holder li a:hover {
+
.toc-holder li a:hover {
-
background: #666;
+
background: #666;
-
border-left: solid 5px transparent;
+
border-left: solid 5px transparent;
-
}
+
}
-
.toc-holder {
+
.toc-holder {
-
position: fixed;
+
position: fixed;
-
margin-top: -70px;
+
margin-top: -70px;
-
}
+
}
-
.toc-link:link,.toc-link:visited {
+
.toc-link:link,.toc-link:visited {
-
color: white;
+
color: white;
-
position: relative;
+
position: relative;
-
display: block;
+
display: block;
-
z-index: 20;
+
z-index: 20;
-
height: 40px;
+
height: 40px;
-
line-height: 40px;
+
line-height: 40px;
-
padding-left: 10px;
+
padding-left: 10px;
-
width: 100%;
+
width: 100%;
-
background: #444;
+
background: #444;
-
}
+
}
-
.toc-link:hover {
+
.toc-link:hover {
-
background: #666;
+
background: #666;
-
}
+
}
-
.toc-link span {
+
.toc-link span {
-
font-size: 16px;
+
font-size: 16px;
-
margin-right: 5px;
+
margin-right: 5px;
-
display: inline-block;
+
display: inline-block;
-
-webkit-transition: -webkit-transform .4s ease;
+
-webkit-transition: -webkit-transform .4s ease;
-
-moz-transition: -moz-transform .4s ease;
+
-moz-transition: -moz-transform .4s ease;
-
-o-transition: -o-transform .4s ease;
+
-o-transition: -o-transform .4s ease;
-
-ms-transition: -ms-transform .4s ease;
+
-ms-transition: -ms-transform .4s ease;
-
transition: transform .4s ease;
+
transition: transform .4s ease;
-
}
+
}
-
.toc-link span.rotate {
+
.toc-link span.rotate {
-
-webkit-transform: rotate(180deg);
+
-webkit-transform: rotate(180deg);
-
-moz-transform: rotate(180deg);
+
-moz-transform: rotate(180deg);
-
-o-transform: rotate(180deg);
+
-o-transform: rotate(180deg);
-
-ms-transform: rotate(180deg);
+
-ms-transform: rotate(180deg);
-
transform: rotate(180deg);
+
transform: rotate(180deg);
-
}
+
}
-
.toc {
+
.toc {
-
position: absolute;
+
position: absolute;
-
z-index: 10;
+
z-index: 10;
-
width: 103%;
+
width: 103%;
-
background: #222;
+
background: #222;
-
padding: 40px 0 20px 0;
+
padding: 40px 0 20px 0;
-
}
+
}
-
.toc-h1,.toc-h1 ul {
+
.toc-h1,.toc-h1 ul {
-
list-style: none;
+
list-style: none;
-
margin: 0;
+
margin: 0;
-
padding: 0;
+
padding: 0;
-
}
+
}
-
.toc-h1 a:link,.toc-h1 a:visited {
+
.toc-h1 a:link,.toc-h1 a:visited {
-
color: white;
+
color: white;
-
padding: 5px 20px 5px 30px;
+
padding: 5px 20px 5px 30px;
-
display: block;
+
display: block;
-
}
+
}
-
.closed {
+
.closed {
-
display: block;
+
display: block;
-
}
+
}
-
h1 {
+
h1 {
-
font-family: Georgia, sans-serif;
+
font-family: Georgia, sans-serif;
-
font-size: 2.3em;
+
font-size: 2.3em;
-
font-style: italic;
+
font-style: italic;
-
margin: 0 0 40px 0;
+
margin: 0 0 40px 0;
-
text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
+
text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px;
-
}
+
}
-
footer {
+
footer {
-
padding-bottom: 30px;
+
padding-bottom: 30px;
-
}
+
}
-
p {
+
p {
-
margin-bottom: 30px;
+
margin-bottom: 30px;
-
}
+
}
-
.p1 {
+
.p1 {
-
color: darkgreen;
+
color: darkgreen;
 +
}
 +
 
 +
h2 {
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-size: 30px;
 +
font-weight: bold;
 +
}
 +
 
 +
.top-link:link,.top-link:visited {
 +
display: block;
 +
text-decoration: none;
 +
position: fixed;
 +
bottom: 0;
 +
right: 2%;
 +
color: white;
 +
background: #222;
 +
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: 480px) {
 +
 +
.toc-holder {
 +
left: 0;
 +
right: 0;
}
}
-
h2 {
+
.toc-link:link,.toc-link:visited {
-
font-family: Arial, Helvetica, sans-serif;
+
width: 150%;
-
font-size: 30px;
+
-
font-weight: bold;
+
}
}
-
 
+
 +
.toc {
 +
width: 155%;
 +
}
 +
.top-link:link,.top-link:visited {
.top-link:link,.top-link:visited {
-
display: block;
+
top: 2px;
-
text-decoration: none;
+
z-index: 20;
-
position: fixed;
+
background: none;
-
bottom: 0;
+
-
right: 2%;
+
-
color: white;
+
-
background: #222;
+
-
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: 480px) {
+
-
+
-
.toc-holder {
+
-
left: 0;
+
-
right: 0;
+
-
}
+
-
 
+
-
.toc-link:link,.toc-link:visited {
+
-
width: 150%;
+
-
}
+
-
+
-
.toc {
+
-
width: 155%;
+
-
}
+
-
+
-
.top-link:link,.top-link:visited {
+
-
top: 2px;
+
-
z-index: 20;
+
-
background: none;
+
-
}
+
-
+
}
}
 +
 +
}

Revision as of 17:29, 30 July 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 Malachite Green Orange Excitation #FF2700 Malachite Green Red Emssion #FF0000

  • /


/* Layout */ /**********/

/* Div IDs */ /***********/ body, #main, #content { 

   background: url("TartanBg.jpg") repeat;

}

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

}

  1. content { 
 border: none;

}

  1. main{

padding: 1px; }


/* Div Classes */ /***************/

.main_content{ font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; background: #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); padding: 5px; }

.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 */ a:link, a:visited { color: #3381d6; -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; }

.container { width: 90%; max-width: 900px; margin: 0 auto; position: relative; padding: 70px 10px 0 10px; }

.toc-holder { width: 18%; min-width: 220px; }

.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: 60px; }

.toc-holder li li li a:link, .toc-holder li li li a:visited { padding-left: 90px; }

.toc-holder li a:hover { background: #666; border-left: solid 5px transparent; }

.toc-holder { position: fixed; margin-top: -70px; }

.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: #444; }

.toc-link:hover { background: #666; }

.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 { position: absolute; z-index: 10; width: 103%; background: #222; 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; }

h1 { font-family: Georgia, sans-serif; font-size: 2.3em; font-style: italic; margin: 0 0 40px 0; text-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px; }

footer { padding-bottom: 30px; }

p { margin-bottom: 30px; }

.p1 { color: darkgreen; }

h2 { font-family: Arial, Helvetica, sans-serif; font-size: 30px; font-weight: bold; }

.top-link:link,.top-link:visited { display: block; text-decoration: none; position: fixed; bottom: 0; right: 2%; color: white; background: #222; 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: 480px) {

.toc-holder { left: 0; right: 0; }

.toc-link:link,.toc-link:visited { width: 150%; }

.toc { 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"