/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.eyecareofoklahoma.com/
   TEMPLATE NAME:  Eye Care of Oklahoma
   DATE:           Sep-23rd-2008
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0;
padding: 0px;
height: 100%; 
background: #c8de71;
} 

/* ----------Centered Container Or the Layout--------------------- */

#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
width: 941px;
background-color: #FFF;
} 


/* --------------LABELS BUTTONS & FORMS-----------*/
 
label {
font: bold 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
}

form {
padding-left: 14px;
}
 
textarea, input {
width: 20em;
border: 1px solid #5c5d5f;
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #5c5d5f;
padding: 5px;
margin-bottom: 20px;
}

.regtext textarea, input {
width: 15em;
border: 1px solid #5c5d5f;
color: #5c5d5f;
margin-bottom: 5px;
padding: 0px;
	height: 20px;
}

 
.button {
width: 6em;
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #fff;      
background: #6f2e2f;
padding: 8px;
border: 1px solid #fff
}

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

#header {
background: url(/images/kids/headbg.gif) no-repeat;
height: 147px;
}

/* --------------LOGO IN HEADER *always use this*------------- */

.logolink {
background-image: url('/images/kids/logo.gif');
background-repeat: no-repeat;
height: 122px;
width: 344px;
}
 
.logolink a { float: left;  }
 
#swap {background-image: url(/images/kids/logo.gif);  width: 344px;  height: 122px;  }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


/* --------------TOPNAV------------------------------------------------------------- */


.suckertreemenu {
background-color: #1ba4c8;
height: 48px;
}

.suckertreemenu ul{
margin: 0;
padding-left: 0px;
list-style-type: none;
letter-spacing: 0px;
padding-top: 12px;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
padding-right: 14px;
padding-left: 14px;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: inline;
font: bold 9pt 'Trebuchet MS', Arial, Sans-serif;
color: #fff;
text-decoration:none;
text-transform: uppercase;
cursor: auto
}


/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0em;
position: absolute;
top: 0em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
margin-top: -12px;
text-decoration: none;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a {
margin: 0px;
display: block;
overflow: visible;
text-align: left;
font: 8pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
width: 135px; /*width of sub menu levels*/
text-decoration: none;
padding: 4px;
top: -12em;
background-color: #045e76;
color: #fff;
border: 1px solid #adebfd

}

.suckertreemenu ul li ul li a:hover{
text-decoration:underline;
color: #045e76;
background-color: #adebfd;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

#kidslink {
font: bold 12px 'century gothic', Arial, Sans-serif;
color: #fff;
text-decoration:none;
text-transform:none;
}



/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/

#main {
min-height: 100%; 
height: auto !important; 
height: 100%; 
background: #FFF url(/images/kids/mainbg.gif) repeat-x; /* Main DIV Background Img */
}

#main .content {
padding: 10px;
margin: 0px;
height: auto;
}

#main .content h1 {
font: 18pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #1ba4c8;
padding-left: 15px;
padding-bottom: 20px;
}

#main .content h2 {
font: bold 12pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #1ba4c8;
padding-left: 15px;
padding-bottom: 20px;
}

#main .content .text {
padding-right: 300px;
}



#main .content .text p {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
line-height: 22px;
padding-left: 15px;
padding-bottom: 20px;
}

#main .content .text div {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
}

#main .content .text ul {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
line-height: 22px;
padding-left: 50px;
padding-bottom: 20px;
}

#main .content .regtext {
padding-right: 0;
width: 100%;

}

#main .content .regtext table {
padding-right: 0;
width: 85%;

}

#main .content .regtext p {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
line-height: 22px;
padding-left: 15px;
padding-bottom: 20px;
}

#main .content .regtext div {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
}

#main .content .regtext ul {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
line-height: 22px;
padding-left: 50px;
padding-bottom: 20px;
}


#main .content a {
color: #1ba4c8;
}

#main .docname {
	font: 14pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
	padding-left: 10px
}

#main .docname a{
	font: 14pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
	text-decoration:underline
}

#main ol {
padding: 15px;
	font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
}

#main ol li {
margin-left: 20px;
}

.text div {
padding-left: 15px;
}

#news .text div {
padding: 0px;
}

/* --------------BRANDS and FORMS----------------*/

#brands {
background: url(/images/brands.jpg) no-repeat;
width: 605px;
height: 233px;
margin-bottom: 20px;
}

#forms {
width:604px;
}

#forms img {
border: none;
}

#forms .head {
background: url(/images/forms_head.png) no-repeat;
height: 30px;
}

#forms .text {
background: url(/images/forms_bg.gif) repeat-y;
width: 604px;
padding: 10px 12px 12px 12px;
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
}

#forms p {
padding-right: 30px;
}

#forms .bottom {
background: url(/images/forms_bottom.gif) no-repeat;
height: 24px;
}

#forms ul {
margin-left: 0px;
padding: 0px 12px 0px 16px;
}

#forms li {
margin: 0px;
padding: 0px;
list-style-type:none;
display: block;
margin-bottom: 5px;
}

#forms li a {
font: bold 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #943c3d;
background: url(/images/icon_page.gif) no-repeat;
padding-left: 20px;
}


/* --------------MAIN HOME----------------*/

#main .holder {
height: 100px;
height: auto;
height: 100%;
padding-top: 15px;
}

#main .holder .text {
float: left;
padding: 0px 15px 15px 15px;
}

#main .holder .homeimg {
border: none;
}

#main .holder .text h1 {
font: 18pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #1ba4c8;
width: 560px;
margin-bottom: 20px;
}

#main .holder .text p {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
width: 560px;
line-height: 22px
}

#main .text p img {
float: right;
border: 4px solid #aca89a
}

#main .text p .doctor {
float: left;
border: 4px solid #aca89a;
clear: left;
margin-bottom: 15px;
}


#main .services {
width: 318px;
float: right;
margin-right: 10px;
}

#main .services ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#main .services li{
background: #702e2f url(/images/services_off.gif) repeat-x;
}

#main .services ul li a{
color: #fff;
background: url(/images/icon_sticky.png) no-repeat;
display: block;
padding: 10px 15px 15px 50px;
text-decoration: none;
font-weight: bold;
font-size: 90%;
font: 10pt Georgia, Times New Roman, Serif;
text-transform: uppercase
}

#main .services ul li p {
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #fff;
text-transform: none;

}

#main .services ul li a:hover{ /*hover state CSS*/
background: #2d0c0c url(/images/services_on.gif) repeat-x;
}


#main .services ul li a.last {
padding: 0px;
}


#main p {
}

#main .right {
float:right; 
width: 277px;
margin: 0px;
}


/* --------------FIRST LOOK EYEWEAR----------------*/

.firstlook ul {
padding: 0px;
margin: 0px;
}

.firstlook li {
display: inline;
font: bold 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
text-transform:uppercase
}

.firstlook li a {
color: black;
padding: 0px 10px 0px 10px;
}





/* --------------NEWS------------------------------------------------------------- */

.subholder {
padding-top: 15px;
}

#news, #contact {
width: 258px;
}

#news .head {
background: url(/images/rightbox_news.png) no-repeat;
height: 31px;
}

#news .text, #contact .text {
background: url(/images/rightbox_bg.gif) repeat-y;
width: 258px;
padding: 4px 12px 12px 12px;
font: 10pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #5c5d5f;
}

#contact a {
color: #1ba4c8;	
}

#news h1 {
font: bold 12pt 'Trebuchet MS', Tahoma, Arial, Sans-Serif;
color: #1ba4c8;
width: 200px;
}

#contact p {
padding-right: 30px;
}

#news p, #news .text div {
width: 240px;
}

#news .bottom, #contact .bottom {
background: url(/images/rightbox_bottom.gif) no-repeat;
height: 25px;
}

/* --------------CONTACT------------------------------------------------------------- */

#contact .head {
background: url(/images/rightbox_contact.png) no-repeat;
height: 31px;
}

/* --------------FOOTER------------- */

.clear {
clear: both;
}

#footer, .push { 
clear: both;
width: 941px;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 

#footer {
background: #C8DE71 url('/images/kids/footer.gif') no-repeat;
height: 137px;
height: auto;
}

#footer .content { 
width: 941px; 
margin: 0 auto; 
position: relative; 
}

.rightlogos {
text-align: right;
padding-right: 10px;

}

.rightlogos img{
padding: 5px;
border: 0px;
}


/* --------------FOOTER LINKS------------- */

#footer a {
color: #FFFFFF !important;
text-decoration: none;
padding: 0px 0px 0px 0px;
font: 7pt 'Trebuchet MS', Arial, Sans-serif;
}

#footer ul {
padding: 20px 0px 20px 0px;
margin: 0px;
}

#footer .links ul {
margin: 0px;
padding: 0px;
}

#footer .links li {
display: inline;
list-style-type: none;
}

#footer .links li a {
color: #000;
text-decoration: none;
border-right: 1px solid;
padding: 0px 10px 0px 10px;
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
}

#footer .links li a:hover {
text-decoration: underline;
}

#footer .asc ul {
margin: 0px;
padding: 0px;
}

#footer .asc li {
display: block;
list-style-type: none;
}

#footer .asc li a {
color: #e0e1d9;
text-decoration: none;
padding: 0px 10px 0px 10px;
font: 8pt 'Trebuchet MS', Arial, Sans-serif;
}

#footer p {
color: #FFFFFF;
text-decoration: none;
padding: 0px 10px 0px 10px;
font: 7pt 'Trebuchet MS', Arial, Sans-serif;
}
#footer .links li a:hover {
text-decoration: underline;
}


.rightlogos {
text-align: right;
padding-right: 10px;
}

.rightlogos img{
padding: 5px;
border: 0px;
}

/* ----- Customer Cart TABLES ---------- */
#awscustomertables table{margin: 1em; border-collapse: collapse;}
#awscustomertables td{ padding: .3em; border: 1px #F2F2F2 solid; }
#awscustomertables th{ padding: .3em; border: 1px #F2F2F2 solid; background: #F2F2F2; }