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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body {
	background: #fff url(/images/whiteStoneBg.jpg) center;
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	color: #3b3b3b;
	text-align: center;
}

h2{
font-size: 1.8em;
}

.headlineWrap{
width: 565px;
margin-bottom: 20px;
background: url(/images/headlineBg.gif) repeat-x center;
}

#inner .contentLeft h2{
display:inline;
padding: 0 15px 0 0;
font-weight: bold;
background: #f1f0ee;
}


#inner .contentLeft a{
color: #5a8aa1;
}
#inner .contentLeft a:hover{
text-decoration: none;
}
#inner .contentLeft a:visited{
color: #999;
}

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

.header{
height: 77px;
background: url(/images/topBg.jpg) repeat-x;
}

/* --------------DROPDOWNS------------- */
#topnav{
list-style: none;
width: 986px;margin:0 auto;z-index: 999 !important;
}

#topnav .headLink{
float: left;
background:url(/images/innerNav.gif); 
height:56px; 
text-indent: -9999em
}
#topnav .headLink a{
display: block;
height: 62px;
}
#topnav #home, #topnav #home_active{
width: 62px;
}
#topnav #home:hover{
background-position: 0 -76px;
}
#topnav #home_active{
background-position: 0 -152px;
}


#topnav #story, #topnav #story_active{
width: 92px;
background-position: -62px 0;
}
#topnav #story:hover{
background-position: -62px -76px;
}
#topnav #story_active{
background-position: -62px -152px;
}


#topnav #journey, #topnav #journey_active{
width: 108px;
background-position: -154px 0;
}
#topnav #journey:hover{
background-position: -154px -76px;
}
#topnav #journey_active{
background-position: -154px -152px;
}


#topnav #resources, #topnav #resources_active{
width: 92px;
background-position: -262px 0;
}
#topnav #resources:hover{
background-position: -262px -76px;
}
#topnav #resources_active{
background-position: -262px -152px;
}


#topnav #community, #topnav #community_active{
width: 108px;
background-position: -354px 0;
}
#topnav #community:hover{
background-position: -354px -76px;
}
#topnav #community_active{
background-position: -354px -152px;
}


#topnav #blog, #topnav #blog_active{
width: 50px;
background-position: -462px 0;
}
#topnav #blog:hover{
background-position: -462px -76px;
}
#topnav #blog_active{
background-position: -462px -152px;
}


#topnav #contact, #topnav #contact_active{
width: 74px;
background-position: -512px 0;
}
#topnav #contact:hover{
background-position: -512px -76px;
}
#topnav #contact_active{
background-position: -512px -152px;
}

/* Child lists and links */
#topnav li.headLink ul { 
list-style: none;
text-align: left; 
width: 260px;
position: relative;
z-index: 90;
background: #000;
border-left: 1px solid #adc3d0;
border-right: 1px solid #adc3d0;
margin: -6px 0 0 -1px;
display: none;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
padding: 0px;
}
#topnav li.headLink ul li{
text-indent: 0;
}
#topnav li.headLink ul li a { 
padding: 5px; 
display: inline;
height: 17px; 
font-family: arial;
font-size: 12px;
text-decoration: none;
display: block;
border-bottom: 1px solid #adc3d0;
color: #fff;
}
#topnav li.headLink ul li a:hover { background-color: #222;color: #fff;border-color: #adc3d0; }



/* --------------DROPDOWNS------------- */
.message{
height: 244px;
background: #000 url(/images/topBlackBg.jpg) no-repeat center;
}

#inner .message{
background: #000 url(/images/topBlackBgInner.jpg) no-repeat center;
}

#main {padding-bottom: 150px;
border-top: 10px solid #7aacc1;
}  /* padding must be same height as the footer */

.content{
width: 986px;
margin: 0 auto;
}

.contentLeft{
float: left;
text-align: left;
width: 589px;
}

p{line-height: 1.5;}

#inner .contentLeft{
width: 568px;
padding: 20px;
margin: -221px 0 0 -18px;
border: 1px solid #fff;
line-height: 1.5;
min-height: 275px;
background: url(/images/contentBg.jpg) repeat-y;
}

#inner .contentLeft p, #inner .contentLeft ul{
margin: 0 0 20px 0;
}

#inner .contentLeft ul{
list-style-type: none;
margin-left: 10px;
}

#inner .contentLeft li{
padding: 0 0 0 20px;
background: url(/images/iconBullet.gif) no-repeat 0 8px;
}

#rotate{
width: 638px;
height: 313px;
overflow: hidden;
background: url(/images/rotateBg.png) no-repeat;
margin: -254px 0 0 -27px;
}

#rotate img{
margin: 25px 0 0 32px;
}

.recentBlog{
width: 585px;
height: 29px;
text-indent: -9999em;
margin: 15px 0 18px 0;
background: url(/images/headlineRecentBlog.gif) no-repeat;
}

h3{
color: #5889a0;
font-weight: bold;
font-size: 22px;
}

h4{
font-size: 14px;
margin-bottom: 7px;
}

h5{
color: #5a8aa1;
font-size: 18px;
margin-top: 12px;
}

.first{
border-bottom: 3px solid #7aabc1;
padding: 0 0 19px 0;
margin: 0 0 19px 0;
}

.second{
padding: 0 0 30px 0;
}

.viewAll{
display:block;
width: 575px;
height: 18px;
text-indent: -9999em;
padding: 0 0 40px 0;
background: url(/images/viewAll.gif) no-repeat;
}

.contentRight{
float: right;
}

.infoBox{
width: 386px;
height: 436px;
margin: -331px -6px 0 0;
background: url(/images/infoBox.jpg) no-repeat center 0;
}

#inner .infoBox{
background: url(/images/infoBoxInner.jpg) no-repeat center 0;
}

.infoBox h1 a{
display:block;
height: 110px;
text-indent: -9999em;
}

.learnMore, .support{
display:block;
position: relative;
top: 290px;
left: 47px;
width: 120px;
height: 45px;
text-indent: -9999em;
background: url(/images/learnMore.png) no-repeat;
}

.support{
width: 172px;
top: 245px;
left: 167px;
background-position: -120px 0;
}

.learnMore:hover{background-position: 0 -44px;}
.support:hover{background-position: -120px -44px;}

.innerRotate{
margin-left: 9px;
margin-top: 1px;
}

#video{
width:366px;
height: 207px; 
margin: 53px 0 0 9px;
padding-top: 44px;
background: url(/images/videoPlaceHolder.gif) no-repeat;
}
#video a{
display:block;
text-indent: -9999em;
height: 206px;
}
.newsletter{
width: 366px;
height: 116px;
margin: 25px 0 25px 9px;
text-align: left;
background: url(/images/emailBg.gif) no-repeat;
}
.newsletter input{
float: left;
border: 0;
margin: 48px 0 0 17px;
height: 40px;
width:217px;
padding: 10px;
color: #c3c2c2;
font-size: 16px;
outline: 0;
background: transparent;
}
.emailSubmit{
display:block;
float: left;
position: relative;
top: 59px;
margin: -1px 0 0 7px;
width: 94px;
cursor: pointer;
height: 42px;
text-indent: -9999em; 
}
span.emailSubmit:hover{
background: url(/images/submitOver.gif) no-repeat; 
}

#footer {
position: relative;
margin-top: -177px; /* negative value of footer height */
height: 177px;
clear:both;
background: #000 url(/images/footerBg.jpg) repeat-x center;
}

.footerContain{
width: 986px;
text-align: left;
margin: 0 auto;
color: #ccc;
font-size: 14px;
line-height: 1.7;
}
.footerContain a{color: #ccc;}
.footerContain a:hover{color: #fff;}
.ftrLeft{float:left;margin-top: 32px;}
.ftrLeft a:first-child{margin-left:0px;}
.ftrLeft a{text-decoration: none;margin-left: 6px;margin-right: 6px;}
.ftrRight{float:right;margin: 72px 160px 0 0;}
.csLogo{
display:block;
width: 124px;
height: 28px;
text-indent: -9999em;
margin-top: 7px;
background: url(/images/csLogo.gif) no-repeat;
}
.csLogo:hover{background-position: 0 -28px;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*----- image positioning -------*/

.imgLeft{
float:left;
margin: 6px 15px 0 0;
}
.imgRight{
float:left;
margin: 6px 0 0 15px;
}


/*----- Contact Form -------*/

#contactForm input[type="text"], #contactForm textarea{
border: 2px solid #7aabc1;
width: 300px;
height: 25px;
color: #666;
font-family: arial, sans-serif;
padding: 5px 5px 0 5px;
font-size: 1em;
}
#contactForm textarea{
height: 150px;
width: 550px;
}
.submit{
width: 94px;
height: 43px;
text-indent: -9999em;
cursor: pointer;
background: url(/images/submitBg.gif) no-repeat;
}

/*----- Store -------*/

.products-box{
margin: 15px 0;
float: left;
width: 100%;
padding-bottom: 30px;
border-bottom: 10px solid #7aabc1;
}
.products-box img{
float: right;
padding: 1px;
background: #7aabc1;
border: 5px solid #5b8ba2;
}

/*----- Blog -------*/

.blogRight{
text-align: left;
margin-top: 40px;
padding: 0 0 0 20px;
}

.blogRight h3{
padding-bottom: 10px;
border-bottom: 5px solid;
}
.blogRight a{
color: #555;
}
.blogRight a:hover{
text-decoration: none;
}
.blogRight a:visited{
color: #999;
}
.blogSep{
height: 5px;
margin: 20px 0 20px 0;
background: #5a8aa1;
}
