/*

[Table Of Contents] 

	0- Reset
	1- Global/Main Structure
	2- Links
	3- Headings
	4- Header 
	5- Navigation
	6- Forms
	7- Content
	8- Extras
	9- Footer 
	10-Comments

*/

/* =0 Reset
--------------------------------------------------------------------------------------------------------------------------------------*/
@import url('lib/reset.css');
@import url('lib/typography.css');

/* =1 Global/Main Structure
--------------------------------------------------------------------------------------------------------------------------------------*/
body {
	vertical-align: top;
	background: url('../images/OfficeWorks_BG.png') #fbfbfb top center no-repeat;
	color: #666666;
	text-align:center;
}

html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}

.right {float: right;}
.left {float: left;}
.hide {display: none; width: 0px; height: 0px; overflow: hidden;}
.clear {clear: both;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.underline {border-bottom:1px solid;}
img.centered {display: block;margin-left: auto;margin-right: auto;}
img.alignleft {float:left;margin:4px 10px 4px 0;}
img.alignright {float:right;margin:4px 0 4px 10px;}
.last{border:none;}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	padding-bottom:30px;
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

#wrap{
	margin: 0 auto;
	width: 100%;
	position: relative;
}

#header{
	position: relative;
	width: 100%;
	overflow: hidden;
	border-bottom: 2px solid #d2d2d2;	
}

.container{
	margin: 0 auto;
	width: 955px;
	padding: 0px;
	position: relative;
	text-align: left;
}

#footer{
	position: relative;
	padding-top: 25px;
	padding-bottom: 25px;
	width: 100%;
	overflow: hidden;
	border-top: 2px solid #d2d2d2;	
}


/* =2 Links
--------------------------------------------------------------------------------------------------------------------------------------*/
a:link, a:visited{color: #c51123;}
a:hover, a:active{color: #c51123;}	

.arrowLink a:link, .arrowLink a:visited{color: #c51123; text-transform: uppercase; font-weight: bold;}
.arrowLink a:hover, .arrowLink a:active{color: #c51123; text-transform: uppercase; font-weight: bold;}

.arrowLinkSide a:link, .arrowLinkSide a:visited{color: #c51123; text-transform: uppercase; font-weight: bold;}
.arrowLinkSide a:hover, .arrowLinkSide a:active{color: #c51123; text-transform: uppercase; font-weight: bold;}

#contactInfo a:link, #contactInfo a:visited{color: #00adef; text-decoration: underline;}
#contactInfo a:hover, #contactInfo a:active{color: #00adef; text-decoration: underline;}

#sideBarBlog a:link, #sideBarBlog a:visited{color: #666666;}
#sideBarBlog a:hover, #sideBarBlog a:active{color: #666666;}	

/* =3 Headings
--------------------------------------------------------------------------------------------------------------------------------------*/
h1 {color: #000000;}
h2 {margin-top: 50px; margin-bottom:25px; color: #c51123;}
  .sideContent h2 {margin-top: 10px; margin-bottom:10px; color: #000000;}
  #subBlog h2 {margin-top: 0px;}
  .BlogKey h2 {margin-top: 35px; margin-bottom:10px; color: #000000;}  
h3 {color: #c51123;}
  .caseStudyKey h3 {margin-top: 25px; margin-bottom:10px; color: #000000; padding: 0 0 5px 0; border-bottom: #d2d2d2 1px solid;}
h4 {color: #000000;}
h5 {color: #000000;}
  .BlogKey h5 {margin-top: 0px; text-transform: uppercase; font-weight: bold; padding: 0 0 10px 0; border-bottom: #d2d2d2 1px solid;}


/* =4 Header
--------------------------------------------------------------------------------------------------------------------------------------*/
#contactBtn{
	float: right;
	position: relative;
}

#mainNavigation{
	margin: 35px 0 0 0;
	padding: 0 0 0 0;
	clear: right;
	float: right;
	position: relative;
	display: block;
}

	#header h1{margin:0;padding:0;}
		#header .logo {display:block; float:left; width:255px ; height:60px ; margin: 10px 0 10px 0px;}
		
/* =5 Navigation
--------------------------------------------------------------------------------------------------------------------------------------*/
	#mainNavigation ul{ color:#939598; float: left; text-transform: uppercase; }
	#mainNavigation ul li{float: left; padding:0 0 0 10px; margin: 0; }
		#mainNavigation li a:link, #mainNavigation li a:visited{ color:#939598; }
		#mainNavigation li a:hover, #mainNavigation li a:active{ color:#c51123; border-top: 2px solid #000;}
			#mainNavigation li.curPage a:link, #mainNavigation li.curPage a:visited{ color:#c51123; border-top:2px solid #000;}

	#subNavigation ul{ color:#000; font-size: 1.2em; }
	#subNavigation ul li{ padding:0 0 15px 0; margin: 0; }
		#subNavigation li a:link, #subNavigation li a:visited{ color:#000; }
		#subNavigation li a:hover, #subNavigation li a:active{ color:#c51123;}
			#subNavigation li.curPage a:link, #subNavigation li.curPage a:visited{ color:#c51123; }

/* =6 Forms
--------------------------------------------------------------------------------------------------------------------------------------*/
    .ftrInner p {padding: 0 0 0 0; margin: 0;}
	.ftrInner form { float:left; margin-top:2px; text-transform: uppercase; font-weight: bold;}
	.page-template-page-contact-php * p.submit input,
	form#commentform * input#submit {
		border: none;
		background: transparent;
		background-image:		url('../images/sendBtn.gif') !important;
		background-repeat:		no-repeat;
		height:					21px;
		width:					60px;
		cursor: pointer;
	}
	
	div#footer form {
		width: 225px;
	}
	
	div#footer * div#frm_form_fields {
		float: left;
	}
	
	div#footer * p.submit input {
		float: right;
		margin: 15px 0 0 0;
		border: none;
		background: transparent;
		background-image:		url('../images/ftrSubmit.gif') !important;
		background-repeat:		no-repeat;
		height:					65px;
		width:					66px;
		cursor: pointer;
	}
	
	form * .input-error {
		color: #c51123;
		font-weight: bolder;
	}
	
/* =7 Content
--------------------------------------------------------------------------------------------------------------------------------------*/

/* HomePage  ---*/

#homeMain{
	position:relative;
	float: left;
	width: 620px;
	padding: 50px 50px 35px 25px; 
}

.homeContent{
	position:relative;
	float: left;
	margin-top: 40px;
	width: 618px;
	overflow: hidden;
}

#homeTitle{
	position:relative;
	float: left;
	width: 175px;
	margin: 10px 25px 0 0;
}

#homeTextContent{
	position:relative;
	float: left;
	width: 391px;
	padding-left: 25px;
	border-left: 2px solid #d2d2d2;
}

#homeTextContent p {
	padding: 1em 0 0 0;
	margin: 0;
}

#contentVideo p {
	margin: 0;
	padding: 0;
}

.homeLink{
	position:relative;
	float: left;
	padding-top: 40px;
	width: 176px;
}

.subHL{
	padding-left: 45px;
}

#carousel {position: relative;}
#dots {position: absolute; bottom: 20px; right: 80px;}
#dots a {display: block; float: left; background: #fff; margin-left: 8px; width: 10px; height: 10px;}
#dots a.current {background: #cf1123;}

/* SideBar  ---*/

#sideBar{
	position:relative;
	float: right;
	width: 258px;
	padding: 50px 0 35px 0; 
}

#sideMain{
	position: relative;
	background-image: url(../images/sideBarBG.png);
	background-color: #f4f4f4;
	width: 240px;
	height: 610px;
}

.sideContent{
	position: relative;
	float: left;
	width: 190px;
	margin: 0px 25px 0px 25px;
}

.sideContent p {
	padding: 0 0 1em 0;
	margin: 0;
}

.SCsub{
	border-top: 2px solid #d2d2d2;
}

/* SubPage SideBar / Navigation  ---*/

#subLeftBar{
	position: relative;
	float: left;
	text-align: right;
	margin-top: 50px;
	padding: 0 25px 0 0;
	width: 175px; 
}

#subMain{
	position: relative;
	float: left;
	width: 400px;
	margin-top: 50px;
	margin-bottom: 35px;
	padding: 0px 50px 0px 43px;
	border-left: 2px solid #d2d2d2;
	overflow: hidden;
}

#subNavigation{
	margin-top: 50px;
}

/* About Us / Staff Member ---*/
.staffMember{
	position: relative;
	float: left;
	width: 400px;
	margin-bottom: 35px;
}

.staffPhoto{
	position: relative;
	float: left;
	width: 129px;
}

.staffBio {
	position: relative;
	float: left;
	width: 256px;
	margin-left: 15px;
}

/* SubPage Product Gallery  ---*/

#subProduct{
	position: relative;
	float: left;
	width: 710px;
	margin-top: 50px;
	margin-bottom: 35px;
	padding: 0px 0px 0px 43px;
	border-left: 2px solid #d2d2d2;
	overflow: hidden;
}

/* SubPage Case Study  ---*/
#subCaseStudy{
	position: relative;
	float: left;
	width: 400px;
	margin-top: 50px;
	margin-bottom: 35px;
	padding: 0px 50px 0px 43px;
	border-left: 2px solid #d2d2d2;
	border-right: 2px solid #d2d2d2;
	overflow: hidden;
}

#sideBarCaseStudy{
	position: relative;
	float: right;
	width: 233px;
	padding: 50px 0 35px 23px; 
}

/* Contact Us  ---*/
#contactInfo {
	margin-top: 50px;
	color: #000;
}

/* Blog  ---*/
#subBlog{
	position: relative;
	float: left;
	width: 620px;
	margin-top: 50px;
	margin-bottom: 35px;
	padding: 0px 50px 0px 25px;
	border-right: 2px solid #d2d2d2;
	overflow: hidden;
}

#sideBarBlog{
	position: relative;
	float: right;
	width: 233px;
	padding: 50px 0 35px 23px; 
}

.BlogKeyList ul{
	list-style-type: disc;
	padding-left: 25px;
	padding-bottom: 10px;
}

div.comment-navigation * a {
	text-transform: uppercase;
	font-weight: bold;
}

div.paged-navigation {
	margin: 40px 0;
}

div.paged-navigation * a {
	text-transform: uppercase;
	font-weight: bold;
}

/* =8 Extra
--------------------------------------------------------------------------------------------------------------------------------------*/
.stdBorder,
div.gallery * img
{ background-color:#FFFFFF; padding: 8px; border: 1px solid #999999; overflow: hidden;}

.arrowLink{
	text-align: right;
	padding: 5px 0 5px 0;
}

.arrowLinkSide{
	text-align: left;
	padding: 5px 0 5px 0;
}

.post-thumbnail {
	margin-right: 15px;
	margin-bottom: 15px;
}

/* =9 Footer
--------------------------------------------------------------------------------------------------------------------------------------*/
#ftrOffset{
	position: relative;
	float: left;
	padding-left: 25px;
	width: 930px;
	overflow: hidden;
}

#ftrContent{
	position: relative;
	float: left;
	padding: 20px;
	background-color: #f4f4f4;
	width: 872px;
	overflow: hidden;
}

.StayInTheKnow {
	position: relative;
	float: left;
	margin: 15px 35px 0 0;
	width: 114px;
}

.ftrInner {
	position: relative;
	float: left;
	width: 500px;
	border-left: 2px solid #d2d2d2;
	border-right: 2px solid #d2d2d2;
	padding: 0 25px 0 25px;
}

.joinText {
	position: relative;
	float: left;
	width: 240px;
	padding: 15px 35px 0 0;
}

.joinForm {
	position: relative;
	float: left;
	width: 124px;
	padding: 0 0 0 0;
}

.joinSubmit {
	position: relative;
	float: right;
	padding: 15px 0 0 35px;
}


.ftrSocial {
	position:relative;
	float: right;
	width: 134px;
	margin: 5px 0 0 0;
	display: block;
}
.ftrSocial a {
	display: block;
	margin: 0 0 4px 0;
}

#copyright {
	position: relative;
	float: right;
	margin-top: 5px;
	margin-bottom: 5px;
	text-transform: uppercase;
}

		


/* =9 Comments
--------------------------------------------------------------------------------------------------------------------------------------*/

textarea#comment {
	width: 97%;
	border: 1px solid #999999;
	padding: 8px;
}

div#comments {
	margin-bottom: 50px;
}

div#comments div.authorcomment {
	background-color: #E7d9d9;
}

div#respond {
	margin-top: 10px;
}

div.comment .comment-meta {
  color: black;
}

div.comment * span.actions a {
  padding: 4px;
  margin-left: 10px;
}

span.cancel-comment-reply {
	font-size: 12px;
	font-weight: bolder;
}

div.comment {
	font-size: 12px;
}

div.comment div.moderation {
	margin-bottom: 8px;
	padding: 3px;
	background-color: #c51123;
	color: #ffffff;
	border: 1px solid #666666;
}

div.comment div.avatar {
	margin: 0 0 15px 15px;
	padding: 3px;
	border: 1px solid #999999;
}

div.comment div.comment-meta {
	margin: 0 0 15px 0;
}

ul.commentlist {
	margin: 0;
}

ul.commentlist * div.comment {
  padding: 15px;
}

ul.commentlist * div#respond {
  margin-right: 17px;
  margin-left: 20px;
}

ul.commentlist li.thread-even {
	background-color: #f1f1f1;
}

ul.commentlist li.thread-odd {
	background-color: #ffffff;
}

ul.commentlist li.depth-2,
ul.commentlist li.depth-3,
ul.commentlist li.depth-4,
ul.commentlist li.depth-5,
ul.commentlist li.depth-6,
ul.commentlist li.depth-7,
ul.commentlist li.depth-8,
ul.commentlist li.depth-9,
ul.commentlist li.depth-10 {
	background: transparent;
}

ul.commentlist * ul.children {
	margin: 0;
	padding: 0;
}

ul.commentlist * ul.children * ul.children {
	border-left: 1px dashed #CCCCCC;
}

ul.commentlist * ul.children li {
	margin: 0;
	padding-left: 20px;
}

ul.commentlist * ul.children * div.comment {
	border-top: 1px solid #999999;
}