@import url("reset.css");

body {background: #eee url(../img/bg_body_top.jpg) repeat-x top left; color: #000; font-size: 82.5%; font-family: Arial, sans-serif; text-align: center;}
#wrap {width: 960px; margin: 0 auto; text-align: left; background: #fff url(../img/bg_wrap_top.jpg) repeat-x top left;}

#header {height: 139px; position: relative;}
#header h1, #header h2 {text-indent: -9999px;}
#logo {width: 195px; height: 100px; background: url(../img/character_eyez_logo.png) no-repeat top left; display: block; text-indent: -9999px; position: absolute; top: 25px; left: 32px;}
#header_nav  a {display: block; text-indent: -9999px;}
#contact_us {width: 96px; height: 24px; background: url(../img/contact_us.png) no-repeat top left; position: absolute; top: 25px; right: 54px;}
#get_directions {width: 116px; height: 24px; background: url(../img/get_directions.png) no-repeat top left; position: absolute; top: 25px; right: 160px;}
#phone_number {width: 426px; height: 71px; position: absolute; top: 60px; right: 22px; background: url(../img/character_eyez_phone_number.png) no-repeat top left; text-indent: -9999px;}
#arrow {width: 160px; height: 145px; position: absolute; top: 0; right: -117px; background: url(../img/arrow.png) no-repeat top right; display: block; text-indent: -9999px;}
#logo, #arrow, #phone_number {cursor: hand;}

#primary_nav {height: 47px; overflow: hidden;}
#primary_nav li {display: block; float: left; height: 47px;}
#primary_nav li a {display: block; height: 47px; text-indent: -9999px; cursor: pointer;}
#nav_home {width:90px;}
#nav_home a {width: 90px; background: url(../img/nav_home_off.png) no-repeat top left;}
#nav_home a:hover, .home #nav_home a {background: url(../img/nav_home_on.png) no-repeat top left;}
#nav_fashion {width: 102px;}
#nav_fashion a {width: 102px; background: url(../img/nav_fashion_off.png) no-repeat top left;}
#nav_fashion a:hover, .fashion #nav_fashion a {background: url(../img/nav_fashion_on.png) no-repeat top left;}
#nav_performance {width: 144px;}
#nav_performance a {width: 144px; background: url(../img/nav_performance_off.png) no-repeat top left;}
#nav_performance a:hover, .performance #nav_performance a {background: url(../img/nav_performance_on.png) no-repeat top left;}
#nav_vintage {width: 103px;}
#nav_vintage a {width: 103px; background: url(../img/nav_vintage_off.png) no-repeat top left;}
#nav_vintage a:hover, .vintage #nav_vintage a {background: url(../img/nav_vintage_on.png) no-repeat top left;}
#nav_lenses {width: 177px;}
#nav_lenses a {width: 177px; background: url(../img/nav_lenses_off.png) no-repeat top left;}
#nav_lenses a:hover, .lenses #nav_lenses a {background: url(../img/nav_lenses_on.png) no-repeat top left;}
#nav_guarantee {width: 126px;}
#nav_guarantee a {width: 126px; background: url(../img/nav_guarantee_off.png) no-repeat top left;}
#nav_guarantee a:hover, .guarantee #nav_guarantee a {background: url(../img/nav_guarantee_on.png) no-repeat top left;}
#nav_story {width: 120px;}
#nav_story a {width: 120px; background: url(../img/nav_story_off.png) no-repeat top left;}
#nav_story a:hover, .story #nav_story a {background: url(../img/nav_story_on.png) no-repeat top left;}

#banner {height: 320px; background: #fff url(../img/home_banner_blank.jpg) no-repeat top left; position: relative;}
#banner a {display: block; width: 960px; height: 320px; position: absolute; top: 0 ; left: 0;}
#brands {height: 225px; padding: 0 0 20px 0; position: relative;}
#brands a {display: block; position: absolute; top: 0; left: 0;}

#grid {overflow: hidden; clear: both;}
.cell {width: 297px; background: #fff; float: left; margin: 0 10px 10px 0; height: 250px; border: 1px solid #ddd; overflow: hidden;}
.cell_gutter {padding: 10px;}
#main {overflow: hidden;}
#main .cell_gutter h4 {font-size: 1.2em; font-family: Arial; font-weight: bold;}
#main .cell_gutter h4 a {color: blue;}
#main h5 {font-size: 1.2em; font-weight: bold; margin: 0 0 10px 0;}
#main h6 {font-weight: bold; margin: 0 0 5px 0;}
.sub_section {margin: 0 0 10px 0; padding: 0 20px;}

#products_box {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}

#main_sub_left {width: 263px; float: left; padding: 20px;}
#main_sub_right {width: 263px; float: right; padding: 20px;}

#addthis {text-align: center; display: block; margin: 0 auto; width: 185px;}

.logo_left {float: left; padding: 0 10px 10px 0;}

.page_banner {height: 160px; position: relative;}
.page_banner  img {position: absolute; top: 0; left: 0;}
.page_banner h1, .page_banner  h2 {text-indent: -9999px;}

strong {font-weight: bold;}

#main {overflow: hidden; padding: 32px 0; background: #fff;}
#main h3 {font-size: 2.2em; margin: 0 0 10px 0; font-family: Palatino Linotype, Book Antiqua, Palatino, serif; border-bottom: 1px solid #ddd; padding: 0 0 10px 0; color: #333;}
#main h4 {font-size: 1.6em; margin: 0 0 10px 0; font-family: Palatino Linotype, Book Antiqua, Palatino, serif; border-bottom: 1px solid #ddd; padding: 0 0 10px 0; color: #333;}
#main h4 a {text-decoration: none; color: #333;}
#main p {line-height: 1.5em; margin: 0 0 10px 0;}
#primary_content {width: 682px; float: left;}
#primary_content .gutter {padding: 0 32px;}
#primary_content_wide {width: 960px; }
#primary_content_wide .gutter {padding: 0 32px;}
#contact_store {text-align: center; background: #ddd url(../img/store_bg.jpg) repeat-y top left; padding: 20px;}

.main_section .list {list-style: disc;}
.main_section .list li {margin: 0 0 5px 20px;}

#order_now {width: 150px; height: 67px; margin: 10px auto; background: url(../img/order_now.png); display: block; text-indent: -9999px;}
#order_now:hover {background: url(../img/order_now_on.png);}

#store {width: 814px; margin: 0 auto; background: #fff; padding: 20px; border: 1px solid #ccc;}

#sidebar {width: 278px; float: right;}
#sidebar .gutter {padding: 0 32px 0 0;}
.sidebar_box {margin: 0 0 20px 0;}
.video {padding: 10px; background: #eee;}
.main_section {margin: 0 0 10px 0; overflow: hidden;}
.phone_big {font-size: 2em; font-weight: bold; display: block; text-align: center; background: #fffb89; padding: 5px;}
.sidebar_bottom {text-align: right;}

.testimonial {margin: 0 0 10px 0; padding: 9px; background: #eee; border: 1px solid #aaa;}
#main p.testimonial_quote {color: #555; font-size: 1.1em; font-style: italic; text-align: left;}
#main p.testimonial_name {color: #222; text-align: right; font-weight: bold;}

.sidebar_form form {width: 244px; display: block; background: #eee; padding: 10px 0 0 0; border: 1px solid #777;}
.sidebar_form form .form_row {overflow: hidden; padding: 0 10px 10px 10px;} 
.sidebar_form form .form_row label {width: 48px; float: left;font-weight: bold; height: 1.2em;display: block; padding: 4px 0; color: #222;}
.sidebar_form form .form_row .input {width: 174px; float: right;}
.sidebar_form form .textbox {width: 166px; border: 0; padding: 4px; height: 1.2em; font-size: 1em; font-weight: normal; border: 1px solid #777; background: #fff;}
.sidebar_form form .submit_row {text-align: right; padding: 0 10px 10px 10px;}
.sidebar_form form .submit_row input {cursor: pointer;}

.sidebar_form form .form_wide_row {overflow:hidden; padding: 0 9px 10px 9px;}
.sidebar_form form .form_wide_row label {font-weight: bold; margin: 0 0 5px 0; display: block; color: #222;}
.sidebar_form form .form_wide_row .textarea {width: 216px; height: 50px; padding: 4px; margin: 0; border: 1px solid #777;}

.main_form form {width: 616px; background: #eee; padding: 10px 0 0 0; border: 1px solid #ddd;}
.main_form form .form_row {padding: 0 10px 10px 10px;}
.main_form form .form_row label {font-weight: bold; margin: 0 0 5px 0; display: block; color: #222; }
.main_form form .form_row .input {}
.main_form form .textbox {width: 250px; border: 0; padding: 4px; height: 1.2em; font-size: 1em; font-weight: normal; border: 1px solid #aaa; background: #fff;}
.main_form form .form_row .textarea {width: 586px; height: 100px; padding: 4px; margin: 0; border: 1px solid #aaa;}
.main_form form .submit_row {text-align: right; padding: 0 10px 10px 10px;}
.main_form form .submit_row input {cursor: pointer;}

.twitter_feed {padding: 10px 0 0 0;}

.sidebar_links  {list-style: disc;}
.sidebar_links li {margin: 0 0 5px 20px;}

.sidebar_bottom_section {margin: 0 0 20px 0; list-style-type: square; color: #ccc;}
.sidebar_bottom_section li {margin: 0 0 0 20px;}

.img_left {float: left; margin: 0 20px 10px 0;}
.img_right {float: right; margin: 0 0 10px 20px;}
.img_center {margin: 10px auto;}

.red {color: red;}

#guarantee_box {border: 1px solid #ddd; padding: 20px; background: #efefef; overflow: hidden; margin: 0 0 10px 0;}
#guarantee_logo {float: left; margin: 0 20px 0 0; padding: 20px;}
#guarantee_box p {padding: 10px; line-height: 200%;}

#sidebar_menu_top {margin: 0 0 20px 0;}

.directions {margin: 10px 0 0 0; display: block;}

#benefits {width: 618px; overflow: hidden; padding: 10px 0;}
#benefits_left {width: 309px; float: left;}
#benefits_right {width: 309px; float: right;}
#benefits ul {list-style: none;}
#benefits ul li {display: block; width: 279px; height: 20px; padding: 6px 0 4px 30px; background: url(../img/check.gif) no-repeat top left; font-weight: bold;}

#google_map {width: 616px; height: 540px; border: 1px solid #ddd;}
.larger_map {margin: 10px 0 0 0;}

.video_box {overflow: hidden; background: #fff; margin: 0 0 20px 0; clear: both;}
.video_container {width: 186px; float: left; margin: 0 15px 20px 0;}
.video_container h5 {font-weight: bold; margin: 0 0 10px 0;}

#coupon {display: block; width: 614px; color: #000; border: 2px dashed #777; background: url(../img/dollar_bw.png) no-repeat 16px 10px; margin-bottom: 10px;}
#coupon:hover {text-decoration: none; border: 2px dashed #000; color: #000; background: url(../img/dollar.png) no-repeat 16px 10px;}
#coupon:hover h5 {color: #79b943;}
#coupon .gutter {padding: 20px 20px 20px 130px;}
#coupon h5 {font-size: 1.6em; font-weight: bold; margin: 0 0 5px 0;}
#main .bottom {margin: 0;}
.bold {font-weight: bold;}

#footer {background: #3e4b54 url(../img/bg_footer.png) repeat-x top left; height: 245px; color: #fff;}
#main_bottom {width: 1000px; height: 52px; margin: 0 auto; background: url(../img/bg_main_bottom.png) no-repeat top left;}
#main_footer {width: 960px;}
#footer a {color: #aaa;}
#footer p {margin: 0 0 10px 0;}

#twtr-widget-1 h3, #twtr-widget-1 h4 {border-bottom: 0;}
#twitter_button {text-align: center;}
#facebook_button {text-align: center;}
#google_button {text-align: center;}
#google_plus_button {text-align: center;}
#mc_button {text-align: center;}

.img_home_left {float: left; margin: 5px 10px 10px 0;}

em {font-style: italic; font-weight: bold;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
.highlight {background: #fffb89;}

/* Responsive */
@media screen and (max-width: 500px) {	
	#wrap { width: 100%; }
	#header { width: 100%; }
	.page_banner { width: 100%; display: none; }
	.page_banner img { max-width: 100%; }
	#phone_number { display: none; }
	#banner a img { max-width: 100%; }
	#arrow { display: none; }
	#header_nav { display: none; }
	#primary_nav { width: 100%; height: 160px; background: #eee; }
	#primary_nav li { float: left; }
	.page_banner { height: 160px; }
	#banner { width: 100%; height: 160px; }
	#banner a { display: block; width: 100% !important; height: 140px;}
	#primary_content { width: 100%; }
	#benefits { width: 100%; }
	#benefits_left { width: 100%; }
	#benefits_right { width: 100%; }
	#video_feature { display: none; }
	#brands a img { max-width: 100%; height: 160px; }
	#brands { width: 100%; height: 160px; }	
	.facebook_feed { display: none; }
	#sidebar { width: 100%; }
	#sidebar .gutter { margin: 0px 32px; }
	#main_bottom { display: none; }
	#main { width: 100%; }
	#copyright { padding: 32px 0; }
	#copyright p { margin-bottom: 10px; }
	#addthis { margin-top: 32px; }
	#google_map { width: 100%; }
}