/* 
	Theme Name: HtO
	Theme URL: http://www.hto.ca
	Author: Dejan Cancarevic
	Author URI: dejanc@gmail.com
	Version: 1.0		
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong, b {
font-weight:bold;
}
em, i {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

body {
	background:url(images/body.jpg) center top no-repeat #141414;
	font-size:12px;
	font-family:"Trebuchet MS",arial,Verdana,sans-serif;
	color:#141414;
}

a {
	color:#dc701d;
	text-decoration:none;
}

a:hover {
	color:#dc701d;
}

.wrapper {
	position:relative;
	width:1000px;
	margin:0px auto;
}

#header {
	height:510px;
}

h1 {
	position:absolute;
	top:53px;
	left:-16px;
	z-index:100;
}

h1 a{
	display:block;
	width:262px;
	height:175px;
	text-indent:-9999pt;
	background:url(images/logo.png) left top no-repeat;
}

#menu {
	background:url(images/menu.png) left top no-repeat;
	position:absolute;
	width:620px;
	height:166px;
	z-index:102;
	top:365px;
	left:-6px;
}

#menu ul{
	list-style:none;
}

#menu ul li{
	display:inline-block;

}

#menu ul li a{
	display:block;	
	position:absolute;
	left:0px;
	top:0px;
	width:40px;
	height:10px;
	padding:15px;
}

#menu ul li a span{
	position:absolute;
	display:none;
	background:url(images/krug.png) left top no-repeat;
	width:79px;
	height:38px;
	margin:-10px 0 0 -25px;
}

#menu ul li a:hover span{
	display:block;
}

#menu ul li.active a span{
	display:block;
}

#menu ul li.home a{	
	left:57px;
	top:41px;
}

#menu ul li.surf a{	
	left:127px;
	top:50px;
}

#menu ul li.swim a span{	
	margin:-10px 0 0 -33px;
}

#menu ul li.swim a{	
	left:202px;
	top:60px;
}

#menu ul li.skate a{	
	left:267px;
	top:70px;
}

#menu ul li.shop a{	
	left:342px;
	top:80px;
}

#menu ul li.shop a span{	
	margin:-13px 0 0 -33px;
}

#menu ul li.lifestyle a{	
	left:410px;
	top:90px;
}

#menu ul li.lifestyle a span{	
	margin:-11px 0 0 -15px;
}

#menu ul li.contact a{	
	left:506px;
	top:102px;
}

#menu ul li.contact a  span{	
	margin:-11px 0 0 -15px;
}

#mainimg {
	background:url(images/underimage.png) left top no-repeat;
	width:779px;
	height:466px;
	position:absolute;
	z-index:90;	
	top:29px;
	left:12px;
	padding:50px 0 0 19px;

}

#shade {
	position:absolute;
	background:url(images/overimage.png) left top no-repeat;
	width:777px;
	height:450px;
	top:38px;
	left:10px;
	z-index:95;
}

#side {
	position:absolute;
	width:197px;
	height:471px;
	top:66px;
	left:796px;
	z-index:80;	
}

.homeside {
	background:url(images/sidehome.png) left top no-repeat;
}

.surfside {
	background:url(images/sidesurf.png) left top no-repeat;
}

.swimside {
	background:url(images/sideswim.png) left top no-repeat;
}

.contactside {
	background:url(images/sidecontact.png) left top no-repeat;
}

.skateside {
	background:url(images/sideskate.png) left top no-repeat;
}

.lifestyleside {
	background:url(images/sidelifestyle.png) left top no-repeat;
}

#main {
	background:url(images/mainbg.jpg) left top repeat-y;
	width:740px;
	margin:0 0 0 50px;
	
}	

#content {
	width:650px;
	padding:45px 45px 0 45px;
	background:url(images/bluecurve.png) right top no-repeat;
	position:relative;
}

#main p{
	line-height:17px;
	margin:0 0 20px 0;
	
}

#main p.down{
	position:absolute;
	color:#8e8e8e;
	padding:20px 0 0 0;		
}

#main a:hover{
	text-decoration:underline;	
}

h2 {
	height:31px;
	width:500px;
	text-indent:-9999pt;
	margin:0 0 17px 0;
	background-repeat:no-repeat;
	background-position:left;
}

h2.welcome {
	background-image:url(images/welcome.png);
}

h2.htosurf {
	background-image:url(images/htosurf.png);
	height:36px;
}

h2.htoswim {
	background-image:url(images/htoswim.png);
	height:32px;
}

h2.htocontact {
	background-image:url(images/htocontact.png);
}

h2.theshop {
	background-image:url(images/theshop.png);
	height:46px;
}

h2.htoskate {
	background-image:url(images/htoskate.png);
	height:32px;
}

h2.htolifestyle {
	background-image:url(images/htolifestyle.png);
	height:45px;
	margin:0 0 5px 0;
}

h2.htoboards {
	background-image:url(images/htoboards.png);
	height:33px;
}

h2.htosections {
	background-image:url(images/htosections.png);
	height:33px;
}

h3 {
	height:22px;
	width:500px;
	text-indent:-9999pt;
	margin:10px 0 10px 0;
	background-repeat:no-repeat;
	background-position:left;
}

h3.whatsnew {
	background-image:url(images/whatsnew.png);
}

#main ul {
	color:#36679f;
	margin:0 0 0 28px;
}

#main ul li{
	list-style-image:url(images/bullet.png);
	padding:3px 0;

}

.cut {
	background:url(images/cut.png) left top no-repeat;
	width:12px;
	height:45px;
	position:absolute;
	top:90px;
	left:0px;	
}

#footer {
	width:755px;
	margin:-100px 0 0 43px;
	background:url(images/footer.png) left top no-repeat;
	text-align:center;
	padding:230px 0 50px 0;
}

#footer div{
	margin:-12px 0 0 0;
}

#main a.bordovi {
	width:145px;
	height:135px;
	display:block;
	text-indent:-9999pt;
	position:absolute;
	background:url(images/bordovi.gif) left top no-repeat;
	left:460px;
	top:50px;
	
}

#main a.bordovi:hover {	
	background:url(images/bordovi.gif) left bottom no-repeat;	
	
}

#main a.odela {
	width:145px;
	height:135px;
	display:block;
	text-indent:-9999pt;
	position:absolute;
	background:url(images/odela.png) left top no-repeat;
	left:530px;
	top:150px;	
}

#main a.odela:hover {	
	background:url(images/odela.png) left bottom no-repeat;	
	
}