body {
	font-size: 12px;
	font-family: Helvetica, Verdana, Arial, sans-serif;
    background: #231f20 url(http://www.shadesoptical.com/images/backgroundGradient.jpg) no-repeat center top;
}



/* ----------------------------------- Site Structure */

.wrapper {
	width: 640px;
	margin: 80px auto 16px auto;
	box-shadow: #231f20 0px 2px 20px;
}

.headerPanel {
}

.header {
	width: 624px;
	height: 88px;
	padding: 8px;
	background-color: white;
	
	border-color: #E6E7E8;
	border-right-width: 0px;
	border-style: solid;
	border-left-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	overflow: hidden;
}

.header .logo {
	height: 88px;
	width: 88px;
	float: left;
}



.inputBlock {
	float: right;
	width: 494px;
	height: 88px;
	overflow: hidden;
	position: relative;
}

.tweetBlock {
	overflow: hidden;
	width: 536px;
	
}

.tweetBlock .tweet {
	text-align: right;
	width: 480px;
	height: 88px;
	float: left;
	position: relative;
	bottom: 0;
	color: #666666;
	font-size: 12px;
	font-family: "Gotham", Helvetica-Neue, Helvetica;
	
}

.tweet_list{
	margin: 0px;
	position: absolute;
	bottom: 0;
	right: 0;
	float: right;
	padding: 0 0 6px 0;
	width: 420px;
}

.tweetBlock .icon {
	width: 48px;
	height: 32px;
	position: relative;
	top: 56px;
	float: right;
	
	background: url(http://www.shadesoptical.com/images/tweet.gif) no-repeat;
}

.tweetBlock .icon:hover {
	background: url(http://www.shadesoptical.com/images/tweet_hover.gif) no-repeat;
}

.tweetBlock .icon a{
	width: 48px;
	height: 32px;
	opacity: 0;
}


/* ----------------------------------- Menu Panel */

.menuPanel{
	width: 624px;
	height: 112px;
	padding: 16px 8px;
	background-color: white;
	
	border-color: #E6E7E8;
	border-right-width: 0px;
	border-style: solid;
	border-left-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
}

.menuPanel .menu{
	width: 624px;
	height: 112px;
}




/* ----------------------------------- Content Panel */

.contentPanel {
	width: 624px;
	padding: 32px 8px;	
	background-color: white;
}





/* ----------------------------------- Footer Panel */

.footerPanel {
	border-color: #E6E7E8;
	border-right-width: 0px;
	border-style: solid;
	border-left-width: 0px;
	border-bottom-width: 0px;
	border-top-width: 1px;
	width: 624px;
	padding: 8px;
	
	background-color: white;
}

.footer {
	width: 624px;
	position: relative;
	overflow: hidden;
	color: #D7D9D9;
}

.footer25{
	width: 150px;
	height: 172px;
	background-color: #231f20;
	position: relative;
	float: left;
}

.footer50 {
	width: 308px;
	height: 172px;
	background-color: #231f20;
	position: relative;
	float: left;
}

.footerContent {
	padding: 8px;
	font-size: 9px;
}

.footerContentSection {
	margin: 0 0 12px 0;
	position: relative;
	overflow: hidden;
}

.footerContent a {
	color: #D7D9D9;
	text-decoration: none;
}

.footerContent a:hover {
	color: white;
	text-decoration: underline;
}

.footerContent .hours {
}


.contact {
}

.navigation {
}

.newsletter {
}

.newsletter .footerContentSection{
	font-size: 11px;
}

.emailSignupBlock {
	width: 292px;
	max-height: 32px;
	background: url(http://www.shadesoptical.com/images/emailSignupBackground.gif) no-repeat;
	position: relative;
	bottom: 0px;
	overflow: hidden;
}

.emailSignupBlock input[type="text"] {
	color: #4C4A4A;
	font-size: 14px;
	border: 0;
	height: 32px;
	margin: 0 0 0 8px;
	padding: 0;
	width: 196px;
	background: none;
}


.buttonSignUp {
	background: url(http://www.shadesoptical.com/images/buttonSignUp_up.png) no-repeat;
	float: right;
	position: relative;
	top: 4px;
	right: 4px;
}
.emailSignupBlock input[type="button"] {
	width: 64px;
	height: 24px;
	float: right;
	border: 0;
	cursor: pointer;
}

.buttonSignUp:hover {
	background: url(http://www.shadesoptical.com/images/buttonSignUp_hover.png) no-repeat;
}


#signupAlertSuccess {
	width: 30px;
	height: 92px;
	background: white;
}

#modals {
	display: none;
}

#signupAlertFail {
	width: 324px;
	height: 92px;
	background: white;
}

.YelpText{
	width: 210px;
	float: left;
}

.YelpButton {
	display: block;
	float: right;
	width: 74px;
	height: 34px;
	margin: 0 0 0 8px;
	background-image: url(../images/buttonYelp_up.gif);
}

.YelpButton:hover{
	background-image: url(../images/buttonYelp_hover.gif);
}



/* ----------------------------------- Sub Panel */

.subPanel {
	width: 640px;
	margin: 0 auto 32px auto;
}

.copyright {
	color: #535353;
	font-size: 10px;
	text-align: center;
}

.subPanel a{
	color: #4C4A4A;
	text-decoration: none;
}

.subPanel a:hover{
	color: #ED212B;
}









/* ----------------------------------- Common Elements */

a {
	color: #ED212B
}

a:hover {

}

a:visited{

}

a img {
	border: none;
	outline: none;
}

p {
	padding: 0 16px 0 0;
}

address {
	font-style: normal;
	font-size: 11px;
}


h2{
	color: #4C4A4A;
	font-size: 18px;
	font-weight: 300;
	margin: 8px 0;	
}

h3{
	color: #ED212B;
	font-size: 24px;
	font-weight: 300;
	margin: 0 0 16px 0;	
}

h4{
	color: #4C4A4A;
	font-size: 14px;
	
	padding: 0 8px 0 8px;
	margin: 0 0 0 0;
}

h5{
	margin: 0 0 2px 0;
	color: #ED212B;
	font-size: 9px;
	text-transform: uppercase;
	font-weight: normal;
}

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

li {
}

.preload {
	position: absolute;
	top: -1000px;	
}

.hrule150{
	border-color: #E6E7E8;
	border-right-width: 0px;
	border-style: solid;
	border-left-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	width: 134px;
	margin: 8px 8px;
}








/* ----------------------------------- Page Block Structure */

.content {
	width: 624px;
	position: relative;
	overflow: hidden;
	color: #4C4A4A;
}

.page {
	position: relative;
	overflow: hidden;
	margin: 0 0 0 0;
}

.menu25{
	width: 150px;
	height: 32px;
	float: left;
	margin: 0 8px 0 0;
	background-color: #ED212B;
}

.menu25:hover{
	background-color: black;
}

.activePage {
	background-color: black;
}

.menu50{
	width: 464px;
	height: 110px;
	overflow: hidden;
	float: left;
	
	border-color: #E6E7E8;
	border-style: solid;
	border-width: 1px
}


.content25{
	width: 150px;
	position: relative;
	float: left;
	height: 206px;
}

.content50 {
	width: 308px;
	position: relative;
	float: left;
	height: 206px;
	

}

.content75 {
	text-align: justify;
	width: 434px;
	position: relative;
	padding: 0 32px 0 0;
	float: left;
	line-height: 18px;
	font-size: 12px;
	line-height: 1.6em;
	
}

.content100 {
	width: 624px;
	margin: 0 0 0 0;
	position: relative;
	float: left;
	height: 206px;
}

.header25 {
	width: 150px;
	height:32px;
	background-color: #ED212B;
}

.header50 {
	width: 308px;
	height:32px;
	background-color: #ED212B;
}

.body50{
	padding: 8px;
	font-size: 11px;
	line-height: 1.4em;
}

.body50 h4{
	margin: 8px 0 8px 0;
	font-size: 12px;
	font-weight: normal;
	color: #ED212B;
}

.sitTop {
	margin: 0 0 8px 0;
}

.sitBottom {
	margin: 8px 0 0 0;
}

.sitLeft {
	margin: 0 8px 0 0;
}

.sitRight {
	margin: 0 0 0 0;
}








/* ----------------------------------- Sub-Menu Structure */


.SubMenuItem {
	word-spacing: -1px;
	font-size: 9px;
	font-weight: bold;

	position: relative;
	bottom: 0;
	text-transform: uppercase;
	height: 8px;
	
	cursor: pointer;
	color: #666666;	
}

.SubMenuItem a{
	text-decoration: none;
	color: #666666;	
}

.SubMenuItem:hover {
	color: #231f20;
	
}

.SubMenuItem:hover a{
	color: #231f20;
	
}

/*
.SubMenuItem .linkBox {
	width: 8px;
	height: 8px;
	background-color: #ED212B;
	float: left;
	margin: 0 4px 0 0 ;
	position: relative;
	bottom: 0;
}
*/

.linkBox {
	width: 8px;
	height: 8px;
	float: left;
	margin: 0 4px 0 0 ;
	position: relative;
	bottom: 0;
}

.red {
	background-color: #ED212B;
}

.black {
	background-color: #231f20;
}

.downloadMenu {
	width: 136px;
	margin: 0 0 0 8px;
	padding: 0; 
}

.expertiseMenu{
	margin: 0 0 8px 8px;
}

.addToCalendar{
	width: 150px;
	padding: 8px 0 0 8px;
	float: left;
}

.viewEvent{
	width: 142px;
	padding: 8px 0 0 8px;
	float: left;
}






/* ----------------------------------- Pages */


/* Event */

.event {
}

.eventDetails {
	overflow: hidden;
}

.eventDetails .calendarView {
	width: 150px;
	height: 157px;
	float: left;
	color: #231f20;
}

.eventDetails .calendarView .top{
	padding: 8px;
	
	border-color: #E6E7E8;
	border-right-width: 0px;
	border-style: solid;
	border-left-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	
	overflow: hidden;
}

.eventDetails .calendarView .bottom {
	padding: 0 8px 0 0;
}

.eventDetails .calendarView .day {
	text-transform: uppercase;
	font-size: 9px;
}

.eventDetails .calendarView .month {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	float: left;
}

.eventDetails .calendarView .time {
	font-size: 10px;
	font-weight: bold;
	float: right;
	position: relative;
	top: 0px;
}

.eventDetails .calendarView .date {
	letter-spacing: -10px;
	text-transform: uppercase;
	font-size: 96px;
	font-weight: bold;
	text-align: center;
}

.eventDetails .eventDescription {
	width: 150px;
	height: 157px;
	float: right;
}


.eventDetails .eventDescription .name {
	color: #ED212B;
	padding: 18px 0 0 8px;
	font-weight: bold;
}

.eventDetails .eventDescription .copy {
	padding: 8px;
	font-size: 11px;
}

.eventDetails .calendarSubMenu {
	float: left;
	width: 308px;
	height: 16px;
	border-color: #E6E7E8;
	border-style: solid;
	border-width: 1px 0 0 0;
	position: relative;

}

.eventDetails .calendarSubMenu .calendarSubMenuItem {
	word-spacing: -1px;
	float: left;
	font-size: 9px;
	font-weight: bold;
	padding: 8px 0 0 8px;
	position: relative;
	bottom: 0;
	text-transform: uppercase;
	height: 8px;
}

.eventDetails .calendarSubMenu .calendarSubMenuItem a{
	color: #231f20;
}

.eventDetails .calendarSubMenu .calendarSubMenuItem a:hover{
	color: #666666;
}

.addToCalendar{
	width: 150px;
}

.viewEvent{
	width: 142px;
}

.eventDetails .calendarSubMenu .calendarSubMenuItem .linkBox {
	width: 8px;
	height: 8px;
	background-color: #ED212B;
	float: left;
	margin: 0 4px 0 0 ;
	position: relative;
	bottom: 0;
	
}

.eventPostcard {
}





/* Exams */

.exams {
}

.examsSidebar {
}

.examsContent {
}






/* Eyewear */

.eyewear{
}

.eyewearSidebar {
}

.eyewearBrands{
	padding: 0 8px;
}

.brand a{
	
	text-transform: uppercase;
	font-weight: bold;
	background-repeat: no-repeat;
	background-image: url(http://www.shadesoptical.com/images/externalLink.gif);
	text-decoration: none;
	color: #231f20;
	font-size: 9px;
	padding: 0 0 0 12px;
}

.brand a:hover{
	color: #666666;
}

.eywearGallery{
}

#gridGallery{
	width: 450px;

}

#gridGallery ul {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

#gridGallery ul li {
	float: left;
	width: 66px;
	height: 66px;
	overflow: hidden;
	margin: 0 8px 8px 0;
	background-color: #ED212B;
}

#gridGallery ul img{
	width: 66px;
	height: 66px;
}

#gridGallery ul img:hover {
	opacity: .25;
}


/* Campaign */

.videoBlock {
	width: 624px;
	height: 400px;
	
}

.campaign {

}

.campaignDetails {
}

#postcards{
	width: 306px;
	height: 204px;
	border-color: #E6E7E8;
	border-width: 1px;
	border-style: solid;
}

.campaignPostcard {
	
}

.campaignPostcard img{
	width: 306px;
	height: 204px;
}




/* Expertise */

.expertise {
}

.expertiseSidebar {
}

.expertiseContent {
}


#overview {
	display: block;
}

#progressives {
	display: none;
}

#computereyes {
	display: none;
}

#iterminal {
	display: none;
}





/* Browser Fixes */

.ie8 #emailInput{
	margin: 8px 0 0 0;
	padding:  0 0 0 8px;
}

.ie8 .footer25, .ie8 .footer50 {
	height: 196px;
}


.mac.ff3  #emailInput{
	margin: 8px 0 0 0;
	padding:  0 0 0 8px;
}

.win.ff3 .footer25, .win.opera10 .footer50  {
	height: 196px;
}

.win.opera10 .footer25, .win.ff3 .footer50  {
	height: 196px;
}

.opera10 .newsletter .footerContentSection {
	font-size: 10px;
}

.opera10 address{
	font-size: 10px;
}

.chrome .tweetBlock .tweet {
	font-family: "Helvetica";
}

.win.chrome .footer25, .win.chrome .footer50  {
	height: 196px;
}