Template:CSS

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
/*
-
<head>
+
Theme Name: 1stwebdesigner HTML5/CSS3 Layout
-
<style >
+
Date: March 2013
 +
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 --*/
+
/* ===========================
-
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}
+
  ======= Body style ========
 +
  =========================== */
 +
 
 +
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;
 +
}
-
.firstHeading {
+
a:link, a:visited {
-
width: 950px;
+
color: black;
-
margin: 0px auto;
+
padding: 0 1px;
-
padding-top: 10px;
+
text-decoration: none;
-
margin-bottom: 0px;
+
-
font-family: Georgia, Times, "Times New Roman", serif;
+
-
        color: black;
+
}
}
-
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
+
 
-
background-color: #383838;
+
a:hover, a:active {
-
border: 0 none;
+
background-color: #B9D3E3;
-
height: 14px;
+
color: #fff;
-
z-index: 100;
+
text-decoration: none;
-
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.) --*/
+
/* ===========================
-
background-color: #383838;
+
  ===== Main Navigation =====
-
height: 14px;
+
  =========================== */
-
display: block;
+
 
-
z-index: 10;
+
.mainHeader h1 {
-
position: fixed;
+
font-size: 400%;
-
width: 100%;
+
text-align: center;
-
top: 0;
+
float: none;
 +
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;
}
}
-
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
.mainHeader nav ul li {
-
color: #727272;
+
float: left;  
-
text-decoration: none;  
+
display: inline;  
-
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 ======
 +
  =========================== */
-
body {  
+
.mainContent {
-
background-color: #fff;
+
overflow: hidden;
 +
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;
 +
}
-
</style>
+
.content {
-
</style>
+
width: 68%;
 +
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%;
 +
}
-
</html>
+
.middle-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%;
 +
}
 +
 
 +
.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;
 +
}

Revision as of 00:28, 20 September 2014

/* Theme Name: 1stwebdesigner HTML5/CSS3 Layout Date: March 2013 Description: Basic HTML5/CSS3 layout built on a responsive framework Version: 1.0 Author: Christian Vasile Author URL: http://christianvasile.com

  • /

/* =========================== 

  ======= Body style ======== 
  =========================== */

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 { color: black; padding: 0 1px; text-decoration: none; }

a:hover, a:active { background-color: #B9D3E3; color: #fff; text-decoration: none; }

/* =========================== 

  ===== Main Navigation ===== 
  =========================== */

.mainHeader h1 { font-size: 400%; text-align: center; float: none; 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 { float: left; display: inline; }

.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 { overflow: hidden; 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 { width: 68%; 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 { 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; }

Retrieved from "http://2014.igem.org/Template:CSS"