/*
Theme Name: KnottLab
Description: Custom theme and framework developed for Knott Laboratory, LLC - www.knottlab.com.
Version: 1.0
Author: Kyle Lynch - KCL Studios.com
*/

@import url(reset.css);
@import url(featuredcontentglider.css);

/*=== global ===================================================================*/ 

* {margin:0; padding:0;}

html,body {height:100%; width:100%;}

body { 
	background: #002E51 url(img/back.jpg) repeat-x;
	font-family: verdana, helvetica, arial, sans-serif;
	font-size: 12px; 	
	line-height: normal;
	color:#fff;	
	margin: 0;	
	padding: 0;
	text-align: center; 
}

img, .png {margin: 0; padding: 0; border: none;}

a, a:visited {color: #fff; text-decoration: none;}

a:hover {color: #c2d2e2;}

a img {border: none;}

p {margin: 0 0 20px 0;} .promoBox p {margin: 5px 0;}

ul {list-style: none; margin: 0; padding: 0;}

li {list-style: none; margin: 0 0 10px 0; padding: 0;}

.sm {font-size: 11px; line-height: normal}

.lrg {font-size: 1.2em;}

.caps {text-transform: uppercase;}

.strong {font-weight: bold}

.right, .alignright { float: right; text-align: left;}

.left, .alignleft {float: left; text-align: left;}

.clear {clear:both}

.noMargin {margin: 0;}

a.pdf {
	background: url(img/pdf.jpg) center right no-repeat;
	padding: 0 16px 0 0;
	margin: 10px 0 0 0;
}
.vcard { font-size: .9em }

h1 {font: bold 180% "arial narrow",arial,sans-serif; margin-bottom: 10px; margin-top: 20px;}
h2 {font: normal 90% arial,sans-serif; margin-bottom:0; margin-top:0;}
h3 {font: bold 100% "arial narrow",arial,sans-serif; margin: 0;}
h4 {font: bold 130% "arial narrow",arial,sans-serif; margin-bottom:0; margin-top:0;}
h5 {font: normal 90% "arial narrow",arial,sans-serif; margin-bottom:0;	margin-top:0;}
h6 {font-size: 100%; margin-bottom: 0; margin-top:0;}

.moreText {
	display: block;
	margin: 5px 0 0 0;
	padding: 0 0 0 5px;
	font: normal 90% "arial narrow",arial,helvetica,sans-serif;
	text-transform: uppercase;
	border-left: 1em solid #fff;
}

h3.colHead {font: bold 125% "arial narrow",helvetica,sans-serif; margin: 0 0 -14px 0;}

/*=== container ===================================================================*/ 


.containerTop { clear: both; height: 10px; width: 990px; margin: 0 auto; padding: 0; }
.containerTopLeft { height: 10px; width: 10px; float: left; padding: 0; margin: 0; display: inline;}
.containerTopLeft img, .containerTopRight img, .containerBotLeft img, .containerBotRight img  {display: block;}
.containerTopMid {float: left; width: 970px; height: 10px; margin: 0; padding: 0; background: #fff}
.containerTopRight { height: 10px; width: 10px; float: left; margin: 0; padding: 0;}
.container { clear: both; width: 980px; margin:0 auto; padding: 0 5px; text-align: left; color: #2d2d2e; background: #fff}
.containerBot { clear: both; height: 10px; width: 990px; margin: 0 auto 10px; padding: 0;}
.containerBotLeft { float: left;}
.containerBotMid {float: left; width: 970px; height: 10px; background: #fff;}
.containerBotRight { float: right;}

.container a, .container a:visited {
	color: #11568c;	
}	

.container a:hover {
	color: #cc6600;
}

/*=== columns ===================================================================*/ 

.col {
	width: 200px;
	padding: 0;
	float: left;
	text-align: left;
	display: inline;
}

.left .col {	margin: 10px 10px;}

.right .col {	margin: 10px 10px;}

.col li {
	border-left: 20px solid #cc6600;
	margin: 8px 0 0 0;
	padding: 0 0 0 5px; 
}
	
.col2 {
	position: relative;
	width: 300px;
	padding: 0;
	margin: 0 5px;
	display: inline;
	background: #fff;
}

.col2 a{
	font-weight: bold;
}

.col3 {
	position: relative;
	width: 660px;
	overflow: hidden;
	padding: 0;
	margin: 0 5px;
	display: inline;
}

.col4 {
	clear: both;
	width: 970px;
	overflow: hidden;
	padding: 0 5px;
	margin: 0 auto;
	display: block;
}

.col5 {
	width: 290px;
	overflow: hidden;
	padding: 0;
	margin: 10px 20px 10px 10px;
	display: inline;
}

.form {
	width: 320px;
	margin: 0 0 0 20px;
}

/*=== labels ===================================================================*/ 


.label {
	position: relative;
	width: auto;
	margin: 0;
	padding: 10px 0 0 0;
	font: bold 1.2em eurostile,arial,helvetica,sans-serif;
	text-transform: uppercase;
	color: #161616;
	border-bottom: 1px solid #cc6600;
}

.label2 {
	position: relative;
	clear: both;
	height: 26px;
	margin: 0;
	padding: 0;
	font: bold 1em eurostile,arial,helvetica,sans-serif;
	line-height: 14px;
	text-transform: uppercase;
	background: url(img/label2-back.gif) repeat-x;
}	

.label2 h6 {
	margin: 0;
	padding: 10px 0 0 6px;
	font: bold 12px eurostile,arial,helvetica,sans-serif;
	line-height: 14px;
}

.label3 {
	position: relative;
	height: 24px;
	color: #fff;
	margin: 0 0 10px 0;
	padding: 0 0 0 6px;
	font: bold 11px eurostile,arial,helvetica,sans-serif;
	line-height: 14px;
	text-transform: uppercase;
	background: #cc6600;
}

.label3 h6, .label4 h6 {
	margin: 0;
	padding: 6px 0 6px 0;
	font: bold 11px eurostile,arial,helvetica,sans-serif;
	line-height: 12px;
}
			
.label3 a, .label3 a:visited {
		color: #4b2600 !important;
}	

.label3 a:hover {
	color: #96d2ff !important;
}

.label4 {
	position: relative;
	height: 24px;
	width: auto;	
	margin: 0;
	padding: 0 0 0 6px;
	font: bold .9em eurostile,arial,helvetica,sans-serif;
	text-transform: uppercase;
	color: #fff;
	background: #96d2ff url(img/label4-back.gif) repeat-x;
}		

/*=== main layout ===================================================================*/ 
	
#outer {
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}	

#top  {	
	width: 980px;
	height: 18px;
	margin: 0 auto; 
	padding: 4px 0;
	font-size: 11px;
	text-align: left;
}

#top a {
	display: block;
	float: right;
}

a.img { height: 18px; padding: 4px 5px 0 5px;}

a.text { height: 18px; padding: 5px 5px 0 5px;}

#contact {
	float: right;
	text-align: left;
	width: 330px;
	height: 88px;
	padding: 5px;
	font-size: 80%;
	line-height: 150%		
}	

#header  {
	clear: both;
	position: relative;
	width: 970px;
	height: 72px;
	margin: 0 auto;
	padding: 0 10px 0 10px;
	text-align: center;
	background: #fff;
}

#nav  {
	position: relative;
	float: none;
	width: 970px;
	height: 72px;
	padding: 0;
	margin: 0;
	text-align: left;
	background: url(img/nav-back.gif) repeat-x;
}

.titleBox {
	position: relative;
	height: 168px;
	padding: 0;
	margin: 0 0 20px 0;
	overflow: hidden;
}

.titleInner {
	position: relative;
	float: left;
	height: 100%;
	width: 200px;
}

.trans {
	position:absolute;
	background: #222;
	filter:alpha(opacity=95);
	-moz-opacity:0.95;
	opacity: 0.95; 
	padding: 0;
	margin: 0;
	width: 200px;
	height: 100%;	
}

.titleInner h1 {
	position: absolute;
	color: #fff; 
	top: 25px;
	left: 10px;
	margin: 0;
	padding: 0 10px 0 0;
        font-size: 150%;
}

.siteText {
	display: block;
	font-size: 11px;
	font-weight: bold;
	padding: 5px 0 0 5px;
}

.playlistitem {
	margin: 0 5px 10px 5px;
	width: 122px;
	float: left;
	display: inline;
}

.playitemSm {
	position: relative;
	margin: 0 5px 10px 5px;
	width: 90px;
	float: left;
	display: inline;
}
	
#breadcrumbs { 
	position: relative; 
	display: inline; 
	float: left; 
	height: 24px; 
	width: 660px; 
	font-size: 10px; 
	color: #fff; 
	margin: 10px 5px; 
	padding: 0; 
	background: #cc6600;
}

#breadcrumbs a, breadcrumbs a:visited {
	color: #4b2600;
	font-weight: bold;
}	

#breadcrumbs a:hover { 
	color:#96d2ff;
}

#breadcrumbs ul {
	list-style: none;
	font-weight: bold;
	margin: 0;
	padding: 0;
	height: 24px;
	font-size: 10px;
}

#breadcrumbs li {
	display: block;
	height: auto;
	float: left;
	margin: 0;
	padding: 0;
}

#breadcrumbs li a, breadcrumbs li a:visited {
	background: #cc6600;
	color: #fff !important;
	border-right: 1px solid #b75b00;
	height: 14px;
	display: block;
	float: left;	
	padding: 5px 7px 5px;
}	

#breadcrumbs li a:hover {
	background: #b75b00;
}
	
#breadcrumbs .text {
	display: block;
	padding: 5px 7px;
}

#client {
	min-height: 300px;	
}

#client .right p {
        margin: 15px 0px 0px 0px;
}

#clientLinks {
	padding: 25px 0px 0px 0px;	
}
			
#featured {
	position: relative;
	width: 980px;
	padding: 0 5px;
}

/*=== footer ===================================================================*/ 

#footerOuter {
	clear: both;
	width: 970px;
	margin: 0 auto;
	padding: 0 10px;
	text-align: left;
	background: #fff;
	display: block;
}

#footerInner {
	position: relative;
	float: left;
	width: 950px;
	margin: 0;
	padding: 10px 10px 0 10px;
	background: #f0f0f0 url(img/back.gif) repeat-x;
	display: block;
	color: #222;
}

.promoBox {
	clear: both;
	position: relative;
	width: auto;
	background: #1b2e56;
	color: #fff;
	padding: 0;
	margin: 10px 0 0 0;
}

.promoBoxSm {
	clear: both;
	position: relative;
	width: 284px;
	background: #1b2e56;
	color: #fff;
	padding: 8px;
	margin: 10px 0 0 0;
}

.promoBox a, .promoBox a:visited, .promoBoxSm a, promoBoxSm a:visited {
	color: #96d2ff;
}

.promoText {
	float: left;
	padding: 8px;
	display: inline;	
}

.promoImg {
	float: right;
	width: 185px;
	height: 50px;
	padding: 16px 8px 8px 8px;
	display: block;		
}

#medialogos {
	margin: 10px 0;
}

#street  {
	position: relative;
	float: right;
	width: 415px;
	height: 54px;
	margin: 0;
	padding: 4px 60px 0 0;
	text-align: right;
	background: url(img/logo-bot.png) top right no-repeat;
	display: inline;
}

#copyright  {
	position: relative;
	float: left;
	width: 475px;
	height: 16px;
	margin: 0;
	padding: 32px 0 0 0;
}

#previewContainer.loader {
	background: #fff url(img/ajax-loader.gif) center center no-repeat;
}

#previewContainer {
	float: left;
	height: 160px;
	width: 660px;
	padding: 0;
	margin: 0;
	overflow: visible;
}

#preview {
	height: 160px;
	width: 660px;
	padding: 0;
	margin: 0 auto;
	display: block;
}

ul.subPages {
	list-style: none;
	display: block;
	margin: 0 0 20px 0;
	padding: 0;
}

.subPages li {
	display: inline;
	padding: 0;
	margin: 5px 15px 5px 0;
	font-size: 90%;
	line-height: 90%;
	border-left: 0px solid #ccc;	
}


/*=== secondary layout ===================================================================*/


#logo {
	height: 72px;
	width: 246px;
	margin: 0;
	padding: 0;
	float: left;
	display: inline;
	background: url(img/nav-back.gif) repeat-x;	
	}

#logo img { display: block;}

#greycol {
	position: relative;
	width: 290px;
	padding: 5px;
	background: #333;
	color: #fff;
}

#greycol a {
	color: #fff;
}

#greycol a:hover {
	color: #cc6600;
}

.widget {
	position: relative;
	clear: both;
	float: none;
	width: auto;
	margin: 0 0 30px 0;
	padding: 5px 5px 0 5px;
	font-size: .9em;
	display: block;
}

.widget p {
	padding: 15px 0 0 0;
	margin: 0;
}

.widget li {
	list-style:none;
	margin: 15px 0 0 0;
	padding: 0;
}

#adv2 {
	display: block;
	height: 100%;
	width: auto;
	float: none;
	list-style: none;
	text-align: right;
	margin: 0;
	padding: 0;
	border-left: 1px solid #fff;
}

#adv2 li {
	display: block;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}

#adv2 li a {
	display: block;
	color: #11568c;
	margin: 0;
	padding: 7px 5px 5px 5px;
	font-size: 11px;
	line-height: 14px;
	border-right: 1px solid #fff;
}

#adv2 li a:hover {
	color: #cc6600;
}

#adv2 li a.selected {
	color: #2d2d2e; 
	background: url(img/arrow-on.gif) bottom center no-repeat;
	border-right: 1px solid #fff;
}

ul.heads {
	list-style: none;
	margin: 0;
	padding: 0;
}
	
ul.heads li {
	list-style:none;
	border-bottom: 1px solid #e2e2e2;
	margin: 0;
}

ul.heads li a {
	display: block;
	margin: 15px 5px 15px 0;
	padding: 0;
	border-left: 0px solid #eee;	
}

#greycol ul.heads li {
	border-bottom: 1px solid #404040;
}

#greycol ul.heads li a {
	display: block;
	margin: 15px 5px 15px 0;
	padding: 0;
	border-left: 0px solid #eee;	
}
	
.post {
	width: auto;
	height: auto;
	padding: 0 5px;
}
.entry {
	height: auto;
	width: auto;
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 11px;		
}

.resultText {
	padding: 10px 0;
}
	
.thumb {
	position: relative;
	padding: 0;
	background: #222;
	width: 200px;
	overflow: hidden;
	margin: 0;
	color: #fff;	
}

.thumb img, .mug img, .label img {display: block;}

.thumb h3 { display: block; background: #222; width: 100%; padding: 5px 10px; margin: 0;} 

.mug {
	position: relative;
	float: left;
	background: #fff;
	margin: 0 10px 0 0;
	padding: 0;
	display: inline;	
}

.entry2 .mug {
	margin: 0 0 0 8px;
}

.panelThumb {
	width: 114px;
	height: 43px;
	float: left;
	margin: 0 5px 0 0;
	border: 1px solid #fff;
}

.pageThumb {
	position: relative;
	width: 300px;
	height: 168px;
	float: none;
	margin: 0 0 10px 0;
	padding: 0;
	overflow: hidden;
}

.video {
	position: relative;
	height: 372px;
	width: auto;
	padding: 0;
	background: #fff;
	margin: 0;	
}

.topLeft {position: absolute; z-index: 200; top: 0; left: 0;}

.topRight {position: absolute; z-index: 200; top: 0; right: 0;}

.botLeft,.conBotLeft {position: absolute; z-index: 200; bottom: 0; left: 0;}

.botRight,.conBotRight {position: absolute; z-index: 200; bottom: 0; right: 0;}

.video .botLeft,.video .botRight {bottom: 32px;}

.videoSm {position: relative; height: 200px; margin: 0 0 10px 0;}

.videoSm .botLeft,.videoSm .botRight {bottom: 32px;}

.postMeta {
	padding-bottom: 4px;
	color: #282828;
}

.select {
	margin-top: 20px;
}

/*=== navigation ===================================================================*/

#clientIcon {background: url(img/icons/client.png) no-repeat; height: 16px; padding: 2px 0 0 20px; margin: 0 0 0 20px;}

#rssIcon {background: url(img/icons/rss.png) no-repeat; height: 16px; padding: 2px 0 0 20px;  margin: 0 0 0 20px;}

a#clientIcon:hover {background: url(img/icons/client-hover.png) no-repeat;}

a#rssIcon:hover {background: url(img/icons/rss-hover.png) no-repeat;}

.navLeft {
	float: left;
	height: 72px;
	width: 10px;
	margin: 0;
	padding: 0;
	display: inline;
}

.navRight {
	float: left;
	height: 72px;
	width: 10px;
	margin: 0;
	padding: 0;
	display: inline;
}

#menuTop {
	float: left;
	height: 72px;
	width: 703px;
	padding: 0 0 0 1px;
	font: bold 11px arial,helvetica,sans-serif;
	background: url(img/mc_menu_1.gif) no-repeat;
	display: inline;
}

#menuBottom {
	width: 100%;
	margin: 0 0 40px 0;
}

#mc_menu_1 {
	list-style: none;
	height: 100%;
	width: 100%;
}

#mc_menu_1 li {
	position: relative;
	display: block;
	float: left;
	background: url(img/mc_menu_1.gif) right no-repeat;
	padding: 0 1px 0 0;	
}

#mc_menu_1 li:hover {
	background: #ddd url(img/nav-hover.gif) repeat-x !important;
}

#mc_menu_1 li a, #mc_menu_1 li a:visited {
	display: block;
	float: left;
	padding: 28px 20px 0 20px;
	height: 44px;
	color: #11568c;
	/*background: url(img/nav.gif) repeat-x;*/
}

#mc_menu_1 li a:hover {
	/*background: url(img/nav-hover.gif) repeat-x;*/	
}

#current a, #current a:visited {
	color:#fff;
	background: #ccc url(img/nav-current.gif) repeat-x;
}

/*=== Dropdown Menus ===================================================================*/


#mc_menu_1 li ul {
	position: absolute;
	margin: 72px 0 0 0;
	padding: 0;
	right: 999em;
	z-index: 999;
}


#mc_menu_1 li li {
	display: block;
	position: relative;
	text-align: right;
	margin: 0;
	padding: 0;
	width: 200px;
	height: auto;
	color: #fff;
	text-transform:none;
	
}

#mc_menu_1 li li a, #mc_menu_1 li li a:link, #mc_menu_1 li li a:visited {
	display: block;
	background: #336699;
	float: none;
	margin: 0;
	height: 16px;
	padding: 8px;
	width: auto;
	color: #fff;
	border-top: 1px solid #224466;
	border-right: 0;
	border-left: 0;
}

#mc_menu_1 li li a:hover {
	background: #cc6600;
	color: #fff;
}

#mc_menu_1 li:hover ul, #mc_menu_1 li.sfhover ul {
	right: 0em;
}

#mc_menu_1 li ul li.menuBottom {
	height: 5px;
	width: 200px;
	margin: 0;
	padding: 0;
	background: url(img/menu-bottom.png) no-repeat;
}


/*=== Bottom Nav ===================================================================*/


#mc_menu_2 {
	list-style: none;
	padding: 0;
	margin: 0;
	
}

#mc_menu_2 li {
	position: relative;
	display: inline;
	float: left;
	margin: 0;
	padding: 0 7px 0 7px;
	width: 120px;
	list-style: none;
 	cursor: pointer;
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
}

#mc_menu_2 li a{
	display : block;
	border-bottom: 0px solid #cc6600;
	padding: 0 0 2px 0;
}

#mc_menu_2 li ul{
	position: relative;
	margin: 0;
	padding: 0;
}

#mc_menu_2 li li{
	position: relative;
	display: block;
	margin: 1px 0 0 0;
	padding: 0;
	float: none;
	list-style:none;
	text-align: left;
 	cursor: pointer;
 	font-size: .8em;
 	font-weight: normal;
	text-transform: none;
	border-bottom: none;

}

#mc_menu_2 li li a{
	padding: 3px 0 3px 5px;
	border-left: 6px solid #cc6600;
	border-bottom: 0;
}

#mc_menu_2 .menuBottom {
	display: none;
	height: 0;
}	

.preview-next {
	display: inline-block;
	height: 14px;
	width: 15px;
	background: url(img/prev-arrow-right.png) no-repeat;	

}

.preview-prev {
	display: inline-block;
	height: 14px;
	width: 14px;
	background: url(img/prev-arrow-left.png) no-repeat;	
}

/*=== Form Elements ===================================================================*/

#footerRight .wpcf7{
	text-align: left;
	font-size: .8em;
}

#footerRight .wpcf7 p{	
	margin: 0 0 10px 0;
}	

select {
	border:1px solid #ccc;
	width:100%;
}	

.field {
	padding: 2px;
	border:1px solid #333;
	background:#fff;
	font-size:1.0em;
}

#clientLink {
	width: 200px;
	float: right;
	text-align: center;
	padding: 7px 0 0 0;
}

#search {
	width:300px;
	height: 24px;
	padding: 0;
	margin: 10px 5px;
	float: right;
	display: inline;	
}
	
#s {
	float: left;
	padding:1px 5px 0 5px;
	margin: 0;
	font-size: 12px;
	width: 207px;
	height: 23px;
	outline: none;
	border: 0;
	background: #fff;
	color: #454545;
	display: inline;
	background: url(img/search-back.gif) no-repeat;
}	

#searchsubmit {
	float: left;
	height: 24px;
	width: 83px;
	font-size: 11px;
	margin: 0;
	color:#fff;
	display: inline;
}


/* =----------------------------------- meta lead for each post */

span.date, span.author, span.comments { font-size: 0.8em; font-weight: bold; margin: 0; letter-spacing: -0.02em; text-transform: uppercase; padding-right: 5px;}

span.share {font-size: 0.8em; font-weight: bold; letter-spacing: -0.02em; text-transform: uppercase; }

span.author {color: #131313;}

span.date { }
	
span.comments a { background: url(img/comment.gif) no-repeat right center; padding-right: 12px;} 

span.pdf a { background: url(img/pdf.gif) no-repeat right center; padding-right: 12px;} 


/* =----------------------------------- spacing */


.noMargin {
	margin: 0;
	padding: 0;
}

.entry2 {
	position: relative;
	clear: both;
	width: 100%;
	margin: 10px 0;
	padding: 8px 0;
	font-size: 11px;
	background: #f0f0f0;
	display: block;
	float: none;
}

.entry2 a, entry2 a:visited {
	color: #11568c;
}

.entry2 p {margin: 0; padding: 0 8px;}

.entry2 h2 {
	font-size: 12px;
	font-weight: bold;
	padding: 0 8px;
}

.entry2 .mug {
	margin: 0 8px;	
}
	
.entry2 h3 {
	font-size: 15px;
	font-weight: bold;
	padding: 0 8px;
}

.entry2 .moreText {
	border: none;
}

.entry3 {
	position: relative;
	clear: both;
	margin: 10px 0;
	padding: 8px;
	font-size: 11px;
	background: #222;
	color: #fff;
	display: block;
}

.entry3 p {margin: 0;}

.entry3 h2 {
	font-size: 14px;
}

.vertSpacer {
	width: auto; 
	height: 2px;
	padding: 0;
	background: none;
	margin-top: 0;
	margin-bottom: 22px;
	margin-left: 0;
	border-bottom: 1px dotted #cc6600;
	clear: both;
}



.tags a { 
	padding-left: 5px;
}


/*=----------------------------------- photos */


.wp-caption {
	background: #000;
}

.wp-caption img{
	margin: 5px;
}

p.wp-caption-text {
	font-size: 0.9em;
	font-weight: bold;
}	




/*=----------------------------------- float properties */


.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}

.clearfix {
	display: inline-block;
	}


/*=----------------------------------- Hides from IE-mac */


* html .clearfix {
	height:1%;
	}

*+html .clearfix {
	height:1%;
	}

.clearfix {
	display:block;
	}