/*-------------------------------------------------------
* Filename: styles.css
* Version: 1.0.0
* Website: http://www.themeflash.com
* Author: system32
* Description: Handles the site layout.
-----------------------------------------------------*/

/* Global Reset
------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 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, 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;  
}   

body{  
	font:normal 11px/20px  "Trebuchet MS", Tahoma, Arial, sans-serif;
	color:#b0b0b0;
	background:#fa8306 url(../../h4th/images/bg.jpg) top center; 
}
body p {
	color:#666666;
	font:normal 14px  "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.scroll-pane ul li {
	color:#666666;
	font:normal 14px  "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.scroll-pane a {
	color:#39CE0C;
	text-decoration:underline;
	font-weight:bold;
	}
.clear {
	clear:both; 
}

.fr	{
	float:right;
}

.fl{
	float:left;
}

.imgleft{
margin-right:20px;
margin-bottom:20px;
}

.imgright{
margin-left:20px;
margin-bottom:20px;
}
/*******************
Scroll
********************/

 #pane1  {	width:900px; height:800px;}
 #pane2  {	width:900px; height:800px;}
 #pane3  {	width:900px; height:800px;}
 #pane4  {	width:900px; height:800px;}
 #pane5  {	width:900px; height:800px;}
 #pane6  {	width:900px; height:800px;}
 #pane7  {	width:900px; height:800px;}
 #pane8  {	width:900px; height:800px;}
 
 

.left .jScrollPaneTrack 		{	left: 0;right: auto;}
	.left a.jScrollArrowUp 		{	left: 0;right: auto;}
	.left a.jScrollArrowDown 	{	left: 0;right: auto;}


/*******************
HEADINGS 
********************/
h1{
	margin:0;
	padding: 0px 0 0 0px;
	color:#18191b;
	font:normal 28px/34px "Trebuchet MS", Tahoma, Arial, sans-serif;
	letter-spacing:-1px;
}

h2{
	margin:0;
	padding:0px;
	color:#18191b;
	font:normal 25px/30px "Trebuchet MS",Tahoma, Arial, sans-serif;
	letter-spacing:-1px;
}
h3{
	padding:0px;
	color:#fa8306;
	font:normal 20px "Trebuchet MS",Tahoma, Arial, sans-serif;
	letter-spacing:-1px;
	
}
h4{
	margin:0;
	padding:0px;
	color:#18191b;
	font:normal 18px/22px "Trebuchet MS",Tahoma, Arial, sans-serif;
	letter-spacing:0px;
}

h5{
	margin:0;
	padding:0px;
	color:#666666;
	font:normal bold 14px "Trebuchet MS",Tahoma, Arial, sans-serif;
}
h6{
	margin:0;
	padding:0px;
	color:#18191b;
	font:normal bold 10px/16px "Trebuchet MS",Tahoma, Arial, sans-serif;
}

p{
	font:normal 11px/20px  Tahoma, "Trebuchet MS", Arial, sans-serif;
	color:#18191b;
	margin:0 0 10px 0;

}

a{
	text-decoration:none;
	color:#18191b;
}
a:hover{
	color:#515151; 
	 	text-decoration:none;
	 
}

a.readmore{
	color:#fff; 
	background:#18191b;
	border:1px solid #343539;
	font-size:9px;

	padding: 4px 10px;
	text-decoration:none;
	text-transform:uppercase;
}
a.readmore:hover{
	text-decoration:none;
	color:#fff;
	padding: 4px 10px;
	border:1px solid #343539;
	background:#9f9f9f;
}

/*************************
header
************************/
#pagewrap{
	width:1000px;
	margin-right:auto;
	margin-left:auto;
}

.header{
	width:780px;
	height:150px;
	margin:10px auto;
	text-align:center;
	}

	.header img.logo{
	margin:10px 0;
	}

#main_background{ 
	background:	url(../../h4th/images/bg2.png) 0 0 no-repeat;
	width:980px;
	position:relative;
	display:block;
	height:800px;
	margin-left:auto;
	margin-right:auto;
	}
	
.social_links{
	height:80px;	 
	margin:0 10px 0 0;
	text-align:right;
}
/****************************
		menu
*****************************/
.about, .canadiandrive, .images, .videos, .links, .getinvolved, .badges {
	background: transparent url(../../h4th/images/menucontent.png) no-repeat;
	border:0px none;
	display: block;
	float: left;
	height: 27px;
}
.about {
	background-position: 0px 0px;
	width: 170px;
}

.about:hover, .about.jFlowSelected {
	background-position: 0px -27px;
		width: 170px;
}
.canadiandrive {
	background-position: -169px 0px;
		width: 130px;
}
  .canadiandrive:hover, .canadiandrive.jFlowSelected {
	background-position: -169px -27px;
		width: 130px;
}
.images {
	background-position: -298px 0px;
		width: 75px;
}
  .images:hover, .images.jFlowSelected {
	background-position: -298px -27px;
		width: 75px;
}
.videos {
	background-position: -371px 0px;
		width: 69px;
}
  .videos:hover, .videos.jFlowSelected{
	background-position: -371px -27px;
		width: 69px;
}


.links {
	background-position: -440px  0px;
		width: 65px;
}
  .links:hover, .links.jFlowSelected {
	background-position: -440px -27px;
		width: 65px;
}

.getinvolved {
	background-position: -505px  0px;
		width: 95px;
}
  .getinvolved:hover, .getinvolved.jFlowSelected {
	background-position: -505px -27px;
		width: 95px;
}

.badges {
	background-position: -600px  0px;
		width: 140px;
}
  .badges:hover, .badges.jFlowSelected {
	background-position: -600px -27px;
		width: 140px;
}
	
	

/*************************
content
************************/
.content{
	padding:30px;
	height:700px;
	}
	.content h3 {
			margin-bottom:10px; 
			color:#fa8306;
			}

/*************************
footer
************************/

.footer{
	width:537px;
	height:45px;
	padding: 5px 0 0 0;
	background:url(../../h4th/images/footer.png) top center;
	color:#fff;
	margin:auto;
	text-align:center; 
	line-height:14px;
	}
	
	.footer a{
	text-decoration:none;
	color:#fa8306;
}
.footer a:hover{
	color:#FFFFFF; 
	 	text-decoration:none;
	 
}
/*************************
workspage
************************/

.imgborder {
	border:1px solid #424547;
	padding:3px;
}

.panel {
	clear:both;
	display:block;
	width:100%x;
	overflow:hidden;
	height:100%;
	margin:10px 0;
	padding:10px 0;
	border-bottom:1px solid #424547;
}
.thumb {
	width:250px;
	float:left;
	margin:0 30px 0px 0;
}
.details {
	width:360px;
	float:left;
}

/*************************
contact page
************************/

.location {
	float:left;	
	width:45%;
}



#contactarea {
	width:340px;
	margin:0px auto;
	margin-right:10px;
	text-align:left;
	padding:5px;
	float:left;
}

.inputbox {
	border: 1px solid #424547;
	background:#fff;
	width: 270px;
	color:#18191b;
	margin:2px 0;
	padding: 4px;
}

.inputlabel {
	width:100px;
	color:#18191b;
	display:inline-block;
}

#textarea {
	border: 1px solid #424547;
	background:#fff;
	color:#18191b;
	width:270px;
	margin:2px 0;
	padding: 4px;
}

#submitbutton {
	border: 1px solid #424547;
	background:#18191b;
	margin:2px 0;
	color:#fff;
	padding: 4px;
	cursor:pointer;
}
/************************************************
                      Definition List                  
************************************************/
 dl { 
 	padding: 0;
	color:#18191b; 
	}
	dt { 
	float: left; 
	clear: left; 
	width: 70px; 
	text-align: left; 
	font-weight: bold; 
	} 
	dt:after { 
	content: " "; 
	} 
	dd:before { 
	content: " : "; 
	padding-left:0px;
	} 
	dd { 
	margin: 0 0 0 80px; 
	padding: 0 0 1px 0; 
	}


/*******************************************************
  				Error / Success / Notice	
*******************************************************/

.notes 	{background: #f0f0f0;border: 1px solid #b8b8b8;}
.success 	{background: #ccfcd1;border: 1px solid #60a400;}
.error	{background: #f9e3e3;	border: 1px solid #e79e9e;}
.notice 	{background: #fcf0cc;border: 1px solid #ecc735;}
	.notes, .notice, .success, .error 
		{font-size: 100%;color:#484848;padding:10px;width:auto;margin: 0 0 20px 0px; text-align:left}
	.notes span, .notice span, .success span, .error span 
		{font-weight: bold;font-size: 1.2em;padding: 2px 40px;}
	.notes p, .success p, .error p, .notice p 
		{margin: 0px;padding: 0px 40px;}


/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(../../h4th/css/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../../h4th/css/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../../h4th/css/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(../../h4th/css/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}


/*Sample CSS for the demo boxes below. Refined from rssdisplaybox.css above*/

#cssdriveid{
width: 800;
padding: 10px;
border: 0px;
}

#cssdriveid .rsscontainer{ /*Style for RSS item body within #cssdriveid box*/
margin-bottom: 1em;
}

#bbcid{
width: 300px;
padding: 5px;
background-color: lightyellow;
border: 1px dashed black;
}

#bbcid-paginatediv{ /*Style for auto generated pagination DIV pertaining to #bbcid RSS box*/
width: 300px;
}

#nytimesid{
width: 250px;
height: 200px;
padding: 5px;
background-color: #EDFFD2;
border: 1px solid black;
}

#nytimesid .rsscontainer{ /*Style for RSS item body within #nytimesid box*/
margin-bottom: 10px;
}

#nytimesid .rsscontainer .rsstitle{ /*Style for RSS titles within #nytimesid box*/
font-weight: bold;
}

#nytimesid .rsscontainer .rssdate{ /*Style for RSS dates within #nytimesid box*/
color: red;
}

#cssnewsbox{ /*Style for RSS box for #cssnewsbox box (last demo)*/
width: 500px;
height: 310px;
padding: 10px;
border: 1px dashed black;
}

#cssnewsbox .rsscontainer{
margin-bottom: 1em;
}