/* 
**
** Styling for mycompleteeyecare.com
**
*/

/* Default value reset for IE */
* { padding: 0px; margin: 0px; }

/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers only */
html { font-size: 100%; height: 100%; margin-bottom: 1px; }

/* Page Containers and Default Properties */
body { background: #E8E9E1; margin: 0px; padding: 0px; text-align: center; }
#cspacer { height: 30px; width: 739px; margin: auto; } /* just a little spacer at the top of the page */
#container { margin: auto; width: 739px; } /* virtually everything goes inside this div to keep everything centered */

/* 
###### default link styling commented out due to interference with other styles - left here incase it needs to be used in future (to save time) ######
a:link, a:active, a:visited, a:hover a:focus { font: 10px/110% Tahoma, sans-serif; color: #000; text-decoration: none; letter-spacing: 1px; outline: 0; }
*/

p { font: 12px/110% Tahoma, sans-serif; color: #444; text-decoration: none; letter-spacing: 1px; }
p a { color: #0066CC; text-decoration: none; }
p a:hover { color: #000; text-decoration: none; }
p a:focus { outline: 0; }

img { border: 0px; }

hr { height: 1px; width: 100%; background: #ccc; }

h1 { font: bold 16px/110% Tahoma, sans-serif; color: #444; text-decoration: none; letter-spacing: 1px; }

h2 { font: italic 14px/110% Tahoma, sans-serif; color: #000; text-decoration: none; letter-spacing: 1px; width: 100%; background: #ccc; height: 18px; padding-top: 4px; padding-bottom: 4px; text-indent: 8px;}

strong { font: bold; }

/* Header Divs */
.hdr1 { background: url(../gfx/hdr1.jpg) no-repeat; height: 39px; width: 739px; padding: 0px; margin: 0px; border: 0px; } 
.hdr2 { background: url(../gfx/hdr2.jpg) no-repeat; height: 49px; width: 739px; padding: 0px; margin: 0px; border: 0px; }
.hdr3 { background: url(../gfx/hdr3.jpg) no-repeat; height: 44px; width: 739px; padding: 0px; margin: 0px; border: 0px; }

/*  
** Menu Divs
** #navigation div is a container that holds the hidden txt links. See comments below for more info.
*/
#navigation { background: url(../gfx/menu-home.jpg) no-repeat; height: 41px; width: 739px; padding: 0px; margin: 0px; border: 0px; }
#navigation2 { background: url(../gfx/menu-aboutus.jpg) no-repeat; height: 41px; width: 739px; padding: 0px; margin: 0px; border: 0px; }
#navigation3 { background: url(../gfx/menu-optprod.jpg) no-repeat; height: 41px; width: 739px; padding: 0px; margin: 0px; border: 0px; }
#navigation4 { background: url(../gfx/menu-abouteyes.jpg) no-repeat; height: 41px; width: 739px; padding: 0px; margin: 0px; border: 0px; }
#navigation5 { background: url(../gfx/menu-patients.jpg) no-repeat; height: 41px; width: 739px; padding: 0px; margin: 0px; border: 0px; }
#navigation6 { background: url(../gfx/menu-contact.jpg) no-repeat; height: 41px; width: 739px; padding: 0px; margin: 0px; border: 0px; }
ul#linkmenu, #linkmenu li { padding: 0px; margin: 0px; list-style: none; }
ul#linkmenu { float: left; height: 0px; /* these two lines fix that extra whitespace problem on the layout */ }
#linkmenu li { font: 16px/110% Arial, Helvetica, sans-serif !important; /* For IE */ color: #EE0000; position: relative; width: 10px; } 
#linkmenu li a { text-decoration: none; background: none; } /* to show link positioning in page, comment out this line */
#linkmenu li a span { visibility: hidden; } /* to show link positioning in page, comment out this line */

/* these are each of the positioned link areas inside of the #navigation container */
.n-home { top: 8px; left: 30px; }
.n-home a { font: 18px/110% Tahoma, sans-serif; color: #EE0000; text-decoration: none; letter-spacing: 0px; }
.n-home a:focus { outline: 0; }
.n-about { top: -9px; left: 95px; }
.n-about a { font: 18px/110% Tahoma, sans-serif; color: #EE0000; text-decoration: none; letter-spacing: 5px; }
.n-about a:focus { outline: 0; }
.n-optical { top: -30px; left: 190px; }
.n-optical a { font: 18px/110% Tahoma, sans-serif; color: #EE0000; text-decoration: none; letter-spacing: 12px; }
.n-optical a:focus { outline: 0; }
.n-abouteyes { top: -50px; left: 353px; }
.n-abouteyes a { font: 18px/110% Tahoma, sans-serif; color: #EE0000; text-decoration: none; letter-spacing: 20px; }
.n-abouteyes a:focus { outline: 0; }
.n-patients { top: -70px; left: 496px; }
.n-patients a { font: 18px/110% Tahoma, sans-serif; color: #EE0000; text-decoration: none; letter-spacing: 3px; }
.n-patients a:focus { outline: 0; }
.n-contact { top: -90px; left: 618px; }
.n-contact a { font: 18px/110% Tahoma, sans-serif; color: #EE0000; text-decoration: none; letter-spacing: 2px; }
.n-contact a:focus { outline: 0; }

/* menu styling for drop down stuff - originally included with anylink script from dynamicdrive.com, edited by me */
#dropmenudiv {
	position: absolute;
	font: bold 12px/110% Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
	text-decoration: none;
	z-index: 100;
	border: 4px solid #C2E99B;
	}
#dropmenudiv a { 
	font: 12px/110% Arial, Helvetica, sans-serif;
	color: #0000AA;
	width: 100%; 
	display: block; 
	text-indent: 3px; 
	text-align: left;
	padding: 1px 0; 
	text-decoration: none; 
	}
#dropmenudiv a:hover { background: #0066CC; color: #fff;} /*hover background color*/ 
#dropmenudiv a:focus { outline: 0; }


/* Content Wrapper - Just to make sure the content and the sidebar stay where they're supposed to be */
.wrapper { background: url(../gfx/wrapper_bg.jpg) repeat-y; width: 739px; padding: 0px; margin: 0px; border: 0px; display: table; }

/* Content Area Divs - sidebar on left, content on right */
div.content { text-decoration: none }
.sidebar { font: 11px/110% Arial, Helvetica, sans-serif; color: #555; text-decoration: none; letter-spacing: 1px; float: left; width: 152px; text-align: center; margin-left: 11px; }
.sidebar a { color: #C2E99B; text-decoration: none; }
.sidebar a:hover { color: #fff; text-decoration: none; }
.sidebar a:focus { outline: 0; }
.txt { font: 11px/110% Arial, Helvetica, sans-serif; color: #555; text-decoration: none; letter-spacing: 1px; float: right; width: 539px; text-align: left; margin-right: 20px; }
.txt a { color: #0066CC; text-decoration: none; }
.txt a:hover { color: #000; text-decoration: none; }
.txt a:focus { outline: 0; }

/* li styling for content lists */
.lipush {
	margin: 0px 0px 8px 8px;
	padding: 0px;
	font: 12px/110% Tahoma, sans-serif;
	color: #444;
	text-decoration: none;
	letter-spacing: 1px;
	list-style-type: none;
	width: 90%;
}

/* Sidebar styling */
#menuhead {
	font: bold italic 14px/110% Tahoma, Helvetica, sans-serif;
	color: #EBE9CB;
	width: 100%;
	text-align: left;
	background: #308BCB;
	margin: auto;
	padding: 4px 0px 4px 0px;
	border-bottom: 1px solid #308BCB; 
	border-top: 1px solid #308BCB;
	}

#menulinks { 
	width: 129px; 
	font: bold 12px/110% Arial, Helvetica, sans-serif; 
	color: #000; 
	text-align: left; 
	padding: 8px 0px 4px 0px; 
	background: #2778B0; 
	border-top: 0px; 
	border-left: 2px solid #2778B0; 
	border-bottom: 2px solid #2778B0; 
	border-right: 2px solid #2778B0; 
	margin: auto;
	}
#menulinks a { color: #fff; text-decoration: none; padding-left: 8px; }
#menulinks a:hover { color: #C2C7B1; text-decoration: none; }
#menulinks a:focus { outline: 0; }

#hoursbox { 
	width: 129px; 
	font: 10px/110% Tahoma, Helvetica, sans-serif; 
	color: #fff; 
	text-align: left; 
	padding: 2px; 
	background: #2778B0; 
	border-top: 0px; 
	border-left: 2px solid #2778B0; 
	border-bottom: 2px solid #2778B0; 
	border-right: 2px solid #2778B0; 
	margin: auto;
	}

#sideitem { 
	width: 129px; 
	font: 11px/110% Tahoma, Helvetica, sans-serif; 
	color: #fff; 
	text-align: center; 
	border: 1px solid #34A8F5; /* 2778B0 */
	background: #2170A4;
	padding: 3px;
	margin: auto;
	}
#sideitem a { font: bold 12px/110% Tahoma, Helvetica, sans-serif; color: #C2C7B1; text-decoration: none; }
#sideitem a:hover { font: bold 12px/110% Tahoma, Helvetica, sans-serif; color: #C2C7B1; text-decoration: underline; }
#sideitem a:focus { outline: 0; }

/* 
NOTE: Footer is in 2 parts! 
-First part is the links which contains a simple image map, see source. 
-Second part contains the company info and site credits. 
*/

/* footer links div (1st part) - this div is simply a container/bg for the image map */
.footerlinks { background: url(../gfx/footer_links_bg.jpg) no-repeat; height: 37px; width: 739px; padding: 0px; margin: 0px; border: 0px; }

/*
*** footer credits div (2nd part) 
fcwrap div is a wrapper/container to keep everything together. 
Sometimes divs that split content into 2 columns have display issues with other layers!
 */
.fcwrap { background: url(../gfx/footer_lower_bg.jpg) no-repeat; height: 71px; width: 739px; padding: 8px 0px 0px 0px; margin: 0px; border: 0px; }

/* This is for separating content, left and right, inside of the fcwrap div. */
div.fcon { text-decoration: none }
.fcl { font: 11px/110% Arial, Helvetica, sans-serif; color: #555; text-decoration: none; letter-spacing: 1px; float: left; text-align: left; margin-left: 30px; }
.fcl a { color: #0066CC; text-decoration: none; }
.fcl a:hover { color: #000; text-decoration: none; }
.fcl a:focus { outline: 0; }
.fcr { font: 11px/110% Arial, Helvetica, sans-serif; color: #555; text-decoration: none; letter-spacing: 1px; float: right; text-align: right; margin-right: 30px; }
.fcr a { color: #0066CC; text-decoration: none; }
.fcr a:hover { color: #000; text-decoration: none; }
.fcr a:focus { outline: 0; }

/* styling for ajax form on contact us page */
.fieldset { border: 0px; margin: 0; padding: 0; }
.textarea { width: 300px; font: 12px/12px Arial, Helvetica, sans-serif; color: #000; padding: 3px; margin: 1px 0; border:1px solid #ccc; } 
.label { display: block; font: bold 12px/110% Arial, Helvetica, sans-serif; color: #000; text-decoration: none; margin-top: 22px; }
.text { width:300px; font: 12px/110% Arial, Helvetica, sans-serif; color:#000; padding: 3px; margin: 1px 0; border: 1px solid #ccc; }
.submitb { padding: 2px 5px; font: bold 12px/12px Arial, Helvetica, sans-serif; }