/*
------------------------------------------------------------------------
Theme Name: Kennedy’s Opticians
Author:Filia Dominica
Author Company URI:http://www.avasoft.net
------------------------------------------------------------------------
*/
/*
-----------------------------------------
RESET
----------------------------------------- 
*/
html, body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td, table {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0
}
fieldset, img {
	border:0
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style:normal;
	font-weight:normal
}
caption, th {
	text-align:left
}
h1, h2, h3, h4, h5, h6 {
	font-size:100%;
	font-weight:normal
}
q:before, q:after {
	content:''
}
strong {
	font-weight:bold
}
em {
	font-style:italic
}
a img {
	border:none
}
/* 
-----------------------------------------
LAYOUT
----------------------------------------- 
*/ 
html {
}
body, td {
	padding:0;
	margin:0;
	color:#000;
	font:12px Arial, Helvetica, sans-serif;
}
form, p, h1, h2, h3, h4, h5 {
	margin:0;
	padding:0;
}
img a, a img {
	border:none;
}
.clear {
	clear: both;
	height:0px;
	line-height:0px;
}
h1 {
	font:bold 18px Verdana, Arial, Helvetica, sans-serif;
	color:#304296;
	margin-bottom:10px;
}
h2 {
	font:bold 12px Verdana, Arial, Helvetica, sans-serif;
	color:#304296;
	margin-bottom:10px;
}
h2 a{
	color:#304296;
}
.highlight {	
	color:#304296;
}
hr {
	color:#000;
	height:1px;
	width:100%;
}
.wrap {
	width:958px;
	margin:0 auto;
}
.left {
	float:left;	
	width:248px;
}
.right {
	float:right;	
	width:705px;
}


/* 
-----------------------------------------
HEADER
----------------------------------------- 
*/

#bannerarea {
	background:url(../images/bannerBg.jpg) repeat-x bottom #FFF;
	height:254px;
}
#banner {
	background:url(../images/banner.jpg) no-repeat top right;
	height:254px;
	width:998px;
	margin:0 auto;
}
#logo {
	float:left;
	font:18px/22px "myriad Pro", Arial, Helvetica, sans-serif;
	margin-top:40px;
}
#logo img {
	margin-bottom:20px;
}

#middlearea {
	float:left;
	margin:40px 0 0 80px;
	text-align:right;
	width:400px;
}
#newsletter {
	text-align:right;
	float:right;
	margin:5px 20px 0 0;
}
#newsletter .txt {
	width:230px;
	border:1px solid #cbdde9;
	font:12px/20px Arial, Helvetica, sans-serif;
	height:20px;
	margin:10px 0;
	padding:2px;
}


/* 
-----------------------------------------
HEADER PAGE
----------------------------------------- 
*/

#bannerpagearea {
	background:url(../images/bannerpageBg.jpg) repeat-x bottom #FFF;
	height:155px;
}
#bannerpage {
	background:url(../images/bannerpage.jpg) no-repeat top right;
	height:155px;
	width:998px;
	margin:0 auto;
}
#bannerpage #logo {
	float:left;
	margin-top:30px;
}
#address {
	margin:5px 20px;
	font:18px/22px "myriad Pro", Arial, Helvetica, sans-serif;
}

#bannerpage #middlearea {
	float:left;
	margin:30px 0 0 80px;
	width:400px;
	text-align:left;
}
/* 
-----------------------------------------
CTA
----------------------------------------- 
*/
.box {
	width:284px;
	margin-right:50px;
	float:left;
	background:url(../images/boxB.jpg) no-repeat bottom center;
	padding-top:10px;
}
.box .area{
	padding:10px 10px;
	width:264px;
	min-height:150px;
	background:url(../images/boxT.jpg) no-repeat top center;
}
.box .detail{
	padding:15px;
}
.box .last {
	margin-right:0;
}
.box p {
	margin-bottom:10px;
}
.box a, .box a:visited {	
	color:#304296;
	font:bold 12px Arial, Helvetica, sans-serif;
	text-decoration:none;	
}
.box a:hover {	
	text-decoration:underline;	
}
.box.last {	
	margin-right:0;
	float:right;
}


/* 
-----------------------------------------
CONTENT
----------------------------------------- 
*/
#content {
	padding:20px;
	
}
#content p {
	margin-bottom:10px;
	line-height:18px
}
#content a, #content a:visited {	
	color:#304296;
	font:bold 12px Arial, Helvetica, sans-serif;	
}
#content a:hover {	
	text-decoration:none;	
}

.items-leading {
overflow:hidden;
}
/* 
-----------------------------------------
FOOTER
----------------------------------------- 
*/
#footer {
	width:958px;
	margin:0 auto;
	text-align:center;
	color:#304296;
	padding:20px 0;
}
/* 
-----------------------------------------
MENU
----------------------------------------- 
*/
#topnavarea {
	height:46px;
	background:url(../images/navBg.jpg) repeat-x center top;
}
#topnav {
	width:958px;
	margin:0 auto;
	padding:0;
	color:#FFF;
	background:url(../images/nav.jpg) no-repeat center top;
	height:46px;
	display:table;
	white-space:nowrap;
	display:block;
}
#topnav ul {
	list-style:none;
	width:958px;
	margin:0 auto;
	padding:0;
	display:table-row;
	white-space:nowrap;
	height:46px;
}
#topnav ul li {
	display:table-cell;
	position:relative;
}
#topnav ul a {
	color:#FFF;
	font:bold 13px/29px Verdana, Arial, Helvetica, sans-serif;
	padding:3px 35px 0 37px;
	background:url(../images/navLimit.png) no-repeat left;
	text-decoration:none;
	text-align:center;
	display:block;
	height:29px;
}
#topnav ul li.first a {
	background:none;
}
#topnav ul li a:hover, #topnav ul li.selected a:hover {
	color:#304296;
}
#topnav ul ul {
	position: absolute;
	z-index:1000;
	top:100%;
	left:0;
	margin:3px 0;
	width:200px;
	line-height:normal;
	height:auto;
	white-space:normal;
	border:1px solid #304296;
}
#topnav ul ul li {
	display:block;
	margin:0;
}
#topnav ul ul li a, #topnav ul li.first ul li a {
	color:#304296;
	font:bold 12px/24px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform:none;
	text-align:left;
	display:block;
	background:#c8d9e7;
	padding:0 10px;
	height:auto;
}
#topnav ul ul li a:hover, #topnav ul li.selected ul li a:hover {
	background:#304296;
	color:#FFF;
}
#topnav ul ul ul {
	position: absolute;
	top: 0;
	left:100%;
	z-index:999999;
}
#topnav ul ul, #topnav ul li:hover ul ul, #topnav ul ul li:hover ul ul {
	display: none;
}
#topnav ul li a:hover ul ul, #topnav ul li a:hover ul ul li, #topnav ul ul li a:hover ul ul li {
	display:none;
}
#topnav ul li:hover ul, #topnav ul ul li:hover ul, #topnav ul ul ul li:hover ul {
	display: block;
}
#topnav li:hover ul, li.over ul {
	display: block;
	float:left;
}
<!--
[if lt IE 7]> #topnav {
float:left;
}
body {
	behavior:url(csshover.htc);
}
#topnav ul li {
	display:block;
}
#topnav a {
	height:1%;
}
#topnav ul li a:hover ul ul, #topnav ul li a:hover ul ul li {
	display:none;
}
 <![endif]
-->
<!--
[if lt IE 8]> <style type="text/css"> #topnav ul {
display:inline-block;
}
#topnav ul {
	display:inline;
}
#topnav ul li {
	display:inline-block
}
#topnav ul li {
	display:inline;
}
#topnav ul a {
	display:inline-block;
}
#topnav {
	text-align:center
}
</style> <![endif]
-->