/*   
Theme Name: Juela Mogo
Theme URI: http://juelamogo.com.au
Description: A custom WordPress theme for Juela Mogo.
Version: 1.0
Author: BJ2DESIGN
Author URI: http://bj2design.com
Tags: blank, basic, minimal, start, html5
*/

/*
	HTML5 Reset Wordpress Theme :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
	Special thanks: The Wordpress theme owes its start to an empty theme authored 
		by Chris Coyier & Jeff Starr: http://digwp.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {   
	display: block;
    font-size: 1.4em;
    margin-bottom: 20px;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  





/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

body {
	font: 62.5%/1.8em arial, Helvetica, sans-serif;
	color: #2c2c2c;
	background: #6b6b6b url(images/bkg.jpg);
	}

*	{margin:0; padding:0;}

a, a:visited {
	text-decoration: none;
	color:#ac2f07
	}

a:hover {
	text-decoration: none;
	color: #880046
	}

ul{
	list-style: none;
	}

a img,:link img,:visited img{
	border:none
	}

img.block{
	display:block;
	border:none
	}
	



/*	POSITION
	--------------------------------*/

#photosbkg, #content, #footer, #credit {
	width: 978px;
	margin: 0 auto; 
	position: relative; 
	overflow:hidden;
	}
	
#brand {
	width: 978px;
	margin: 0 auto; 
	position: relative; 
	}
	
#wrapphotos, #wrapcontent {
	width: 100%;
	position: relative; 
	overflow:visible;
	}
	
	
#wrapcontent {
	background-color:#eaeaea
	}	

#wrapphotos {
	background:url(images/wood.jpg)
	}
	
/*	BRAND
	--------------------------------*/

#brand{
	height:102px;
	}
	
#brand img{
	position:absolute;
	top:0;
	z-index:10
		}
	
#juela{
	float:right;
	color:#676767;
	padding-top:40px;
	font-size:2.4em;
	}
	
/*	NAV
	--------------------------------*/
	
#menu-head{
	position:absolute;
	right:0;
	bottom:0;
	font-size:1.2em;
	text-transform:uppercase;
}
#menu-head:after{
	content:'';
	display:block;
	clear:both;
}
#menu-head {
	list-style:none;
	padding:0 0 0 7px;
	margin:0;
}
#menu-head  li{
	background:url(images/bg-bulit.gif) no-repeat 0 50%;
	float:left;
	line-height:32px;
	font-weight:bold;
}
#menu-head  li:first-child{
	background:none;
}
#menu-head li:hover{
	position:relative;
}
#menu-head li a{
	color:#fff;
	display:block;
	padding:0 8px 0 10px;
}
#menu-head li a:hover{
	text-decoration:none;
	background:#004269;
	margin:0 0 0 2px;
	padding:0 7px 0 9px;
}
#menu-head >li:hover>a{
	background:#004269;
	margin:0 0 0 2px;
	padding:0 8px;
}
#menu-head li ul{
	display:none;
	position:absolute;
	top:31px;
	left:2px;
	width:160px;
	z-index:100;
	background:#0066a4;
	padding:0;
}
#menu-head  li:hover ul{
	display:block;
}
#menu-head li ul li a{
	display:block;
	height:100%;
    line-height: 14px;
    padding: 6px 0 6px 7px;	
}
#menu-head li ul li{
	float:none;
	background:none;
	vertical-align:top;
	line-height:27px;
	padding:0;
	border-bottom:1px solid white;
}
#menu-head li ul li a:hover{
	background:#004269;
	text-decoration:none;
	margin:0;
	line-height: 14px;
    padding: 6px 0 6px 7px;	
}
 
	
/*  PHOTOS BKG
	--------------------------------*/

#photosbkg{
	height:348px;
	background:url(images/photos.jpg) no-repeat
	}
	
/*	PHOTOS
	--------------------------------*/

#photos{
	width:218px;
	height:218px;
	position:relative;
	top:77px;
	left:16px;
	}
	
#photos img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#photos img.active {
    z-index:10;
    opacity:1.0;
}

#photos img.last-active {
    z-index:9;
}

	
	
/*	WRAP CONTENT
	--------------------------------*/

#wrapcontent{
	AAA
	}
	
/*	CONTENT
	--------------------------------*/

#content{
	AAA
	}
	
/*	MAIN CONTENT
	--------------------------------*/

#maincontent{
	float:left;
	width:642px;
	padding:50px 0 25px;
	}
	
#maincontent h1{
	font-size:4.4em;
	line-height:1.4em;
	padding:0 0 20px 10px;
	font-family: 'Love Ya Like A Sister', Arial, serif;
	}
	
#maincontent h2{
	font-size:2.2em;
	line-height:1.4em;
	padding-bottom:10px;
	}
	
#maincontent h3 {
    font-size: 1.8em;
    line-height: 1.4em;
    padding-bottom: 6px;
}
	
body.home #maincontent h1+p{
	font-size:2.2em;
	line-height:1.4em;
	color:#ac2f07;
	font-style:italic;
	padding-bottom:20px;
	}
	
#maincontent p{
	font-size:1.6em;
	line-height:1.4em;
	padding-bottom:20px
	}
	
#maincontent p img{
	background-color: #F2F2F1;
    border: 1px solid #C8D0D2;
    padding: 7px;
	}
	
#maincontent ul {
    font-size: 1.6em;
    line-height: 1.4em;
    padding: 0 0 20px 20px;
}

#maincontent ul li{
	padding-left:10px;
	list-style:square
}

/*	archive category
	--------------------------------*/
body.archive #maincontent p, body.category #maincontent p{
	padding-bottom:0;
}
	
/*	SIDEBAR
	--------------------------------*/

#sidebar{
	float:right;
	width:306px;
	padding-top:70px;
	color:grey
	}
	
	
#sidebar h2{
	color:#000;
	font-size:1.8em;
	padding-bottom:10px;
	font-family: 'Love Ya Like A Sister', Arial, serif;
	}
	
#sidebar h3{
	color:#000;
	font-size:1.4em;
	padding-bottom:10px;
	}
	
#sidebar a{
	font-size:1.3em;
	padding-bottom:5px;
	margin-bottom:5px;
	}
	
#sidebar h3 a{
	font-size:1em;
	}
	
#sidebar p{
	font-size:1.3em;
	}
	
#sidebar p a{
	font-size:inherit
	}
	
#randomshop img {
	padding: 5px;
	border: 1px solid #C8D0D2;
	background:#eee
	}
	
#randomshop{
	margin:10px 0 20px;
}

#custombox p, #custombox ul{
	padding-bottom:10px;
}

#custombox li{
	padding-bottom:4px;
}

.enquire, .enquire:visited {
	background-color:#f6b33d;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:16px;
	font-weight:bold;
	padding:8px 18px;
	text-decoration:none;
	text-shadow:1px 1px 0px #cd8a15;
}.enquire:hover {
	background-color:#d29105;
}.enquire:active {
	position:relative;
	top:1px;
}
	
/*	CART
	--------------------------------*/
#Cart66WidgetCartLink {
    border-bottom: 1px solid #C8D0D2;
	}
	
#maincontent .Cart66Price{
	color:red;
	font-size:1.8em;
	}
	
#viewCartTable{
	font-size:1.4em;
	}
	
	
#Cart66ManualGateway_form h2{
	font-size:1.6em;
}

.Cart66CartButton{
	margin-bottom: 20px;
}

#cartstlye{
	margin-bottom:20px;
}


/*	FORM	
	--------------------------------*/
	
body.page-id-26 #maincontent ul li {
	padding-left:0;
	font-size:1.4em
	
}
	
body.page #maincontent ul#gform_fields_1{
	border-top:1px #999892 solid;
	padding-left:0;
	}
	
#maincontent #gforms_confirmation_message{
	font-size:1.4em;
	}
	
#maincontent .gfield_label{
	font-size:0.8em;
	}
	
#maincontent .gform_button{
	font-size:1.8em;
}
	
/*	NEWS BOX 
	--------------------------------*/
	
#maincontent div.newsbox {
	border-top: 1px solid #C8D0D2;
    float: left;
    height: 266px;
    margin-right: 10px;
    margin-top: 15px;
    overflow: hidden;
    padding-top: 15px;
    width: 310px;
}

#maincontent div.newsbox h3{
	font-size:1.6em;
	color:#005d75
	}
	
#maincontent div.newsbox p{
	font-size:1.3em;
	line-height:1.4em;
	padding-bottom:14px;
	}
	
#maincontent div.newsbox img{
	float:left;
	margin-bottom:6px;
	padding:7px;
	border:1px solid #c8d0d2;
	background-color:#e6e6e6
	}
	
/*	FOOTER
	--------------------------------*/

#footer{
	background:url(images/footerline.gif) no-repeat bottom;
	padding-bottom:30px;
	margin-bottom:10px;
	}
	
#credit{
	font-size:1.4em;
	padding-bottom:20px;
}

#credit li{
	float:left;
	padding-right:20px;
}
	
/*	CUSTOM
	--------------------------------*/

#custom{
	float:left;
	width:642px;
	padding-top:30px;
	}
	
#custom h2, #new h2{
	color:#fff;
	padding-bottom:26px;
	margin-bottom:10px;
	background:url(images/underline.gif) bottom left repeat-x
	}
	
#custom li{
	width:306px;
	float:left;
	padding-left:29px;
	padding-top:10px;
	}	
	
#custom li:first-child {
	padding-left:0;
}
	
#custom li.nopad{
	padding-left:0px
	}
	
#custom img{
	padding:7px;
	background-color:#f2f2f1;
	border:1px solid #c8d0d2
	}
	
#custom li h3{
	font-size:1.4em;
	color:#fff
	}
	
#custom p{
	font-size:1.3em;
	line-height:1.4em;
	padding-bottom:14px;
	color:#F4F4F4
	}
	
/*	NEW
	--------------------------------*/

#new{
	float:right;
	width:306px;
	padding-top:30px;
	}
ol {
	list-style:none;
	}
	
ol.slats li {
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #eee;
	}
ol.slats li:last-child {
	margin: 0;
	padding: 0;
	border-bottom: none;
	}
ol.slats li h3 {
	xfont-size: 18px;
	font-weight: bold;
	line-height: 1.1;
	}
ol.slats li h3 a img {
	float: left;
	margin: 0 10px 0 0;
	padding: 4px;
	border: 1px solid #eee;
	background:#eee
	}
ol.slats li h3 a:hover img {
	background: #eee;
	}
ol.slats li p {
	margin: 0 0 0 76px;
	font-size: 1.3em;
	line-height: 1.4;
	color:#F4F4F4
	}
ol.slats li p span.meta {
	display: block;
	font-size: 12px;
	color: #999;
	}				
	

/* Additional styles
-------------------------------------------------------------------------------*/



/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}