|
|
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;
| + | |
- | }
| + | |