body {
position: relative;
height: 100%;
overflow: auto; 
}

* html body {
background: #000 url(http://www.wearcognition.com/images/uploads/background-image.jpg) top left no-repeat;
}

textarea {
background-color: #ddd;
}


a {
text-decoration: none;
}


.container {
color: transparent;
}

.clear_left {clear: left;}
/*----Colors---*/

.left {
float: left;
}

.right {
float: right;
}

#hats .container a {
color: #e3f2dc;
}


.entry a {
color: #9faeb2;
}


.container {
position: relative;
z-index: 4;
width: 100%;
}



#background {
position: fixed; 
z-index: 0;
left: 0; 
top: 0;
width: 100%; 
height: 100%;
}

* html #background {
display: none;
}

#background img {
position: fixed; 
z-index: 0;
left: 0; 
top: 0;
width: 100%; 
height: 100%;
}

* html #background img {
display: none;
}

/*---Header----*/

#header {
position: relative;
top: 0;
left: 0;
background: transparent url(http://www.wearcognition.com/images/uploads/featuresback2.png) top left repeat;
height: 85px;
width: 100%;
min-width: 950px;
border-bottom: 2px solid #333;
border-top: 6px solid #333;
z-index: 5;
}

* html #header {
postion: absolute;
top: 0;
left: 0;
background-color: #000;
background-image: none;
}

#logo {
position: absolute;
top: 10px;
left: 10px;
width: 335px;
z-index: 30;
}

#call-to-action {
color: #fff;
padding: 0;
margin: 0;
width: 300px;
}


/*----Nav------*/
#nav {
line-height: 43px;
font-size: 35px;
color: #fff;
font-family: helevetica, arial, san-serif;
font-weight: bold;
margin-left: 440px;
text-align: center;
float: left;
width: 510px;
list-style-type: none;
display: inline;
}


#nav li {
float: left;
margin: 0 20px 0 0;
}

#nav a {
color: #eee;
}

.pink-overline, .pink-overline h2 {
color: #eee;
border-top: 8px solid #a8b25f;
}
.blue-overline, .blue-overline h2 {
color: #eee;
border-top: 8px solid #e3f2dc;
}
.orange-overline, .orange-overline h2 {
color: #eee;
border-top: 8px solid #9faeb2;
}


#nav .white-overline {
border-top: 8px solid #eee;
color: #eee;
}

/*----Search----*/
#search {
padding-left: 40px;
width: 260px;
}

input {
background-color: #eee;
border: 1px bevel #333;
line-height: 14px;
padding: 1px;
color: #333;
}

input:focus {
background: white;
}
label {display: none; visibility: hidden;}

input.submit {
	width: 5em;
	padding: .1em .5em;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	border: solid thin #e3f2dc;
	-webkit-border-radius: .7em;
	-moz-border-radius: .7em;
	border-radius: .7em;
	-webkit-box-shadow: 2px 2px 3px #999; 
	box-shadow: 2px 2px 2px #bbb;
	background-color: #333;
        font-weight: bold;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#ddd),color-stop(0.4, #eee));
}

#viewcart {
width: 13em;
font-weight: bold;
clear: both;
margin-left: 330px;
}




#footer #viewcart {
display: none;
visibility: hidden;
}

/*--Footer Nav--*/
#footer {
position: relative;
border-top: 8px solid #333;
float: left;
clear: both;
background: black;
color: #ddd;
text-align: left;
margin-top: 8px;
padding: 10px 0 20px 0px;
width: 100%;
}

#footer .vcard {
margin: 0px 40px 8px 40px;
padding-top: 5px;
display: block;
width: 90%;
}

#footer-nav {
float: left;
width: 300px; 
margin: 0 40px;
}

#footer-nav .pink-overline {
color: #eee;
border-top: 3px solid #a8b25f;
}
#footer-nav .blue-overline {
color: #eee;
border-top: 3px solid #e3f2dc;
}
#footer-nav .orange-overline {
color: #eee;
border-top: 3px solid #9faeb2;
}

#footer-nav .white-overline {
border-top: 3px solid #eee;
color: #eee;
}

#footer-nav .orange a,
#nav .orange a {
color: #9faeb2;

}

#footer-nav .blue a,
#nav .blue a {
color: #e3f2dc;
}

#footer-nav .pink a,
#nav .pink a {
color: #a8b25f;
}

#footer-nav .white a,
#nav .white a {
color: #eee;
}

.org {
font-weight: bold;
font-size: 16px;
line-height: 20px;
}

.email {
color: #eee;
text-decoration: underline;
}

#footer-nav li {
list-style-type: none;
float: left;
font-size: 18px;
font-weight: bold;
margin-right: 5px;
padding: 0px;
}

#footer-nav li a {
border-top: 3px solid;
}

/*----homepage---*/

#home blockqoute {
display: block;
clear: both;
border: 2px solid #333;
background: transparent url(http://www.wearcognition.com/images/uploads/featuresback2.png) top left repeat;
font-family: helevetica, arial, san-serif;
font-weight: bold;
font-size: 28px;
line-height: 28px;
padding: 8px;
color: #eee;
overflow: hidden;
position: absolute;
top: 150px;
left: 40px;
}




*:first-child+html #home #qoute {
display: block;
clear: both;
border: 2px solid #333;
background: transparent url(http://www.wearcognition.com/images/uploads/featuresback2.png) top left repeat;
font-family: helevetica, arial, san-serif;
font-weight: bold;
font-size: 28px;
line-height: 28px;
padding: 8px;
color: #eee;
overflow: hidden;
position: absolute;
top: 160px;
left: 40px;
}

* html #home #qoute {
background-color: #000;
background-image: none;
display: block;
clear: both;
border: 2px solid #333;
font-family: helevetica, arial, san-serif;
font-weight: bold;
font-size: 28px;
line-height: 28px;
padding: 8px;
color: #eee;
overflow: hidden;
position: absolute;
top: 160px;
left: 40px;
}


blockqoute p {
margin: 0px;
padding: 0px
}

.cite {
font-size: 10px;
line-height: 10px;
clear: both;
display: block;
margin: 0 0 5px 0px;
padding: 0px;

}

.hat_link {
display: inline;
line-height: 1.5em;
font-size: .5em;
margin-right: 8px;
}

.hat_link:after{
content:">>"
}

/*----Feature----*/

#feature-nav {
margin-top: 340px;
float: left;
}

.feature:hover {
background: black;
}

.feature {
border: 2px solid #333;
color: #eee;
width: 262px;
height: 185px;
overflow: hidden;
padding: 0 5px;
background: transparent url(http://www.wearcognition.com/images/uploads/featuresback2.png) top left repeat;
}

* html .feature {
background-color: #000;
background-image: none;
}

.feature h2 {
padding:   0;
margin: 0;
line-height: 29px;
width: 258px;
overflow: hidden;
}

.feature .pink-overline h2 {
border-top: 0px;
}
.feature .blue-overline h2 {
border-top: 0px;
}
.feature .orange-overline h2 {
border-top: 0px;
}

.spacer {
margin-top: 5px;
}


.feature p {
padding: 0px;
margin: 0px;
}

.feature-image {
float: left;
margin: 5px;
width: 80px;
border: 1px solid #333;
}


/*---Container---*/
#blog, #search_results, #product-holder {
position: relative;
z-index: 2;
margin-left: 40px;
border: 2px solid #333;
color: #eee;
background: transparent url(http://www.wearcognition.com/images/uploads/featuresback2.png) top left repeat;
}

* html #blog, * html  #search_results, * html #product-holder {
margin-top: 60px;
background-color: #000;
background-image: none;
}

*:first-child+html #blog, 
*:first-child+html #search_results, 
*:first-child+html #product-holder {
margin-left: 40px;
margin-top: 60px;
}

/*---Blog---*/

.story {
background: #000;
margin: 10px 10px 20px 10px;
border: 1px solid #333;
padding: 12px 30px;
float: left;
}

#about .entry {
background: #000;
margin: 10px 10px 20px 10px;
border: 1px solid #333;
padding: 12px 30px;
float: left;
width: 825px;
}

.story img {max-width: 550px;}


.story p {
font-size: 1.2em;
}

.date {
text-align: center;
line-height: .7em;
}

#right_column {
background: #000;
border: 1px solid #333;
padding: 12px 88px 30px 30px;
position: absolute;
top: -8px;
left: 631px
}

#right_column h2 {
line-height: 22px;
margin: 0 0 5px 0;
padding: 0;
border-bottom: 1px solid;
}

.comment-box {
background-color: #333;
border: 1px solid #9faeb2;
margin: 16px 0;
}

.comment-box-alt {
background-color: #333;
border: 1px solid #e3f2dc;
margin: 16px 0;
}


.comment-box p, .comment-box-alt p {
padding: 3px 8px;
margin: 0px;
}

.comment-box-alt .posted {
background: #111;
padding: 8px;
color: #9faeb2;
border-top: #222 solid 1px;
}


.comment-box .posted {
background: #111;
padding: 8px;
color: #e3f2dc;
border-top: #222 solid 1px;
}



/*---Search Results---*/
.paginate {
 padding:10px 6px 10px 4px;
 margin:0;
 background-color:transparent;
}


.tablePad {
 padding:3px 3px 5px 3px;
}

.resultRowOne {
 color:	#000;
 padding: 6px 6px 6px 8px;
 background-color:#DADADD;
}

.resultRowTwo {
 color:#000;
 padding:6px 6px 6px 8px;
 background-color:  #eee;
}

.resultHead {
 font-weight: 		bold;
 padding: 8px 0 8px 8px;
 border-bottom:	1px solid #999;
 background-color:transparent;
}

/*---Hats Catalog page---*/
.customhats {
background: #000;
padding-top: 20px;
margin-bottom: 8px;
clear: both;
border: 1px solid #333;
text-align: center;
font-size: 1.2em;
}

#hat_nav {
text-align: left;
width: 100%;
font-size: 1.3em;
}

#hat_nav a {
position: relative;
z-index: 3;
font-weight: bold;
font-size: 1.2em;
}

a.div-link {
display: block;
width: 100%;
height: 100%;
}

.item {
height: 160px;
overflow: hidden;
border: 1px solid #333;
padding: 8px 0;
text-align: center;
font-size: .7em;
line-height: 2.2em;
}

.lifestyle-image, .hat-image {
display: block;
height: 100px;
width: 100px;
margin-left: 4px;
overflow: hidden;
position: relative;
z-index: 1000;
border: 1px solid #333;
}

.thumb, .item h2, #viewcart {
position: relative;
z-index: 999;
}

.pagination {
text-align: right;
clear: both;
margin-left:8px;
font-weight: bold;
color: #eee;

}


.pagination a {
color: #e3f2dc;
padding: 2px 7px;
background-color: #000;
border: 1px solid #e3f2dc;
font-weight: bold;
}

.pagination strong {
border: 1px solid #000;
background-color: #333;
padding: 2px 7px;
width: 8px;
height: 18px;
}


#product-holder {
padding: 0 10px;
}

#blog a,
#product-holder a {
color: #eee;
text-decoration: underline;
}


/*---Hats Purchae Page----*/
#caps #gallery {
float: left;
width: 400px;
}

#gallery img {
border: 1px solid #333;
}

#gallery ul {
margin: 0px;
list-style-type: none;
}

#caps #gallery li {
float: left;
list-style-type: none;
margin: 8px;
}


#caps #gallery .frame {
width: 100px;
height: 100px;
overflow: hidden;
}

#caps #gallery li.hat1 {
height: auto !important;
width: 400px !important;
}

#product-info {
float: left;
width: 380px;
}


select {
margin: 8px 0;
}

.addcart {
width: 15em !important;
height: 3em;
font-weight: bold;
font-size: 1.2em;
margin: 8px 0;
}

.center {
margin-top: 1.5em;
border-top: 1px solid #333;
padding: 10px 0;
}

.customhats {
padding: 3px 0px;
}

.customhats p {
margin: 0;
}

/*---Error Page----*/
.other-things, #page_heading {color: #eee;}

/*---Light Box---*/

#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

body {padding:0; margin:0; height:100%; width:100%;}

/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}

/* Container */
#simplemodal-container {height:400px; width:600px; background-color:#fff; border:3px solid #ccc;}
#simplemodal-container a.modalCloseImg {background:url(http://wearcognition.com/images/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer;}
#simplemodal-container #basicModalContent {padding:8px;}
/* IE 6 hacks*/
* html #simplemodal-container a.modalCloseImg {background:none; right:-14px; width:22px; height:26px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/basic/x.png',sizingMethod='scale');}

.hide {display:none; visibility: hidden;}