/*
Theme Name: Icosystem
Description: A custom theme for Icosystem. v1.0.6 has Testimonials pulled from Custom fields. 
Version: 1.0.6
Author: BKJ Productions.
Tags: white, green, blue, grey background
*/

/*
Revision History: v1.0.5 includes tag cross-referencing. v1.0.4 adds opacity to top menus, a few other tweaks
*/

/* ! Basic styles & typography */

html {
	background-image: url(images/bg_icosystem.gif);
	background-color: rgb(109, 110, 113);
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 160%;
	color: rgb(109, 109, 109);
	padding-top: 10px;
	padding-bottom: 10px;
}

h1 {
	font-size: 21px;
	line-height: 25px;
	margin: 0 0 12px 0;
}

h2 {
	text-transform: uppercase;
}

h2, h3 {
	font-weight: bold;
	margin: 7px 0 3px 0;
}

h1, h2 {
	color: rgb(0, 141, 191);
}

a {
	color: rgb(108, 179, 74);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

li {
	margin: 5px 0;/* padding-left: 10px; */
}

strong {
	font-weight: bold;	
}

em {
	font-style: italic;	
}



/*  DIV#header specific typography */


#utility-links { /* used for upper-right links */
	clear: right;
	float: right;
	width: 200px;
	text-align: right;
	margin-top: 10px;
}

#utility-links a {
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	color: rgb(108, 179, 74);
	text-transform: uppercase;
}

/*********** LAYOUT ***************/




#doc {
	width: 900px;
	margin: 10px auto;
	padding-top:19px;
	background-image:url(images/bg_top.gif);
	background-position:top left;
	background-repeat:no-repeat;
	background-color: white;
}


#header {
	margin: 0;
	padding: 5px 10px 15px 15px;
}

#banner {
	width:900px;
	float: left;
	/* height: 293px; */
	
	background: url(images/bg_dropshadow.gif) bottom left repeat-x;
	padding-bottom: 8px;
	
}

#logoarea {
	position: absolute;
	left: 0;
	bottom: 25px;
}

#topnav {
	padding-right: 10px;
	width:890px; /* 900px total (with padding) */
	height: 120px;
	position: relative;
	z-index: 9;
	
}

#searcharea {
	float: right;
	height: 19px;
}

#menu {
	font-size:11px;
	bottom: 25px;
	left: 275px;
	position: absolute;
}

#imagebar {
	width:900px;
	height: 132px;
	position: relative;
}

#imagebar, .home-slider {
	z-index: 1;
}

#middle {
	margin-top: 24px;
	width: 900px;
	clear: both;
	float: left;
	margin-bottom: 20px;
	min-height: 400px;
}

#leftsidebar {
	position: absolute;
	text-align: left;
	top: 325px;
	left: 200px;
	width: 203px;
}

#leftnav {
	font-size: 11px;
	width:153px;
	float: left;
	display: inline;
	margin-left: 65px;
}

#content {
	width:428px;
	/* overflow: hidden; */
	float: left;
	display: inline;
	margin-left: 23px;
}

#content.wide-column {
	margin-left: 23px;
	width: 646px;
}

#rightnav {
	font-size: 11px;
	width:165px;
	float: left;
	display: inline;
	margin-left: 15px;
	border-left: 1px rgb(109, 110, 113) dotted;
	padding-left: 15px;
}


#ft {
	clear: both;
	border-top: 1px rgb(109, 110, 113) dotted;
	background-image: url(images/bg_footer.gif);
	background-position: bottom;
	padding: 15px 0;
	text-align: center;
}

/*  DIV#content */


#content p {
	margin: 0 0 8px 0;
}


#content ol, 
#content ul {
	margin: 0 0 3px 0;
	padding-left:15px;
}

#content ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;
}

#content ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}

.meta {
	margin: 0 0 8px 0;
	padding: 5px;
	background: #eee;
	float: left;
}

.storycontent {
	clear: left;	
}

.post-edit-link-container {
	text-align:right;
}

.post-edit-link {
	background-image:url(images/icons/icon_pencil.png);
	background-repeat:no-repeat;
	padding-left: 20px;
	color:#FF0000;
	padding-right: 10px;
}

body.archive .hentry,
body.search-results .hentry {
	padding-bottom: 1em;
	border-bottom: 1px dotted rgb(109, 110, 113);
	margin-bottom: 1em;	
}	



/****  TOP NAV MENU ****/

#menu ul {
	list-style:none;
	text-indent: 0px;
	margin: 0px;
}

#menu li {
	display:inline;
	padding-right: 20px;
	text-transform: uppercase;
}

#menu li a {
	color: rgb(109, 110, 113);
	padding-top: 10px; /* height of hover padding-top plug hover border width */
}

#menu li.current_page_item a,
#menu li.current_page_ancestor a,
#menu li a:hover {
	color: rgb(106, 179, 74);
	border-top: 4px solid rgb(106, 179, 74);
	padding-top: 6px;
	text-decoration: none;
	
	/*
	background-image:url(images/menu_indicator.gif);
	background-repeat:repeat-x;
	background-position:top left;
	*/
}

#menu ul ul a {
	text-transform: none;	
	background: white;
	border: none;
	border-bottom: 1px dotted gray;
	padding: 5px;
	opacity:0.9;
	filter:alpha(opacity=90);
}

#menu .current_page_item ul a,
#menu .current_page_ancestor ul a,
#menu ul ul a:hover
 {
	border-top: none;
	padding: 5px;
}

#menu .current_page_item ul a,
#menu .current_page_ancestor ul a {
	color: rgb(109, 110, 113);
}

#menu ul ul a:hover {
	color: rgb(106, 179, 74);
}




/***** LEFT NAV ******/


#leftnav  ul ul,
#leftnav .current_page_item ul ul,
#leftnav .current_page_ancestor ul ul,
#leftnav .current_page_ancestor .current_page_item ul ul,
#leftnav .current_page_ancestor .current_page_ancestor ul ul {
	display: none;
}

#leftnav .current_page_item ul,
#leftnav .current_page_ancestor ul,
#leftnav .current_page_ancestor .current_page_item ul,
#leftnav .current_page_ancestor .current_page_ancestor ul,
#leftnav .current_page_ancestor .current_page_ancestor .current_page_item ul,
#leftnav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {
	display: block;
}

#leftnav a {
	color: rgb(109, 110, 113);
	text-decoration: none;
	display: block;
}

#leftnav a:hover {
	color: rgb(108, 179, 74);
	text-decoration: none;
}

#leftnav .current_page_item a,
#leftnav .current_page_ancestor a,
#leftnav .current_page_ancestor .current_page_item a,
#leftnav .current_page_item ul a:hover {
	color: rgb(108, 179, 74);
}

#leftnav .current_page_item ul a,
#leftnav .current_page_ancestor ul a {
	color: rgb(109, 110, 113);
}

#leftnav li {
	line-height: 13px;
	margin: 4px 0;
	padding-bottom: 4px;
	border-bottom: dotted 1px rgb(109, 110, 113);
}

#leftnav ul ul {
	margin-bottom: -2px;  /* to counteract some of the padding-bottom of the parent LI */	
}

#leftnav ul ul li {
	margin: 2px 0;
	padding-bottom: 0;
	border-bottom: none;
	
}

#leftnav ul ul a {
	background: url(images/icons/icon_arrow.gif) no-repeat 0 3px;
	padding-left: 10px;
}

#leftnav ul ul a:hover,
#leftnav ul ul .current_page_item a {
	background-image: url(images/icons/icon_arrow_green.gif);
	color: rgb(108, 179, 74);
}


/****** RIGHT NAV ********/

#rightnav > :first-child {
	margin-top: 0; /* nice top alignment for modern browsers */
}

#rightnav ul a {
	background: url(images/icons/icon_arrow_green.gif) no-repeat 0 4px;
	display: block;
	padding-left: 10px;
}

#rightnav ul {
	margin: 0 0 8px;
	line-height: 135%;
}

#rightnav li {
	margin: 0 0 5px;	
}

#rightnav p {
	margin: 0 0 8px;	
}

#rightnav .testimonial-credit {
	font-weight: bold;	
}


/**** HOME PAGE ***/

body.home #rightnav {
	border-left: none;
	padding-left: 16px; /* was 15px. add 1px to replace border */
}

body.home #middle {
	background: url('images/bg_column_dotted.gif') 680px 0px repeat-y;
	position: relative;
}

body.home #content {
	margin-left: 223px;
	width: 446px;
}

body.home #content h1 {
	position: absolute;
	text-align: right;
	top: 0;
	left: 0;
	width: 203px;
}


body.no-js #homepage-testimonials .sub-post {
	display: none;
}

body.no-js #homepage-testimonials .sub-post:first-child {
	display: block;
}

/* slider */

.home-slider {
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
}

.home-slider li {
	display: block;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	float: left;
	display: inline;
	width: 225px;
	height: 190px;
	margin: 0;
	/* width: 222px; margin-right: 4px; */
}

body.no-js .home-slider li {
	cursor: default;
}


.home-slider .text {
	display: block;
	margin: 20px 0 0 440px;
	width: 370px;
	font-size: 11px;
	line-height: 150%;
	color:#FFFFFF;
}

.home-slider .text b {
	font-size: 13px;
	display: block;
	margin-bottom: 0px;
}

.home-slider .text a {
	text-transform: uppercase;	
	font-size: 9px;
}

#kwick1 .text a {
	color: #bfeafb;	
}

#kwick2 .text a {
	color: #efc57d;	
}

#kwick3 .text a {
	color: #bfeea8;	
}

#kwick4 .text a {
	color: #49dbda;	
}


.home-slider li.active .text {
	display: block;
}

#kwick1 { 
	background: url(images/bg_infobar_a.jpg) no-repeat top left;
	
	zbackground-color: #4D9AA8;
}
#kwick2 {
	background: url(images/bg_infobar_b.jpg) no-repeat top left;
	zbackground-color: #82A616;
}
#kwick3 {
	background: url(images/bg_infobar_c.jpg) no-repeat top left;
	zbackground-color: #F29A1F;
}
#kwick4 { 
	background: url(images/bg_infobar_d.jpg) no-repeat top left;
	zbackground-color: #A66A16;
	margin-right: 0;
}



/****** CAPTIONS & ALIGNMENTS *****/
.aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.storymain {
	width: 428px;
}


/***** GALLERIES ********/
.gallery {
		margin: auto;
		width: 448px;
}
.gallery-item {
	float: left;
	margin: 10px 20px 0 0;
	text-align: center;
}

.gallery-icon a {
	display: block;
	padding-bottom: 18px;
	background: url(images/click_to_zoom.gif) bottom left no-repeat;
}

.gallery img {
		border: 0;
}
.gallery-caption {
		display: none;
		margin-left: 0;
}



/**** SEARCH AREA *****/

#s {
	border-style: none;
	padding: 0px;
	margin: 0px;
	background-image:url(images/search_bg.gif);
	background-repeat:no-repeat;
	height: 19px;
	background-color: transparent;
	float:left;
	padding-top: 2px; 
	padding-left: 2px; 
	width: 75px;
}

#search {
	background: url(images/bg_top.gif) no-repeat top;
	padding-top: 10px;
	height:29px;
	padding-right:10px;
	text-align:right;
	width:890px;
}

#search form {
	float: right;
}


#linklist img {
	width: 100px; 
	border: 0px; 
	float: left; 
	padding-right: 10px;
}
#linklist ul li {
	list-style: none outside none;
}

#linklist ul  {
	padding-left: 0px;
}


/*** DEBUG ****/
.devnote {
	color:#ccc;
	display: none;
}


/***** CLIENTS PAGE *****/
body.page-template-clients-php #content {
	padding-right: 20px;
	border-right: 1px rgb(109, 110, 113) dotted;
}

body.page-template-clients-php #content .sub-post {
	position: relative;
	margin-bottom: 2em;
}

body.page-template-clients-php #content .sub-post a {
	color: #008DBF;
	font-size: 14px;
}

body.page-template-clients-php #content .sub-post img {
	position: absolute;
	top: 0;
	left: 470px;
}


/* MANAGEMENT TEAM SUB-PAGES */

body.parent-pageid-21 .hentry {
	position: relative;
	padding-left: 120px;
}

body.parent-pageid-21 .storycontent strong {
	color: #008DBF;	
}

body.parent-pageid-21 .storycontent img {
	position: absolute;
	top: 0;
	left: 0;
}

/* UTILITY LINKS at TOP RIGHT */
body.page-id-194  #labsdemos_link  {
	color:#006699; 
	background-image:url(images/bullet_square_blue.gif);
	background-repeat:no-repeat;
	background-position: 0px 50%;
	padding-left: 10px;
	 }

body.page-id-15  #contact_link  {
	color:#006699; 
	background-image:url(images/bullet_square_blue.gif);
	background-repeat:no-repeat;
	background-position: 0px 50%;
	padding-left: 10px;
	 }
body.page-id-9  #products_link  {
	color:#006699; 
	background-image:url(images/bullet_square_blue.gif);
	background-repeat:no-repeat;
	background-position: 0px 50%;
	padding-left: 10px;
	 }

.simplemodal-wrap {font-size: 11px;}

/* home page */
#rightsidebar_home {
	top: 0px;
	position: absolute;
}

#homepage-testimonials {
	height: 288px;
	top: 220px;
	}
