/********************************************************************************************** Main Sections in CSS: 1. BASIC ELEMENTS Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. 2. LAYOUT Define the basic interface/: header, footer, etc. Elements that help to define the basic layout of the site 3. PAGE COMMON STYLES Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc 4. PAGE SPECIFIC STYLES Define content styles that are specific to a particular page ***********************************************************************************************/ /* import core styles */ @import url(interface/css/base.css); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#a980b0; font-family:Verdana, Geneva, sans-serif; } @font-face{ font-family: 'handsean'; src: url(handsean.ttf); } /*------------------------------------------ // 2.LAYOUT // Define the basic interface/: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { padding:11px 0px; width:1082px; margin:0 auto; min-width:1082px;} /*---- Header ----*/ div#header{padding-bottom:9px;} /*---- Banner ----*/ div#banner{margin:0px 0px 14px -46px; position:relative;} /*---- Content ----*/ div#content{ background:url(interface/images/content-middle.jpg) left top repeat-y; position:relative; } div#content div.top{ background:url(interface/images/content-top.jpg) left top no-repeat;} div#content div.top div.bottom{ background:url(interface/images/content-bottom.jpg) left bottom no-repeat; padding:24px 51px 20px 31px; } /*---- Main ----*/ div#main { float:right; width:754px; } /*---- Sidebar ----*/ div#sidebar { float:left; width:200px; padding:51px 2px 10px;} /*---- Navigation ----*/ div#navigation{ background:#64831b url(interface/images/content/sidebar/navigation/nav-bg.jpg) left top repeat-y; margin:0px 4px 16px 0px; padding:45px 0 51px;} div#navigation ul li#about a{ background:url(interface/images/content/sidebar/navigation/navigation.png) left 0px no-repeat; display:block; width:196px; height:51px;} div#navigation ul li#about a:hover , div#navigation ul li#about a.active{ background:url(interface/images/content/sidebar/navigation/navigation.png) right 0px no-repeat;} div#navigation ul li#menu a{ background:url(interface/images/content/sidebar/navigation/navigation.png) left -51px no-repeat; display:block; width:196px; height:51px;} div#navigation ul li#menu a:hover , div#navigation ul li#menu a.active{ background:url(interface/images/content/sidebar/navigation/navigation.png) right -51px no-repeat;} div#navigation ul li#contact a{ background:url(interface/images/content/sidebar/navigation/navigation.png) left -102px no-repeat; display:block; width:196px; height:51px;} div#navigation ul li#contact a:hover , div#navigation ul li#contact a.active{ background:url(interface/images/content/sidebar/navigation/navigation.png) right -102px no-repeat;} div#navigation ul li#links a{ background:url(interface/images/content/sidebar/navigation/navigation.png) left -153px no-repeat; display:block; width:196px; height:51px;} div#navigation ul li#links a:hover , div#navigation ul li#links a.active{ background:url(interface/images/content/sidebar/navigation/navigation.png) right -153px no-repeat;} div#navigation ul li#blog a{ background:url(interface/images/content/sidebar/navigation/navigation.png) left -204px no-repeat; display:block; width:196px; height:51px;} div#navigation ul li#blog a:hover , div#navigation ul li#blog a.active{ background:url(interface/images/content/sidebar/navigation/navigation.png) right -204px no-repeat;} div#sidebar div#social-sites{margin-bottom:73px;} div#sidebar div#social-sites h2{font-size:200%; color:#fff; font-weight:normal; padding:0px 0px 7px 22px; line-height:1.2em; border-bottom:1px solid #cadaa6; margin:0px 12px;} div#sidebar div#social-sites div.wrapper{ } div#sidebar div#social-sites div.wrapper a{color:#cadaa6; font-size:140%; line-height:30px; display:block; padding:12px 0 12px 42px; background:url(interface/images/content/sidebar/glow.png) 0 -100px no-repeat;} div#sidebar div#social-sites div.wrapper a:hover{text-decoration:none; background:url(interface/images/content/sidebar/glow.png) left top no-repeat; color:#fff; } div#sidebar div#social-sites div.wrapper a span{ height:30px; line-height:30px; padding-left:40px; display:block;} div#sidebar div#social-sites div.wrapper a#facebook span{ background:url(interface/images/content/sidebar/facebook.png) left top no-repeat; } div#sidebar div#social-sites div.wrapper a#facebook:hover span{ background:url(interface/images/content/sidebar/facebook.png) left -30px no-repeat; height:30px; } div#sidebar div#social-sites div.wrapper a#myspace span{ background:url(interface/images/content/sidebar/myspace.png) left top no-repeat; height:30px;} div#sidebar div#social-sites div.wrapper a#myspace:hover span{ background:url(interface/images/content/sidebar/myspace.png) left -30px no-repeat; height:30px;} div#sidebar div#social-sites div.wrapper a#twitter span{ background:url(interface/images/content/sidebar/twitter.png) left top no-repeat; } div#sidebar div#social-sites div.wrapper a#twitter:hover span{ background:url(interface/images/content/sidebar/twitter.png) left -30px no-repeat; } div#sidebar div.designer{ text-align:center; font-size:120%; color:#fff; line-height:1.2em; position:absolute; bottom:15px; left:64px; width:128px; } div#sidebar div.designer a{color:#fff;} /*---- Footer ----*/ /*------------------------------------------ // 3. PAGE COMMON STYLES // Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc //------------------------------------------*/ /*---- Header - Logo ----*/ div#main div#header h1{margin-bottom:0px;} div#header h1 a.logo{ position:relative; width:356px; height:105px; display:block; float:right; } div#header h1 a.logo span { position: absolute; top: 0; left: 0; background:url(interface/images/header/logo.jpg) 0 0 no-repeat; width:356px; height:105px; display:block; } /*---- Navigation ----*/ /*---- Content ----*/ div#pagination{margin-bottom:14px; overflow:hidden; width:100%;} div#pagination a#previous{ color:#64831c; font-size:120%; float:left;} div#pagination a#next {color:#64831c; font-size:120%; float:right;} /*---- Main ----*/ div#main div.post{margin-bottom:30px;} div#main div.post h1 { font-family:'handsean'; color:#64831c; font-size:240%; line-height:1.2em; font-weight:normal; margin-bottom:14px;} div#main div.post h1 a{ color:#64831c; } div#main div.post h2{ font-family:'handsean'; font-size:220%; line-height:30px; color:#64831c; font-weight:normal; margin-bottom:14px; } div#main div.post h3{ font-family:'handsean'; font-size:200%; line-height:30px; color:#64831c; font-weight:normal; margin-bottom:14px; } div#main div.post h4{ font-family:'handsean'; font-size:180%; line-height:30px; color:#64831c; font-weight:normal; margin-bottom:14px; } div#main div.post h5{ font-family:'handsean'; font-size:160%; line-height:24px; color:#64831c; font-weight:normal; margin-bottom:14px; } div#main div.post div.datestamp{ color:#a980b0; font-size:220%; line-height:18px; margin-bottom:14px; font-family:Arial, Helvetica, sans-serif;} div#main div.post div.entry p{ font-size:120%; line-height:1.2em; margin-bottom:14px; } div#main div.post div.entry ul{margin-bottom:14px;} div#main div.post div.entry ul li{ list-style-type:disc; line-height:14px; font-size:120%; margin-bottom:3px; list-style-position:inside;} div#main div.post div.entry ol{margin-bottom:14px;} div#main div.post div.entry ol li{ list-style-type:decimal; line-height:14px; font-size:120%; margin-bottom:3px; list-style-position:inside;} div#main div.post div.entry blockquote{ font-style:italic; line-height:14px; margin-bottom:14px;} div#main div.post a{ color:#64831c;} /*---- Images in post section ----*/ div#content div.post div.entry p img.aligncenter{ display:block; margin-left:auto; margin-right:auto;} div#content div.post div.entry p img.alignright{display:inline; margin:0 0 2px 7px; padding:4px;} .alignright{float:right;} div#content div.post div.entry p img{max-width:100%; padding:0;} div#content div.post div.entry p img.alignright{display:inline; margin:0 7px 2px 0; padding:4px;} .alignleft{float:left;} /*---- Sidebar ----*/ div#sidebar div.adr {text-align:right; margin:0px 10px 6px 0px;} div#sidebar div.adr p{ font-size:120%; color:#fff; line-height:1.2em;} /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/