/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	
	Screen.css
	* Main stylesheet for controling all CSS styles
	
	Author
	* Sam Howat [sam@avelient.com]
	
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */ 	

	@import "_reset.css"; 
	@import "_type.css"; 
	@import "_grid.css"; 

/* !Body */

body {	
	background-color: #EFEBE3; 
	margin: 0; padding: 0;	
	}
	
	
			
/* !Logos & Special Image Headers */

#grid-header h1 a {
	background: transparent url(../img/logo/samhowat-logo.png) top left no-repeat;
	display: block; float: right;
	width: 130px; 	height: 100px;
	margin: 10px 40px 10px 0; padding: 0;
	text-decoration: none;
	text-indent: -9999px;
	outline: none; 	
	}
	
#grid-header h1 a:hover {
	background: transparent url(../img/logo/samhowat-logo-h.png) top left no-repeat;
	display: block; float: right;
	width: 130px; 	height: 100px;
	margin: 10px 40px 10px 0; padding: 0;
	text-decoration: none;
	text-indent: -9999px;
	outline: none; 	
	}

/* !Grid Styles */

#grid {
	background: transparent url(../img/bg/content-white-bg.png) top left repeat-y;
	}
	

	
/* !Grid Styles */

#grid-header 	{ background: transparent url(../img/bg/content-white-top-bg.png) top left no-repeat; }

#hot-press { 
	background: transparent url(../img/bg/banner-hot-press.png) top left no-repeat; 
	width: 700px; height: 53px; 
	float: left; 
	margin: 40px 0 0 0; 
	}

#hot-press .title { 
	display: block; float: left; 
	height: 43px; width: 260px; 
	padding: 0 0 0 20px; margin: 0;
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 43px; font-size: 20px;
	color: #B18E28;
	}

#hot-press .date { 
	display: block; float: left; 
	height: 38px; width: 260px; 
	padding: 0 0 0 20px; margin: 0;
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 38px; font-size: 20px;
	color: #CCC; 
	}



/* !Content Styles */
#content {
	background-color: #FFF;
	float: left; display: block;
	padding-bottom: 20px; 
	}

#content h2.article-title, #content h2, #content h2.archive-title, #content h2.comments-section  {
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	font-size: 32px; line-height: 130%;
	margin: 0; padding: 0 0 10px 0;
	color: #008AB8;  
	}

#content h2.archive-title { font-size: 18px; font-weight: bold; margin: 40px 0 0 0; padding: 0;  }
#content h2.archive-title+small { font-size: 11px; margin: 0; padding: 0; }


#content h2.article-title a:link, #content h2.article-title a:visited,
#content h2 a:link, #content h2 a:visited

{ color: #008AB8; }	


#content h2.article-title a:active, #content h2.article-title a:hover,
#content h2 a:active, #content h2 a:hover 

{ color: #000; }	

#content h2.comments-section {
	color: #993300;
	margin: 0; padding: 20px 0 0 0; 
	font-size: 25px;
	 }

#content h3 {
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2",serif;
	font-size: 18px; line-height: 145%; font-style: italic;
	margin: 0; padding: 0 0 10px 0;
	color: #999999;  
	}
	
#content h4 {
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	font-size: 17px; line-height: 100%;
	margin: 0; padding: 20px 0 0 0;
	color: #00516B;  
	font-weight: bold; 
	}	

#content p { line-height: 140%;}

#content ul { margin: 8px 0 4px 18px; }
#content li { margin: 0px 10px 15px 5px; font-size: 14px; line-height: 130%; list-style-type: square; }

#content ol.commentlist { margin: 10px 0; }
#content ol.commentlist li {list-style-type: none; margin: 10px 0; }


/* !Featured Article Comment Styles */
#featured-interaction { padding: 0px 0 20px 0; border-bottom: 1px solid #EFEBE3; }

#featured-interaction-sub  { padding: 0px 0 0px 0; }

.comment-link, .topic-note  {
	display: block; float: right;
	width: 200px; height: 27px; 
	margin: 0; padding: 0px 0 0 30px; 
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	font-size: 15px; line-height: 25px; color: #999999;  
	}	

#featured-interaction-sub .comment-link  {
	display: block; float: left;
	width: 380px; height: 27px;  
	margin: 0 0 0 0px; padding: 0 0 0 30px; 
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	font-size: 25px; line-height: 25px; color: #999999;  
	}

.comment-link  	{ background: transparent url(../img/misc/comment.png) 0% 50% no-repeat; }
.topic-note 	{ background: transparent url(../img/misc/topic.png) 0% 50%  no-repeat; padding: 0px 50px 0 30px; }

.archive-block {
	width: 290px; height: 190px;
	margin: 0; padding: 0; 
	float: left; display: block; 
	font-size: 11px; color: #999999; 
	}

.archive-block a { font-weight: bold; }
.archive-block a:link, .archive-block a:visited { color: #0E91BB; } 
.archive-block a:active, .archive-block a:hover { color: #444; }

.archive-block h5 { background: transparent url(../img/bg/header-bg-line.jpg) 0% 50% repeat-x; text-align: center; font-weight: normal; }

.archive-block .date {
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 25px; font-size: 15px;
	color: #666666; display: block;
	background-color: white; padding: 30px 0 0 0px;
	}

.archive-block .title {
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 130%; font-size: 13px;
	color: #666666; display: block; font-weight: bold;
	background-color: white; padding: 2px 0px 0 0;
	}

.archive-block p { font-size: 11px; }


#past-articles-two .date,
#past-articles-three .date,
#past-articles-two .excerpt,
#past-articles-three .excerpt,
#past-articles-two .title,
#past-articles-three .title,
#past-articles-two p,
#past-articles-three p
 { padding-left: 0px;}
 
#past-articles-one .date,
#past-articles-four .date,
#past-articles-one .excerpt,
#past-articles-four .excerpt,
#past-articles-one .title,
#past-articles-four .title,
#past-articles-one p,
#past-articles-four p
 { padding-right: 0px;} 
 
 
#past-articles-one 		{ width: 290px; padding-right: 10px; float: left; /* background-color: red;  */} 
#past-articles-two 		{ width: 290px; padding-left: 10px; float: right; /* background-color: blue; */ } 
#past-articles-three 	{ width: 290px; padding-right: 10px; float: left; /* background-color: fuchsia; */ } 
#past-articles-four 	{ width: 290px; padding-left: 10px; float: right; /* background-color: green; */ }  

h5.article-link { background: transparent url(../img/bg/header-bg-line.jpg) 0% 50% repeat-x; text-align: center; font-weight: normal; margin: 0; padding: 0; }

h5.article-link span {
	background: transparent url(../img/misc/topic.png) 12px 2px no-repeat;
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 40px; font-size: 20px;
	color: #666666;
	background-color: white; padding: 0 15px 0px 40px;
	}

p a.more-link { display: none;}

a.more-link:link h5 span, a.more-link:visited h5 span { color: #0E91BB; } 
a.more-link:active h5 span, a.more-link:hover h5 span { color: #444; }
	
#searchform { background-color: #D8EDF4; padding: 5px 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px;  }	
#searchform div { padding: 5px 0;}

/* !Side-Bar Styles */
#side-bar {
	float: right; display: block;
	}

.blue-banner { 
	background: transparent url(../img/bg/banner-right-blue.png) top right no-repeat; 
	width: 175px; height: 53px; float: right; 
	margin: 0 0 0 0; padding: 0 0 0 25px; 
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 40px; font-size: 20px;
	color: #FFF;
	}

#side-bar p  { margin: 0; padding: 8px 20px 8px 0; }

#topics a:link, #topics a:visited { color: #C4C4C4; }	
#topics a:active, #topics a:hover { color: #666; }	

#topics ul { margin: 0px 0px 15px 10px; padding: 0px 0px 0px 0px; }
#topics li { margin: 0px 10px 0px 0px; padding: 5px 0px 4px 18px; text-shadow: 1px 1px 1px #F6F6F6; font-size: 14px; line-height: 130%; background: transparent url(../img/misc/tick.png) 0% 50% no-repeat; list-style-type: none; border-bottom: 1px solid #FBFAF9; }
#topics li:hover { margin: 0px 10px 0px 0px; padding: 5px 0px 4px 18px; text-shadow: 1px 1px 1px #F6F6F6; font-size: 14px; line-height: 130%; background: transparent url(../img/misc/tick.png) 0% 50% no-repeat; list-style-type: none; border-bottom: 1px solid #F6F6F6; }
#topics { clear: both; }

#connect { margin: 0; padding: 5px 0 5px 20px; }
#connect img { border-width: 0px; padding: 0 1px; }

#hire { margin: 0; padding: 5px 10px 0px 10px; }
#hire p { font-size: 11px; text-align: center; text-shadow: 1px 1px 1px #F6F6F6; }

#contact-slug  	{ margin: 0; padding: 5px 0 5px 20px; }
#contact-slug p { font-size: 12px; text-align: center; text-shadow: 1px 1px 1px #F6F6F6; }
#contact-slug span { font-size: 11px; text-align: center; }

.button {
	background: #1f84bd url(../img/misc/btn_bg.gif) repeat-x center top;
	display: block; margin: 10px 15px 10px 0px; padding: 5px 15px;
	text-decoration: none; color: #fff;
	font-size: 16px; font-weight: bold;
	border: 1px solid #0087d3;
	/* CSS3: Border Radius */
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px; 
	boder-radius: 6px;
	/* CSS3: Text Shadow */
	text-shadow: #22678d 0 1px 2px;
}
.button:hover { background-image: none; color: #fff; }


/* !Comment Styles */
.navigation {
	padding: 10px; 
	border: 1px solid #EFEBE3;
	clear: both;
	font-size: 11px; margin: 10px 0;
	font-weight: bold;
	 -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;  
	}

.postmetadata {
	padding: 10px; 
	border: 1px solid rgb(221, 221, 221);
	display: block; clear: both; 
	background-color:#FFF8DE;
	 -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;  
	}
	
.postmetadata small { font-size: 10px; line-height: 130%; }
	
.commentlist { list-style-type:  none; margin: 0; padding: 0; }
.commentlist li {margin: 10px 0; }

.comment-body { padding: 20px; }
#content .comment-body p { padding: 5px 10px; font-size: 13px; line-height: 135%; text-shadow: 1px 1px 1px #EFEBE2; color: #666; }
.avatar { float: left; padding: 0px 10px 10px 0px; }
.comment-meta { font-size: 11px; }
.commentmetadata { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px; }

#respond {
	padding: 10px 10px 10px 10px; margin: 10px 0;
	border: 1px solid #C7EFFA;
	background-color: #E5F5FA;
	clear: both;
	 -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
	}
#respond h4 { margin-top: 0px; padding-top: 0px; }
#respond small { font-size: 13px; font-weight: bold; color: #0D74B6; text-shadow: 1px 1px 1px white; }


#avelient { background-color: #FFF3C7; border: 1px solid #FFE7A0; padding: 0px 10px 5px 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;  }
#avelient img {float: left; padding-right: 10px; }

#avelient h4 { color: #B41900; }

/* !Footer */
#footer { 
	background: transparent url(../img/bg/footer-bg.png) bottom left no-repeat; 
	clear: both; 
	padding: 0 0 30px 0;
	}

/*
#footer-curve {
	background: transparent url(../img/bg/footer-curve-bg.png) top left no-repeat;
	width: 960px; height: 12px; 
	clear: both;
	}
*/

.red-banner { 
	background: transparent url(../img/bg/banner-mid.png) top right no-repeat; 
	width: 935px; height: 53px; float: right; 
	margin: 0 0 0 0; padding: 0 0 0 25px; 
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 40px; font-size: 20px;
	color: #FFF;
	}

.block {
	width: 270px; height: auto;
	margin: 0; padding: 0; 
	float: left; display: block; 
	font-size: 11px; color: #999999; 
	}


.block h5 { background: transparent url(../img/bg/header-bg-line.jpg) 0% 50% repeat-x; text-align: center; font-weight: normal; }

.block .date {
	font-family: "ff-enzo-web-1","ff-enzo-web-2",sans-serif;
	line-height: 40px; font-size: 16px;
	color: #666666;
	background-color: white; padding: 0 10px;
	}

.block .read-more a { color: #FFFFFF; font-size: 11px; margin: 0; padding: 0; font-weight: bold;  }

.block a:link, .block a:visited { color: #0E91BB; } 
.block a:active, .block a:hover { color: #444; }

#block-one { margin: 0 0 0 40px; }
#block-one a { display: block; font-size: 11px; font-weight: bold; }

#block-two { margin: 0 0 0 40px; }
#block-two ul { margin: 0; padding: 0 0 0 5px; font-size: 11px; }
#block-two ul li { list-style-type: none; background: transparent url(../img/misc/star-bullet.png) 0% 50% no-repeat; padding: 2px 0 2px 21px; line-height:  14px; font-weight: bold;  }

#block-three { margin: 0 0 0 40px; text-align: center; }
#block-three p { font-size: 11px; color: #999999; padding-bottom: 15px;}




/* !Misc Classes and Styles */

.clear 	{ clear: both; }
.highlight { background-color: #FFF298; color: #5F5F5F; padding: 0 2px;  }