|
|
| Line 1: |
Line 1: |
| - | 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;
| |
| - | }
| |
| - | }
| |
"
