/* Theme Name: Hawken Theme /* RESET */ /* ----------------------------------------- */ /* Global reset */ /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0;} table { border-collapse:collapse; border-spacing:0 ;} fieldset, img { border:0 ;} address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal ;} ol, ul, li { list-style:none; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal ;} q:before, q:after { content:'';} /* Global reset-RESET */ /* The below restores some sensible defaults */ strong { font-weight:bold } em { font-style:italic } a img { border:none } /* Gets rid of IE's blue borders */ #news p {font: normal normal normal 13px/normal Verdana, Arial, Helvetica, sans-serif;} /*-----------------------------------------------------------------------------------------------------------*/ .clear {clear:both;} body { background: white ; font-family: Garamond; } a { text-decoration: none; color:olive; } a:hover { text-decoration: underline; color:olive; } #wrapper { margin: 0 auto; width:800px; } #header { overflow: hidden; } #menu li a { font-size: 30px ; font-weight: bold; text-decoration: none; } /* Menu */ #menu { background-color: #462709 /*#6B594A *//*#191919*/; height:3.0em; /*border-bottom: 1px solid #373737;*/ -webkit-border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; /* css3 for Safari, Chrome */ -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; /* css3 for Firefox */ } #menu ul { width: 800px; margin: 0 auto; padding: 0; bottom: 0; left: 0; list-style: none; } #menu ul li { float: left; } #menu li { } #menu .page_item a { display: block; padding-left: 30px; color: #868686; text-decoration: none; } #menu .current_page_item a, #menu .page_item a:hover { color: #eeeeee; } /*--------------------------------------HOME (MUSIC)----------------------------------------------------------------*/ #home { background:url(img/kinUltrafoxxDark.jpg) repeat-x #000000; } #home #main-content{ width:auto; /*margin:40px 0px 0px 0px;*/ position: absolute; top: 50px; left: 63px; background: #462709; opacity:.70; filter:alpha(opacity=70); filter: “alpha(opacity=70)”; -webkit-box-shadow: 5px 5px 7px #454545; color: grey; font: 20px Garamond; -webkit-border-radius: 15px;-moz-border-radius: 15px; padding: 10px; } #home #fullscreenFooter{ width:800px;height:85px; margin:575px 0px 0px 283px;font-size:1.2em; padding:15px;color:#F0EFDF; background: ; /*position: absolute; top: 630px;*/ /*left: 50px*/; display: none; } #loaderGif { display: none; z-index: auto; position: absolute; background: url(img/ajax-loader-flower1.gif); width: 32px; height: 32px; } #centerBox { width:auto; margin:400px 0px 0px 400px; } #home #musicBox{ display: none;} #home #videoBox{ display: none;} #home #photoBox{ display: none; width: 580px; position: absolute; top: 40px; left: 345px; } /*-----------------------------------------------------------------------------------------------------------*/ /*--------------------------------------ABOUT----------------------------------------------------------------*/ #about { background:url(img/lyftkranWebFull2Straight.jpg) repeat-x #000000;} #about #main-content {} #about #mainContentWidgets {margin: 0px 0px 0px -300px; } #about #textbox { position: absolute; top: 390px; left: 250px; color: grey; font-size: 20px; background: #462709; opacity:.70; filter:alpha(opacity=70); filter: “alpha(opacity=70)”; -webkit-box-shadow: 5px 5px 7px #454545; -webkit-border-radius: 15px;-moz-border-radius: 15px; padding: 15px; width: 250px; } /*-----------------------------------------------------------------------------------------------------------*/ /*----------------------------------NEWS---------------------------------------------------------------*/ #news,.archive,.single { background:url(img/newsBg.jpg) repeat-y;} .post,#Next-Prev { margin: 20px 0px 0px 0px; padding: 25px; background: #462709; -webkit-box-shadow: 5px 5px 7px #454545; -webkit-border-radius: 15px;-moz-border-radius: 15px; color: grey; font: 20px Garamond; } #main-content { width:500px; float:left; } #sidebar { width:230px; float:left; margin: 20px 0px 0px 20px; padding: 25px; text-align:left; position:relative; background: #462709; -webkit-box-shadow: 5px 5px 7px #454545; -webkit-border-radius: 15px;-moz-border-radius: 15px; color: grey; font: 20px Garamond; } #footer { clear: both; } .footer-widget ul li { float: left; padding: 10px; } #commentform { width: 200px;} /*-----------------------------------------------------------------------------------------------------------*/ /*--------------------------------------VIDEO----------------------------------------------------------------*/ #video { background:url(img/lyftkranWebFull2.jpg) repeat-x #000000; } #video #main-content { width:500px; margin:20px 0px 0px 0px; background:pink ; color: grey; font: 20px Garamond; -webkit-border-radius: 15px;-moz-border-radius: 15px; padding: 15px; } /*-----------------------------------------------------------------------------------------------------------*/ /*--------------------------------------PHOTO----------------------------------------------------------------*/ #photo { background:url(img/brunWebFull.jpg);} #photo #main-content { width:775px; color: grey; font: 20px Garamond; -webkit-border-radius: 15px;-moz-border-radius: 15px; padding: 15px; margin:20px 0px 0px 0px; } /*-----------------------------------------------------------------------------------------------------------*/ /*--------------------------------------SHOP----------------------------------------------------------------*/ #shop { background:url(img/svartWebFull.jpg) repeat-x #000000;} #shop #main-content { width:780px; margin:20px 0px 0px 0px; background:#462709; opacity:1.0; filter:alpha(opacity=100); filter: “alpha(opacity=100)”; color: grey; font: 14px Garamond; -webkit-border-radius: 15px;-moz-border-radius: 15px; padding: 10px; } .product { border:solid fuchsia 1px; text-align: center; padding: 15px; width: 214px; height: 330px; margin:7px; float:left;} /*-----------------------------------------------------------------------------------------------------------*/ /*--------------------------------------CONTACT----------------------------------------------------------------*/ #contact { background:url(img/boatCargo.jpg) repeat-x #000000;} #contact #main-content { width:500px; margin:20px 0px 0px 130px; background:#462709; opacity:.80; filter:alpha(opacity=80); filter: “alpha(opacity=80)”; -webkit-box-shadow: 5px 5px 7px #454545; color: grey; font: 20px Garamond; -webkit-border-radius: 15px;-moz-border-radius: 15px; padding: 15px; } /*-----------------------------------------------------------------------------------------------------------*/ /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */ .aligncenter { display:block; margin:0 auto } .alignleft { float:left } .alignright { float:right } .wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px } /* You might find the following useful */ /* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */ br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */ /* TYPOGRAPHY */ /* ----------------------------------------- */ h1, h2, h3, h5, h5, h6 { font-weight:bold } /* This helps to identify headings at the initial build stage, so I thought it'd be useful to have it */ .alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes.