﻿/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
html, body
{
    height: 100%;
}

body 
{
    background-image: url('layout/top_banner.gif'); 
	background-repeat: repeat-x; 
	background-color: #ffffff;  
	font-family: tahoma, verdana, Sans-Serif; 
	font-size: 13px; 
	color: #333333; 
}

#wrapper 
{
    min-height: 100%;
    height: 100%;
	margin: auto;
	width: 974px;
	display: table;
}

#content
{
    overflow: hidden;
	padding-bottom: 125px;
}

#bottomBanner
{
    background-image: url('layout/bottom_banner.gif'); 
	background-repeat: repeat-x; 
	height: 93px;
	width: 100%;
	margin-top: 10px;
}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

#footerContainer
{
    position: absolute;
	left: 0;
    height: 125px;
    min-width: 974px;
    width: 100%;
    color: #656565;
    margin-top: -125px;
    text-align: center;
    line-height: 8px;
    clear: both; 
}

#topBanner, #headerContainer, #mainContainer {
	width: 974px;
}

#topBanner
{
    top: 0px;
    padding-top: 5px;
    Height: 37px;
    text-align: right;
    color: #ffffff;
    font-weight: bold;
}

#logindisplay
{
    font-size: 1.1em;
    color: #ffffff;
}

#logindisplay a:link
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

#logindisplay a:visited
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

#logindisplay a:hover
{
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}

#headerContainer
{
    height: 131px;
}

#headerContainer .logo
{
    margin-left: 0px;
    position: absolute;
    width: 366px;
    height: 131px;
    float: left;
}

#headerContainer #nav
{
    margin-left: 366px;
    position: absolute;
    width: 608px;
}

#headerContainer #navOptions
{
    text-align: right;
    height: 36px;
}

#headerContainer #navSpace
{
    height: 55px;
}

#headerContainer .mainNav
{
    margin-left: 0px;
	position: absolute;
	width: 608px;
	height: 40px;
}

#mainContainer #mainBody
{
    background-color: #f6f6f6;
    min-height: 250px;
}

/* LINKS AND PARAGRAPHS  
----------------------------------------------------------*/

a:link
{
    color: #015090;
    font-weight: normal;
    text-decoration: none;
}
a:visited
{
    color: #015090;
    font-weight: normal;
    text-decoration: none;
}

a:active
{
    color: #015090;
    font-weight: normal;
    text-decoration: none;
}

a:hover
{
    color: #1082de;
    font-weight: normal;
    text-decoration: underline;
}

a.blue:link
{
    color: #015090;
    font-weight: bold;
    text-decoration: none;
}
a.blue:visited
{
    color: #015090;
    font-weight: bold;
    text-decoration: none;
}

a.blue:active
{
    color: #015090;
    font-weight: bold;
    text-decoration: none;
}

a.blue:hover
{
    color: #1082de;
    font-weight: bold;
    text-decoration: underline;
}

a.blueLight:link
{
    color: #015090;
    font-weight: bold;
    text-decoration: none;
}
a.blueLight:visited
{
    color: #015090;
    font-weight: bold;
    text-decoration: none;
}

a.blueLight:active
{
    color: #015090;
    font-weight: bold;
    text-decoration: none;
}

a.blueLight:hover
{
    color: #2cabe2;
    font-weight: bold;
    text-decoration: none;
}

.btnSubmit, .btnSubmitHover
{  
    cursor: pointer;
} 

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}

p
{
    text-align: left;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    margin: 0;
    font-family: tahoma, verdana, Sans-Serif;
}

h1
{
    font-size: 1.9em;
    color: #015090;
}

h1.normH1
{
    font-weight: normal;
}

h2
{
    font-size: 1.5em;
    color: #015090;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5
{
    font-size: 1em;
}

h6
{
    font-size: 1em;
    color: #015090;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0;
}

/* FONTS   
----------------------------------------------------------*/

.miniHeadings
{
    color: #333333;
    font-size: 16px;
    font-weight: bold;
}

.miniHeadings2
{
    color: #333333;
    font-size: 16px;
}

.miniHeadings3
{
    color: #e14500;
    font-size: 16px;
    font-weight: bold;
}

.miniHeadings4
{
    color: #e14500;
    font-size: 14px;
    font-weight: bold;
}

.specialText
{
    font-family: pristina; 
    font-size: 24px;
    color: #2cabe2;
}

.remakeText
{
    color: #e14500;
}

.blueText
{
    color: #015090;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: right;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #015090;
    color: #ffffff;
}

ul#menu li a:hover
{
    background-color: #2cabe2;
    color: #ffffff;
    text-decoration: none;
}

ul#menu li a:active
{
    background-color: #2cabe2;
    color: #ffffff;
    text-decoration: none;
}

ul#menu li.selected a
{
    background-color: #fff;
    color: #000;
}

/* LIST ELEMENTS
----------------------------------------------------------*/

.cleanList
{
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 1.2em;
}

.cleanList li
{
	padding: 2px;
	list-style: none;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

.sideContent
{
    width: 650px;
}

.orderMenu
{
    text-align: right;
}

fieldset 
{
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
    width: 830px;
    text-align: left;
}

.normFieldset
{
    margin: 0;
    width: auto;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset label 
{    
    margin: 2px 2px 10px 2px;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    color: #333333;
    padding: 2px 4px 8px 4px;
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

#prescription input[type="text"]
{
	width: 40px;
}

.lensInfoDiv input[type="text"]
{
	width: 40px;
}

#prescription select
{
	clear: right;
	float: left;
	margin-left: 10px;
	width: 70px;
	border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

.prescriptionFields
{
	float: left;
	margin: 20px 10px 10px 10px;
}

.prescriptionFields2
{
	float: left;
	margin: 0px 10px 10px 10px;
}

.prescriptionFields3
{
	float: left;
	margin: 1px 10px 10px 10px;
}

.formLabel
{
	margin: 5px 5px 5px 5px;
}

.formLabel2
{
	margin-bottom: 5px;
  /*float: left;
  text-align: right;
  margin-right: 10px;
  width: 130px;
  clear: left;	*/
}

.formLabel3
{
	margin: 6px 20px 5px 20px;
}

.formLabel4
{
	margin: 5px 5px 5px 5px;
    clear : left;	
}

.lensSelectionTable
{
	border-style: hidden;
	border-collapse: collapse;
	border: hidden 0 #f6f6f6;
}

.labelView
{
  float: left;
  text-align: right;
  margin-right: 10px;
  width: 150px;
  clear: left;	
}

.labelView2
{
  float: left;
  margin-left: -10px;
}

.labelView3
{
  float: left;
  margin-left: 0px;
}

.labelView4
{
  float: left;
  text-align: right;
  margin-right: 10px;
  width: 100px;	
  clear: left;
}

.formValue
{
  float: left;
  margin-right: 10px;
  margin-top: 2px;
  width: 225px;
  font-weight: bold;
}

.regView
{
  float: left;
  text-align: left;
  margin-right: 10px;
  padding-left: 165px;
  width: 455px;
  clear: left;	
}

.regView2
{
  float: left;
  text-align: left;
  margin-right: 10px;
  padding-left: 90px;
  width: 455px;
  clear: left;	
}

.perscriptionLabel
{
 margin : 5px 5px 5px 5px;
  /*float: left;
  display: block;
  text-align: right;
  margin-right: 5px;*/
}

select.dropDown
{
	overflow:auto;
	margin-left: 10px;
	width: 305px;
	border: 1px solid #CCC;
}

select.dropDown2
{
	overflow:auto;
	width: 305px;
	border: 1px solid #CCC;
}

select.dropDown3
{
	overflow:auto;
	width: 250px;
	border: 1px solid #CCC;
}

select.dropDownNarrow
{
	overflow:auto;
	margin-left: 5px;
	width: 150px;
	border: 1px solid #CCC;
}

select.dropDownNarrow2
{
	overflow:auto;
	margin-left: 5px;
	width: 200px;
	border: 1px solid #CCC;
}

select.dropDownNarrow3
{
	overflow:auto;
	width: 150px;
	border: 1px solid #CCC;
}

select.lensDropDown
{
	overflow:auto;
	margin-left: 5px;
	width: 250px;
	border: 1px solid #CCC;
}

select.dropDownNum
{
    overflow:auto;
	margin: 0 5px 0 5px;
	width: 40px;
	border: 1px solid #CCC;
}

.search 
{
    vertical-align: bottom;
    outline: none;
}

.tip
{
    border: 1px solid #015090;
	background-color: #ffffff;
	padding: 5px;
	max-width: 125px;
}

/* TABLE
----------------------------------------------------------*/

table 
{
  border: solid 1px #87b6d9;
  border-collapse: collapse;
}

table td 
{
  padding: 5px;   
  border: solid 1px #CCC;
}

table th
{
  padding: 6px 5px;
  text-align: left;
  background-color: #87b6d9; 
  border: solid 1px #87b6d9;
  text-align: center;   
}

.th
{
  padding : 6px 5px;
  text-align: left;
  background-color: #87b6d9; 
  border: solid 1px #87b6d9;
  text-align: left;  
  width: 50px; 
}

/* PADDING  
----------------------------------------------------------*/

.paddingLeft
{
    padding-left: 10px;
}

.paddingRight
{
    padding-right: 10px;
}

.paddingLeft2
{
    padding-left: 20px;
}

.paddingRight2
{
    padding-right: 20px;
}

.paddingBoth
{
    padding-left: 20px;
    padding-right: 20px;
}

.paddingBoth2
{
    padding-left: 10px;
    padding-right: 10px;
}

.paddingAll
{
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}


/* FLOAT  
----------------------------------------------------------*/

.floatLeft
{
    float: left;
}

.floatRight
{
    float: right;
}

.clearFix
{
    float: none;
    clear: both;
}

/* MISC  
----------------------------------------------------------*/

a:focus 
{
    outline: none;
}

.clear
{
    clear: both;
}

.error
{
    color:Red;
}

.field-validation-error
{
    color: #ff0000;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.border
{
    border: 1px solid #CCC;
}

.line
{
    border-top: 1px solid #CCC;
}

.spacer
{
    margin-bottom: 10px;
}

.imgFix
{
    vertical-align: text-bottom;
}

#printHeader, #printFooter, #orderHeader
{
    display: none;
}

/* UPLOAD DIV  
----------------------------------------------------------*/

DIV.ProgressBar 
{ 
    width: 100px; 
    padding: 0; 
    border: 1px solid black; 
    margin-right: 1em; 
    height:.75em; 
    margin-left:1em; 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
}

DIV.ProgressBar DIV 
{ 
    background-color: Green; 
    font-size: 1pt; 
    height:100%; 
    float:left; 
}

SPAN.asyncUploader OBJECT 
{ 
    position: relative; 
    top: 5px; 
    left: 10px; 
}

.noStyle 
{
    border: none;
    padding: 0px;
}

#tooltip 
{
	position: absolute;
	z-index: 3000;
	border: 1px solid #015090;
	background-color: #ffffff;
	padding: 5px;
	max-width: 250px;
}

#tooltip h3, #tooltip div 
{ 
    margin: 0; 
}
