/* reset all defaults with wildcard selector */
* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}
	
/* HTML tags */

body, html { font-size: 100%; line-height: 1em;
font-family: arial, verdana, helvetica, sans-serif; 
margin: 0; padding: 0; border: 0; background-color: #ffffff;}

p { margin: 10px 0 5px 0; padding: 0; }
	
/* display block for firefox or dissapear */	
hr { color: #534027; background-color: #ff9933; height: 1px; border:0; margin: 5px 0 5px 0; 
     display: block; clear: both;}	

/* keep superscript and subscript text from breaking the line-spacing */
sub { position: relative; font-size: 0.8em; vertical-align: baseline; bottom: 0.00em; }
sup { position: relative; font-size: 0.8em; vertical-align: baseline; bottom: 0.25em; }

/* flash */
object { margin: 0; padding: 0; border: 0; }

input:hover, input:focus { background-color: #ffffcc;}
textarea:hover, textarea:focus { background-color: #ffffcc;}

/* fieldset for forms */
fieldset { padding: 15px; border: 1px solid #ff9933;  }
legend { color: #ff9933; padding:5px 3px 10px 3px; font-weight: bold;}
	
	
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	DEFAULT LINKS STYLE

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

a, a:link {color: #339900; text-decoration:none; font-weight: bold;}
a:visited {color: #339900; text-decoration: none;}
a:hover {color: #33C20A; text-decoration: underline; }
a:active {color: #33C20A; text-decoration: underline;}
a:focus {color: #33C20A; text-decoration: underline; }
a.no-bg:hover { background-color: Transparent;}
a.no-bg:focus { background-color: Transparent;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	IMAGES & PHOTOS

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img { border: 0; }
img.border { border: 1px solid #ff9933 !important; }
img.no-border { border: 0 !important; }

img.float-left-margin { border: 1px solid #ff9933 !important; float: left; margin: 0 10px 10px 0; }
img.float-left-margin-5 { border: 1px solid #ff9933 !important; float: left; margin: 0 5px 10px 0; }
img.float-left-margin-5-noborder { border: 0 !important; float: left; margin: 0 5px 10px 0; }
img.float-left-margin-0-noborder { border: 0; float: left; margin: 0 0 10px 0;}

img.float-left-margin-noborder { border: 0; float: left; margin: 0 10px 10px 0;}

img.float-right-margin { border: 1px solid #ff9933 !important; float: right; margin: 0 0 10px 10px; }
img.float-right-margin-noborder { border: 0; float: right; margin: 0 0 10px 10px; }
img.float-right-margin-border { border: 2px solid #534027 !important; float: right; margin: 0 0 10px 10px;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	HEADINGS  - CHECK FONT SIZE FOR RESIZING TEXT

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1, h2, h3, h4, h5, h6 { color: #ff9933; font-weight: bold; }
h1 { font-size:1.4em; margin: 10px 0 10px 0; }
h2 { font-size:1.2em;  margin: 10px 0 10px 0; }
h3 { font-size:1.0em;  margin: 10px 0 15px 0; }
h4 { font-size:0.9em;  margin: 10px 0 10px 0; }


/* ##################### CONTAINERS START HERE #############*/

/* IE 6 warning */
div.warning { width: 770px; margin: 5px auto 0 auto; font-size: 0.8em; background: #FFFFDF url(../../Images/Icons/warning.gif) no-repeat 5px 3px; 
               padding: 5px 5px 5px 25px; border: 1px solid #CFA840; font-weight:bold;}

/* outside wrapper for drop shadow effect */
div#shadow-wrapper { width: 808px; border: 0; margin: 5px auto 0 auto;  padding: 0; background-image: url('../../Images/shadow_right.png');
	background-position: right 6px;	background-repeat: no-repeat; background-color: Transparent; }
	
/* master div that holds everything in place  */
div#wrapper { border-top: 1px solid #ccc; border-right: 1px solid #999; border-bottom: 0; border-left: 1px solid #ccc;
               background-color: #fff; margin: 5px auto 0 auto; padding: 0; width: 800px; position: relative; }

/* header  - height 90px to fit flash logo and bg gfx*/
div#header { height: 90px; border: 0; background-color: #fff; margin: 0; width: 800px; padding: 0;
background-image: url('../../Images/header_bg_black.png'); background-position: right top; background-repeat: no-repeat; }

/* flash and image logo */
div#header div#flash-logo-holder { float: left; margin: 5px 10px 10px 0; padding: 0; }
div#header div#flash-logo-holder object.flash-logo { border: 0; margin: 0; width: 160px; height: 70px; float: left;}
div#header div#flash-logo-holder img.flash-image { border: 0; margin:5px 0 0 0; width: 150px; height: 60px; float: left; }

/* banner */
div#web-banner { clear: both; width: 800px; height: 115px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #fff; margin: 0; padding: 0;
background-image: url('../../Images/Eye-Galleria-Banner-3.jpg'); background-position: left top; background-repeat: no-repeat;}

/* MAIN CONTENT */

/* this has the orange bg for the left area so it always fills when content pushes it down */
div#main-content-holder { position: relative; border: 0; width: 800px; height: 100%; min-height: 300px;
                           padding: 0; margin: 0; background-color: #fff !important;}


/* LEFT NAVIGATION */
div#left-navigation-holder { float: left; width: 18%; height: 100%; min-height: 290px; margin: 0; 
                             padding: 5px;  font-size: 0.8em; background-color: #fff; }

div#left-navigation-buttons { height: 100%; margin: 20px 0 0 2px; padding: 0; background-color: Transparent; }
/* TABS - CUT BUTTON IMAGE INTO 2 - LEFT SIDE SMALLER GOES ON TOP OF RIGHT SIDE - TO RESIZE WITH TEXT */
/* RIGHT SIDE IMAGE GOES IN <LI> */
div#left-navigation-buttons ul { width: 98%; margin: 0; padding: 0; list-style: none; }
div#left-navigation-buttons ul li { margin: 2px 0 0 0; padding: 0; background: url("../../Images/Buttons/button_dark_orange_right.png") no-repeat right top;}
/* change to gif on hover/focus/selected for darker colour */
div#left-navigation-buttons ul li.item-selected { background-image: url("../../Images/Buttons/button_dark_orange_right.gif") !important;  }

/* need IE 6 code to turn off li:hover */
div#left-navigation-buttons ul li:hover, div#left-navigation-buttons ul li.item-selected:hover { background-image: url("../../Images/Buttons/button_dark_orange_right.gif") !important;}

/* LEFT SIDE IMAGE GOES IN <A> (INNER ELEMENT) */
div#left-navigation-buttons li a, div#left-navigation-buttons li a:link { /*width: 100%;*/ display: block; padding: 6px 20px 6px 20px; 
margin: 0 !important; color: #000; text-decoration: none; background: url("../../Images/Buttons/button_dark_orange_left.png") no-repeat left top; }
/* light orange tabs for current page */
div#left-navigation-buttons li a.selected { color:#fff !important; background-image: url("../../Images/Buttons/button_dark_orange_left.gif") !important;  }
/* remove a:focus as only A can change hover colour not LI  - or half gfx is missing*/
div#left-navigation-buttons li a:hover, div#left-navigation-buttons li a.selected:hover
 { color: #fff !important; background-image: url('../../Images/Buttons/button_dark_orange_left.gif') !important;  }


/* AJAX SUB MENUS - NO IMAGES*/
div.SubMenu { margin: 0; padding: 0; }
div.SubMenu ul#sub-menu { width: 100%; margin: 0; padding: 0; list-style: none; font-size: 0.75em; }
div.SubMenu ul#sub-menu li { display: block; margin: 0; padding: 0 !important; background-image: none !important;}
div.SubMenu ul#sub-menu li a, div.SubMenu ul#sub-menu li a:link { float: none; /*width: 100%;*/ display: block; 
padding: 5px; margin: 0 !important; color: #000; text-decoration: none; background-color: #ffffcc; background-image: none !important;
border-top: 1px solid #ff9933;  border-right: 1px solid #ff9933; border-bottom: 1px solid #ff9933;
border-left: 1px solid #ff9933;}
div.SubMenu ul#sub-menu li a.selected { color: #fff; background-color: #ff9933;  }
div.SubMenu ul#sub-menu li a:hover, div.SubMenu ul#sub-menu li a.selected:hover
 { color: #fff !important; background-color: #ff9933; }

/* add this bookmarks */

div#add-this-container { border: 0; margin: 10px 0 0 2px; padding: 0; }


/* MAIN TEXT AREA */
div#main-content-text { width: 76%; float: left; font-size: 0.90em; border-left: 1px solid #ccc; height: 100%; min-height: 290px; 
                        margin: 0; padding: 10px 10px 10px 25px; background-color: #fff;}
                        
div#main-content-text p { font-size: 0.8em; }

/* flash fade */
div#main-content-text div#flash-fade-holder { width: 240px; height: 230px; float: right; margin: 10px; padding: 0; 
                                              border: 1px solid #ff9933; }
div#main-content-text object.flash-fade { border: 0; margin: 0; width: 240px; height: 230px;}
div#main-content-text img.flash-image-fade { border: 0; margin: 0; width: 240px; height: 230px;}

/* list */
div#main-content-text ul.list { margin: 5px 0 0 0; padding: 0; clear: both; font-size: 0.8em;}
div#main-content-text ul.list li { color: #000; margin: 0; padding: 2px 0 2px 20px; 
margin: 0; list-style-type: none; background-repeat: no-repeat; background-image: url('../../Images/Icons/bullet.gif'); 
background-position: 2px 6px; }


/*	breadcrumbs - WATCH PADDING DOESNT INCREASE WIDTH! BREAKS CONTAINERS */	
div#bread-crumbs { width: 90%; margin: 0; padding: 0; border: 0; 
color: #000; font-size: 0.75em; font-weight: normal;}



/* SUB NAVIGATION - HORIZONTAL TABS NO IMAGES*/
div#sub-navigation-buttons { margin: 15px 0 60px 0; padding: 0; }
div#sub-navigation-buttons ul { width: 100%; margin: 0; padding: 0; list-style: none; font-size: 0.70em; }
div#sub-navigation-buttons ul li { display: inline; margin: 0; padding: 0 !important; background-image: none !important;}
div#sub-navigation-buttons li a, div#sub-navigation-buttons li a:link { float: left; /*width: 100%;*/ display: block; 
padding: 5px; margin: 0 !important; color: #000; text-decoration: none; background-color: #ffffcc; 
border-top: 1px solid #ff9933;  border-right: 1px solid #ff9933; border-bottom: 1px solid #ff9933;
border-left: 0;}
div#sub-navigation-buttons li a.selected { color: #fff; background-color: #ff9933;  }
div#sub-navigation-buttons li a:hover, div#sub-navigation-buttons li a.selected:hover
 { color: #fff !important; background-color: #ff9933; }


/* contact page table */
table.contact { border: 0; margin: 0; padding: 0; width: 95%; font-size: 0.8em;}
table.contact th { padding: 5px;  font-weight: bold; background-color: #ffffcc; border: 1px solid #ff9933; color: #fff;}
table.contact td { padding: 5px; border: 1px solid #fff; vertical-align: top;  }

table.contact td select { border: 1px solid #ccc; width: 347px; padding: 2px; color: #ff9933 !important; }
table.contact td input { border: 1px solid #ccc; width: 340px; padding: 2px; color: #ff9933;}
table.contact td textarea { border: 1px solid #ccc; width: 340px; padding: 2px; color: #ff9933 !important;}
table.contact td input.button { display: inline; border: 0; padding: 3px; margin-right: 5px; 
width: 60px; background-color: #ff9933; font-weight: bold; color: #000 !important;  }
table.contact td input.button:hover, table.contact td input.button:focus { color: #fff !important; 
                                                                           background-color: #ff9933; cursor: pointer;}
div#contact-details { border: 0; margin: 0; padding: 0; float: left; }                                                                           
                                                                           
div#google-map { border: 0; margin: 0; padding: 0; float: right; }                                                                           

/* accessibility */
table.access { border: 0; margin: 10px 0 10px 0; padding: 0; width: 70%;}
table.access th { padding: 5px;  font-weight: bold; 
background-color: #ffffcc; border: 1px solid #ff9933; color: #fff !important;}
table.access td { padding: 5px; border: 1px solid #ff9933;  }
table.access td.key { width: 15%;  }

/* eye exam */
table.Effects { width: 100%; clear: both; position: static; margin: 10px 0 10px 0; padding: 0; border: 1px solid #ff9933; 
                                border-collapse: collapse; border-spacing: 0; font-size: 0.80em; }
table.Effects th { text-align: left; background-color: #ffcc99; font-weight: bold; color: #000; 
padding: 2px; border: 1px solid #ff9933; }
table.Effects tr.header td { background-color: #ffcc99 !important; font-weight: bold !important; }
table.Effects td { text-align: left; vertical-align: top; font-weight: normal; 
                                                   color: #000; padding: 2px; border: 1px solid #ff9933; }
/* Javascript effects for alternate rows and rollovers */
table.Effects tr.alt td { background: #ffffcc; } 
table.Effects tr.over td, table.Effects tbody tr:hover td { background: #ffcc99; }
table.Effects tr.over+tr td { background-image: url('../../Images/shadow.png'); background-repeat: repeat-x;}



/* FOOTER */
div#footer { clear: both; height: 25px; border: 0; background-color: #ff9933; margin: 0; width: 800px; padding: 0; 
             color: #000; font-size: 0.65em; line-height: normal !important;}
div#footer ul.footer { float: left; border: 0; margin: 0 10px 5px 10px; padding: 5px 0 0 0 !important; list-style: none; }
div#footer ul.footer li { border: 0; margin: 0; padding: 0; display: inline; background-image: none !important;  }
div#footer ul.footer li a { color: #000;  }

div#phuture { float: right;  border: 0; margin: 0; padding: 5px 0 0 0 !important; color: #000; text-align: right; }
div#phuture a.phuture { color: #000; display: inline; padding: 3px; margin: 0; }

/* make 10px longer than wrapper so shadow can jut out to the right and link to right shadow */
div#bottom-shadow { clear: both; display: block; width: 808px; height: 5px; overflow: hidden; 
background-image: url('../../Images/shadow_bottom.png'); background-position: 94% top; background-repeat: no-repeat; 
background-color: Transparent; /* centre as with wrapper */ margin: 0 auto 5px auto; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	MISC CLASSES

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* EG colour scheme */
.orange { color: #ff9933; }
.med-orange { color: #ffcc33; }
.light-orange { color: #ffcc99; }
.pale-orange { color: #ffffcc; }
.dark-green { color: #339900; }
.green { color: #33C20A; }
.grey { color: #999999; }
.black { color: #000;}

/* END EG colour scheme */

.none { display:none; }
.block { display: block;}
.inline { display: inline;}

.bold { font-weight: bold; }
.bold-large { font-weight: bold; font-size: 0.9em !important; }
.bold-larger { font-weight: bold; font-size: 1.1em !important; }
.bold-italic { font-weight: bold !important; font-style: italic; }
.bold-orange { color: #ff9933; font-weight: bold; font-size: 1.1em; }
.italic { font-style: italic; }

.float-left { float: left;}
.float-right { float: right;}
.float-right-inline { float: right; display: inline !important;}

.backgroundRed { background-color : Red !important;}
.small-italic { font-style: italic; font-size: smaller;}

.red { color: Red;}
.red-bold { color: Red; font-weight: bold;}
.red-bold-centre { color: Red; font-weight: bold; text-align: center;}
.error-message { color: Red; font-size: 0.8em; }

.pager-text { font-size: 0.9em;}
.smaller-text { font-size: smaller;}
.xx-smaller-text { font-size: xx-small;}
.footer-text { font-size: 0.9em !important;}

.no-bg { background-color: Transparent;}
.white-space { white-space: normal;}

.clear { clear: both;}
.arrow { vertical-align: middle;}
.top { vertical-align: top;}
.middle { vertical-align: middle;}
.bottom { vertical-align: bottom;}