/*
Theme Name: 	Alpha Vitality
Theme URI: 		http://cattails.ca
Description: 	Custom Theme
Version: 		1.0
Author: 		Cattails Multimedia Inc.
Author URI: 	http://cattails.ca
Tags: 			starkers, naked, clean, basic
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/reset.css";
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow:400,700,700italic,400italic);

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

14 / 16	= 		0.875em 		(14px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)

*/

body,
input,
textarea 			{ /* We strongly recommend you declare font-weight using numerical values, but check to see which weights you're exporting first */ }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ }



.alignright{ float:right; padding:0 0 10px 10px; }
.alignleft{ float:left; padding:0 10px 10px 0; }

body {
	background: url(images/blueBarBG.gif) repeat-x top #fff;
	margin: 0;
	padding: 0;
	height:100%;
}

html{
	height:100%;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
	color:#00aec4;
}
a:visited {
	text-decoration: none;
	color:#00aec4;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: underline;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */

#mainContainer, #headerWrapper, #bannerWrapper, #contentWrapper{
	width:100%;
}

header, #bannerContainer, #contentContainer{
	width:1000px;
	margin:0 auto;
}

#mainContainer{
	position:relative;
	min-height: 100%;
}

#headerWrapper{
	position: absolute;
	top:0;
	height: 251px;
	background: url(images/curveHeader-long.png) no-repeat center 31px;
	z-index:10;
}

#bannerWrapper{
	height: 645px;
	background: url(images/blueBannerBG.jpg) repeat-x bottom;
	position:relative;
}

#contentWrapper, #detailWrapper{
	background: url(images/bottomContentBG.jpg) repeat-x top;
	position:relative;
	min-height:400px;
}

#detailWrapper{
	padding-top:200px;
	background-position:0 190px;
}

header{
	height:197px;
	position:relative;
}

a#logo{
	display:block;
	width:186px;
	height: 186px;
	float:left;
	background: url(images/Alpha-Vally--Logo.png) no-repeat;	
	margin-top:10px;
}

#topBar, nav#mainMenu, h1{
	float:right;
	width:790px;
	padding:0;
	margin:0;
}

#topBar{
	height: 30px;
	position:relative;
}

#topBar ul{
	list-style:none;
	padding:0;
	margin:0;
	position:absolute;
	right:0;
}

#topBar ul li{
	float:left;	
}

#topBar form{
	padding:0;
	margin:0;
}

#topBar form input{
	float:left;
}

#topBar form input.searchBar{
	height: 16px;
	width: 132px;
	padding:3px;
	margin:3px;
	border:1px solid #eee;
	font-size:12px;
}

#topBar a.twitter, #topBar a.fb, #topBar a.rss{
	display:block;
	height: 29px;
	width: 29px;	
}

#topBar a.twitter{
	background: url(images/twitterIcon.png) no-repeat;
}

#topBar a.fb{
	background: url(images/facebookIcon.png) no-repeat;
}

#topBar a.rss{
	background: url(images/rssIcon.png) no-repeat;
}

nav#mainMenu{
	height:34px;
	padding-left:1px;
}

nav#mainMenu ul{
	list-style:none;
	margin:0;
	padding:10px 0 0 0;
	font-family: 'Archivo Narrow', sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:bold;
}

nav#mainMenu ul li{
	float:left;
	margin:0 65px 0 0;
}

nav#mainMenu ul li:last-child{
	margin:0;
}

nav#mainMenu ul li.orange{
	margin-right:0;	
}

nav#mainMenu ul li a{
	color:#00aec4;
}

nav#mainMenu ul li a:hover{
	color:#f15e28;
	text-decoration:none;
}

h1{
	display:block;
	font-family: 'Archivo Narrow', sans-serif;
	padding:20px 0 0 0;
	margin:0;
	color: #00aec5;
	font-weight:normal;
	text-transform: uppercase;
	font-size:42px;
	line-height:45px;
}

h1 span{
	font-weight:700;
	font-size:51px;
}

#bannerContainer{
	position:relative;
	height:455px;
	padding-top:190px;
}

a.prev, a.next{
	display:block;
	width:55px;
	height:84px;
	position:absolute;
	top: 375px;
	z-index:20;
}

a.prev{
	background:url(images/prevArrow.png) no-repeat;
	left: 15px;
}

a.next{
	background:url(images/nextArrow.png) no-repeat;
	right: 15px;
}

.bannerNav{
	z-index:20;
	position:absolute;
	bottom:67px;
	height:7px;
	left: 105px;
}

.bannerNav a { 
	display:block;
	width:8px;
	height:7px;
	background: url(images/bannerNavDots.png) no-repeat;
	background-position: -18px 0;
	text-indent:-9999px;
	float:left;
	margin:0 3px;
}

.bannerNav a.activeSlide { 
	background-position: 0px 0;
}

.banner{
	display:block;
	height:455px;
	width:1000px;
}

.banner:hover{
	text-decoration:none;
}

.bannerText{
	text-transform:uppercase;
	font-family: 'Archivo Narrow', sans-serif;
	color:#fff;
	padding:115px 105px 0 105px;
}

.bannerTextLg{
	font-size:55px;
	font-weight:700;
	padding:0 0 10px 0;
	margin:0;
	line-height:55px;
}

.bannerTextMd{
	font-size:55px;
	font-weight:normal;
	padding:0;
	margin:0;
	line-height:55px;
}

#homeContent{
	width:555px;
	padding:40px 30px;
	float:left;
}

#detailContent{
	width:100%;
	float:none;
	padding:40px 30px;
}

#homeContent h2, #homeContent h3, #detailContent h2, #detailContent h3, .price{
	padding:0 0 10px 0;
	margin:0;
	color:#f26531;
	font-size:22px;
	font-weight:700;
	font-family: 'Archivo Narrow', sans-serif;
	text-transform:uppercase;
}

#homeContent h3, #detailContent h3, .price{
	font-size:17px;
	padding:0;
}

#detailContent span.price{
	padding-top:0px;
}

#homeContent p, #homeContent li, #detailContent p, #detailContent li{
	font-family:Arial, Helvetica, sans-serif;
	color:#444444;
	font-size:14px;
	line-height:19px;
	padding:10px 0;
	margin:0;
}

#homeContent ul, #detailContent ul{
	margin-left:50px;
}

#homeContent li, #detailContent li{
	list-style:disc;
}

.greyBox{
	-webkit-border-radius: 10px;
    border-radius: 10px;
	padding: 15px;
	-webkit-box-shadow:  2px 2px 3px 3px rgba(0, 0, 0, .3);
    box-shadow:  2px 2px 3px 3px rgba(0, 0, 0, .3);
	text-align:center;
	border: 1px solid #fff;
	font-family:Arial, Helvetica, sans-serif;
	color:#444444;
	font-size:14px;
	font-style:italic;
	background:#a3e5f3;
	margin:15px 0;
	font-weight:bold;
	line-height:19px;
}

.redButtonLg, .redButtonLg:link, .redButtonLg:visited, form#commentform input#submit{
	display:block;
	width:200px;
	height:37px;
	border: 2px solid #fff;
	font-family: 'Archivo Narrow', sans-serif;
	color:#fff;
	text-transform:uppercase;
	font-size:16px;
	text-align:center;
	background:url(images/redButtonBg.jpg) repeat-x;
	-webkit-border-radius: 10px;
    border-radius: 10px;
	padding: 19px 0 0 0;
	-webkit-box-shadow:  2px 2px 3px 3px rgba(0, 0, 0, .3);
    box-shadow:  2px 2px 3px 3px rgba(0, 0, 0, .3);
}

form#commentform input#submit{
	padding:0;
	width:150px;
}

.redButtonLg:hover{
	opacity:.8;
	text-decoration:none;
}
	

#newsRoll, #sideBar{
	width:325px;
	padding:40px 30px;
	float:right;
}

#newsRoll h3{
	font-family: 'Archivo Narrow', sans-serif;
	font-size: 22px;
	font-weight:700;
	color: #00aec5;
	padding:0;
	margin:0;
	text-transform:uppercase;
}

.newsItem{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#444444;
	line-height:19px;
	padding:15px 0;
	border-bottom: 1px #444 dashed;
}
	
.newsItem p{
	padding:0;
}

.newsItem a{
	color:#444;
	font-weight:bold;
}

footer{
	text-align:center;
	padding:12px 0;
	background:#00aec4;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	position:absolute;
	bottom:0;
	z-index:10;
	width: 100%;
}

footer a:link, footer a:visited{
	color:#fff;
}

.sideBoxContainer{
	border-bottom: 1px dashed #444;
	padding:10px 0;
	width:247px;
	display:none;
}

.sideBoxContainer:last-child, article:last-child{
	border-bottom:none;
}

.sideBox{
	width:207px;
	-webkit-border-radius: 10px;
    border-radius: 10px;
	border: 1px solid #ccc;
	padding:10px 20px;	
}

.sideBox h5{
	color:#fff;
	font-family: 'Archivo Narrow', sans-serif;
	font-weight:normal;
	font-size:24px;
	text-align:center;
	padding-bottom:30px;
}

.sideBox p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#444;
	line-height:17px;
	padding-bottom:10px;
}

.sideBox a.readMore{
	background:#f15e28;
	padding:4px 8px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-transform:uppercase;	
	-webkit-border-radius: 5px;
    border-radius: 5px;
	float:right;
}

.blueBox{
	background:url(images/blueBoxTop.png) no-repeat top center #fff;
}

.greenBox{
	background:url(images/greenBoxTop.png) no-repeat top center #fff;
}

.pinkBox{
	background:url(images/pinkBoxTop.png) no-repeat top center #fff;
}

/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure {
	display: block;
}

.clear{
	clear:both;
}

time, .commentLink{
	font-size:10px;
	font-family:Arial, Helvetica, sans-serif;
}

article{
	padding:10px 0;
	border-bottom:1px solid #ccc;
}

#respond label{
	display:block;
	padding:6px 0;
	font-family: 'Archivo Narrow', sans-serif;
	font-weight:normal;
	font-size:15px;
}

textarea#comment{
	width:100%;
}

div#comments li{
	list-style:none;
}

div#comments li article{
	-webkit-border-radius: 10px;
    border-radius: 10px;
	padding: 15px;
	border-bottom: 1px solid #fff;
	font-family:Arial, Helvetica, sans-serif;
	color:#444444;
	font-size:14px;
	background:#e0e0e0;
	margin:15px 0;
	line-height:19px;
	clear:both;
}


div#comments li article img.avatar{
	float:left;
	padding:0 10px 10px 0;
}

div.sociable{
	margin:20px 0;
}

div.sociable_tagline{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#444444;
}

div.sociable a{
	margin-right:8px;
}

.programBox{
	padding:20px;
	border-bottom:1px solid #aaa;
	border-left:1px solid #aaa;
	border-right:1px solid #aaa;
	background:#fff;
}

.topBox{
	border-top:1px solid #aaa;
}
	

/* ---------------------------------------------------------------------------------------------------------- 
03 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

/* 400 and up */
@media screen and (min-width:400px) {

					{ /* Place your styles here for all widths greater than 400px */ }

}

/* Retina Display */
@media screen and (-webkit-min-device-pixel-ratio:2) {

					{ /* Place your styles here for all 'Retina' screens */ }

}