Template:CSS

From 2014.igem.org

(Difference between revisions)
 
Line 1: Line 1:
-
/*
+
<html>
-
Theme Name: 1stwebdesigner HTML5/CSS3 Layout
+
<head>
-
Date: March 2013
+
<style >
-
Description: Basic HTML5/CSS3 layout built on a responsive framework
+
-
Version: 1.0
+
-
Author: Christian Vasile
+
-
Author URL: http://christianvasile.com
+
-
*/
+
-
/* ===========================
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
-
  ======= Body style ========
+
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}
-
  =========================== */
+
-
 
+
-
body {
+
-
background-image: url('img/bg.png');
+
-
color: black;
+
-
font-size: 87.5%; /* Base font size: 14px */
+
-
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+
-
line-height: 1.429;
+
-
margin: 0;
+
-
padding: 0;
+
-
text-align: left;
+
-
}
+
-
+
-
.body {
+
-
clear: both;  
+
-
margin: 0 auto;
+
-
width: 70%;
+
-
}
+
-
+
-
/* ===========================
+
-
  ========= Headings ========
+
-
  =========================== */
+
-
h2 {font-size: 1.571em} /* 22px */
+
-
h3 {font-size: 1.429em} /* 20px */
+
-
h4 {font-size: 1.286em} /* 18px */
+
-
h5 {font-size: 1.143em} /* 16px */
+
-
h6 {font-size: 1em} /* 14px */
+
-
 
+
-
h2, h3, h4, h5, h6 {
+
-
font-weight: 400;
+
-
line-height: 1.1;
+
-
margin-bottom: .8em;
+
-
color: black;
+
-
}
+
-
 
+
-
/* ===========================
+
-
  ======= Anchor style ======
+
-
  =========================== */
+
-
a {
+
-
outline: 0;
+
-
}
+
-
a:link, a:visited {
+
.firstHeading {
-
color: black;
+
width: 950px;
-
padding: 0 1px;
+
margin: 0px auto;
-
text-decoration: none;
+
padding-top: 10px;
 +
margin-bottom: 0px;
 +
font-family: Georgia, Times, "Times New Roman", serif;
 +
        color: black;
}
}
-
 
+
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
-
a:hover, a:active {
+
background-color: #383838;
-
background-color: #B9D3E3;
+
border: 0 none;
-
color: #fff;
+
height: 14px;
-
text-decoration: none;
+
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 975px;
 +
left: 50%;
 +
margin-left: -487px;
}
}
-
/* ===========================
+
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
-
  ===== Main Navigation =====
+
background-color: #383838;
-
  =========================== */
+
height: 14px;
-
 
+
display: block;
-
.mainHeader h1 {
+
z-index: 10;
-
font-size: 400%;
+
position: fixed;
-
text-align: center;
+
width: 100%;
-
float: none;
+
top: 0;
-
margin: 3% 0 3% 0;
+
-
color: #4682B4;
+
-
}
+
-
 
+
-
.mainHeader nav {
+
-
background: #4682B4;
+
-
font-size: 1.143em;
+
-
height: 40px;
+
-
line-height: 30px;
+
-
margin: 0 auto 30px auto;
+
-
text-align: center;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
+
-
.mainHeader nav ul {
+
-
list-style: none;  
+
-
margin: 0 auto;
+
}
}
-
.mainHeader nav ul li {
+
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
-
float: left;  
+
color: #727272;
-
display: inline;  
+
text-decoration: none;  
 +
background-color: transparent;
}
}
-
 
-
.mainHeader nav a:link, .mainHeader nav a:visited {
 
-
text-transform: uppercase;
 
-
color: #FFFFFF;
 
-
display: inline-block;
 
-
height: 30px;
 
-
padding: 5px 23px;
 
-
text-decoration: none;
 
-
}
 
-
.mainHeader nav a:hover, .mainHeader nav a:active,
 
-
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
 
-
background: #B9D3E3;
 
-
color: #FFFFFF;
 
-
text-shadow: none !important;
 
-
}
 
-
 
-
.mainHeader nav li a {
 
-
border-radius: 5px;
 
-
-moz-border-radius: 5px;
 
-
-webkit-border-radius: 5px;
 
-
}
 
-
 
-
/* ===========================
 
-
  ======= Content Area ======
 
-
  =========================== */
 
-
.mainContent {
+
body {  
-
overflow: hidden;
+
background-color: #fff;
-
line-height: 25px;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
float: left;
+
}
}
-
.mainContent img {
 
-
border: 0px;
 
-
text-decoration: none;
 
-
float: left;
 
-
width: 68%;
 
-
height: auto;
 
-
margin: 0 0 1% 0;
 
-
border-radius: 5px;
 
-
-moz-border-radius: 5px;
 
-
-webkit-border-radius: 5px;
 
-
}
 
-
.topcontent {
 
-
background-color: #FFF;
 
-
border-radius: 5px;
 
-
-moz-border-radius: 5px;
 
-
-webkit-border-radius: 5px;
 
-
padding: 3% 5%;
 
-
margin-bottom: 3%;
 
-
float: left;
 
-
}
 
-
.content {
+
</style>
-
width: 68%;
+
</style>
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
/* ===========================
 
-
  ======== Sidebar ==========
 
-
  =========================== */
 
-
.top-sidebar {
 
-
width: 22%;
 
-
float: left;
 
-
margin-left: 2%;
 
-
border-radius: 5px;
 
-
-moz-border-radius: 5px;
 
-
-webkit-border-radius: 5px;
 
-
background-color: #FFF;
 
-
padding: 2% 3%;
 
-
margin-bottom: 2%;
 
-
}
 
-
.middle-sidebar {
+
</html>
-
width: 22%;
+
-
float: left;
+
-
margin-left: 2%;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
padding: 2% 3%;
+
-
margin-bottom: 2%;
+
-
}
+
-
 
+
-
.bottom-sidebar {
+
-
width: 22%;
+
-
float: left;
+
-
margin-left: 2%;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
padding: 2% 3%;
+
-
}
+
-
 
+
-
/* ===========================
+
-
  ========= Footer ==========
+
-
  =========================== */
+
-
 
+
-
.mainFooter {
+
-
width: 100%;
+
-
float: left;
+
-
margin-top: 2%;
+
-
margin-bottom: 2%;
+
-
padding-left: 0;
+
-
background-color: #4682B4;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
color: #FFF;
+
-
}
+
-
 
+
-
.mainFooter p {
+
-
width: 91%;
+
-
margin: 2% auto;
+
-
}
+

Latest revision as of 08:52, 28 September 2014