Template:Team:Michigan Software/CSS

From 2014.igem.org

(Difference between revisions)
(Replaced content with "TEST")
Line 1: Line 1:
-
/*
+
TEST
-
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;
+
-
}
+
-
 
+
-
/* ===========================
+
-
  ====== Media Queries ======
+
-
  =========================== */
+
-
 
+
-
@media only screen and (min-width : 150px) and (max-width : 780px)
+
-
{
+
-
.body {
+
-
clear: both;
+
-
margin: 0 auto;
+
-
width: 90%;
+
-
font-size: 90%;
+
-
}
+
-
+
-
.mainHeader nav {
+
-
background: #666;
+
-
font-size: 1.143em;
+
-
height: 160px;
+
-
line-height: 30px;
+
-
margin-bottom: 0;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
+
-
.mainHeader nav ul {
+
-
list-style: none;
+
-
margin: 0 auto;
+
-
padding-left: 0;
+
-
}
+
-
+
-
.mainHeader nav li {
+
-
margin-left: 0 auto;
+
-
width: 100%;
+
-
}
+
-
+
-
.mainHeader nav a:link, .mainHeader nav a:visited {
+
-
color: #FFF;
+
-
display: block;
+
-
height: 30px;
+
-
padding: 5px 0;
+
-
text-decoration: none;
+
-
}
+
-
+
-
.mainHeader nav a:active,
+
-
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
+
-
background: #CF5C3F;
+
-
color: #fff;
+
-
text-shadow: none !important;
+
-
}
+
-
+
-
.mainHeader nav li a {
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
+
-
.mainHeader img {
+
-
width: 68%;
+
-
height: auto;
+
-
}
+
-
+
-
.mainContent {
+
-
overflow: hidden;
+
-
line-height: 25px;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
margin-top: 4%;
+
-
margin-bottom: 2%;
+
-
}
+
-
+
-
.topcontent {
+
-
background-color: #FFF;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
padding: 2% 5%;
+
-
margin-bottom: 4%;
+
-
}
+
-
+
-
.content {
+
-
width: 100%;
+
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
}
+
-
 
+
-
.top-sidebar {
+
-
width: 86%;
+
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
margin-top: 4%;
+
-
margin-left: 0;
+
-
padding: 0 7%;
+
-
margin-bottom: 0;
+
-
}
+
-
+
-
.top-sidebar p {
+
-
width: 90%;
+
-
}
+
-
 
+
-
.middle-sidebar {
+
-
width: 86%;
+
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
margin-top: 4%;
+
-
margin-left: 0;
+
-
padding: 0 7%;
+
-
margin-bottom: 0;
+
-
}
+
-
+
-
.middle-sidebar p {
+
-
width: 90%;
+
-
}
+
-
+
-
.bottom-sidebar {
+
-
width: 86%;
+
-
float: left;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
background-color: #FFF;
+
-
margin-top: 4%;
+
-
margin-left: 0%;
+
-
padding: 0 7%;
+
-
margin-bottom: 1%;
+
-
}
+
-
+
-
.bottom-sidebar p {
+
-
width: 90%;
+
-
}
+
-
+
-
.mainFooter {
+
-
width: 100%;
+
-
float: left;
+
-
margin: 2% 0;
+
-
padding-left: 0;
+
-
background-color: #B9D3E3;
+
-
border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
-webkit-border-radius: 5px;
+
-
color: #FFF;
+
-
}
+
-
+
-
.mainFooter p {
+
-
width: 86%;
+
-
margin: 2% auto;
+
-
}
+
-
}
+

Revision as of 00:32, 8 October 2014

TEST

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