/* CSS Document FOR ORTHOTICS SPECIALTIES similar to styles_INPUT_comments.css in WORKING FOLDER */

/* 3 COLUMN JELLO LAYOUT - #addbackground TO HOLD TABLE with RED bkgnd - TABLE CONTAINS 3 COLUMNS OF DIVS #MAIN FLOAT LEFT AND #IMAGES_CAPTONS RIGHT */
/* #PICTURES HAS LARGE MARGINS LEFT AND RIGHT THAT SIT UNDER THE LEFT AND RIGHT FLOATED DIVS - #MAIN AND #IMAGES_CAPTONS */
/* #ADDRESS SET TO CLEAR BOTH */

/****** BODY SET bkgnd col Yellow outside of site, SET FONT SIZE SMALL from which to size all other fonts */
body {
	background-color:#FAE8A8;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
}

/****** TABLE TO CREATE A Red bkgnd BEHIND 3 COLUMN DIVS - TABLE INSIDE #addbackground - INSIDE THE TABLE ARE THE 3 COLUMN DIVS #main, #pictures, #picture_captions in HTML */
/* IN STRICT DOCTYPE NOT SUPPOSED TO USE TABLE FOR STRUCTURE did so because could not get #addbackground to work with Red bkgnd to match height of 3 column divs ALSO #allcontent LEAKS bkgnd color at the bottom */
table {
	width:800px;
	background-color:#EF1D16;
	border:none;
}

/****** CENTER SITE - CONTAINS ALL DIVS - TOTAL WIDTH IS 800 PX AND HEIGHT 647 PX OR SO */
/* TO CENTER IN IE 6 USE THIS POSITIONING - I THINK BECAUSE I ADDED TABLE INTO #addbackground FOR bkgnd color */	
#allcontent {
	width:800px;
	height:100%;
	position:absolute;
	left:50%;
	margin-top:5%;
	margin-left:-400px;
	border:none;
}

/****** WAS USED TO CENTER INDEX PG - SO MAIN PAGE WON'T HAVE A RED BACKGROUND COLOR - CHANGE BKD COL TO WHITE */
/*#allcontentmain {
	width:800px;
	height:100%;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
}*/

/* ____________________________START DIVS THAT APPLY TO THE INDEX PG ONLY_____________________________ */
/****** TEXT ON MAIN INDEX PG ONLY #textmainpage TOTAL SIZE IS WIDE 800 PX X HEIGHT 317 PX */
/* #textmainpage for the text in html FLOAT LEFT + TOP Z INDEX POSITION TO SIT ON TOP OF #image */
/* #textmainpage IS ON TOP OF AND INSIDE OF #image (INSIDE IN HTML) - resize text in browser using VIEW>TEXT SIZE>INCREASE>DECREASE */
/* _______________NEED EXTRA LINES in #textmainpage TO REVEAL IMAGE IN #image UNDERNEATH #textmainpage_______________ */
/* BECAUSE #textmainimage is inside #image AND THE AMOUNT OF TEXT LINES AFFECTS THE HEIGHT AS THE TEXT RESIZES LARGER HAD TO ADD SOME <p>&#160;</p> NO SPACE LINES IN HTML SO THE ENTIRE HEIGHT OF THE background-image:url(images/main_hands.jpg) WOULD SHOW - LESS LINES LESS PICTURE - MORE LINES MORE PICTURE - EVEN MORE LINES OR MORE PADDING-TOP OR PADDING-BOTTOM THEN YOU'LL SEE THE BLK BKGND COL OF #image SHOW AT THE BOTTOM - WANT THIS BLK BKGND TO GROW AS TEXT RESIZES */
/* _______________BROWSERS NEED PADDING in #textmainpage TO REVEAL IMAGE IN #image UNDERNEATH #textmainpage_______________ */
/* PC - IE 6 - REDUCE PADDING-TOP to 21px and PADDING-BOTTOM to 0px to SEE THE WHOLE PICTURE EXACTLY IN HEIGHT (no bottom image crop) */
/* PC - IN FireFox 2.0.0.11 - PADDING-TOP 21PX PADDING-BOTTOM 0PX OR ELSE makes the picture VERY small in height (crops off bottom image) */
/* MAC - FireFox 2.0.0.11 AND Safai 2.0.4 - PADDING-TOP 21PX PADDING-BOTTOM 0PX OR ELSE makes the picture small in height (crops off bottom image) */
#textmainpage {
	font-size:100%;
	line-height:130%;
	padding:21px 500px 0px 27px;
	color:#FFFFFF;
	float:left;
	z-index:99;
} 

/****** ONLY ON INDEX PG - #image TOTAL PICTURE SIZE - WIDTH 800 PX X HEIGHT 317 PX */
/* #image HOLDS #textmainpage in HTML - #image CONTAINS bkgnd IMAGE OF HANDS AND BLK bkgnd COLOR */
/* IN #textmainpage AS THE TEXT GROWS, THE BLK bkgnd COLOR OF #image GROWS TOO in browser using VIEW>TEXT SIZE>INCREASE>DECREASE */
#image {
	width:800px;
	background-image:url(images/main_hands.jpg);
	background-repeat:no-repeat;
	background-color:#000000;
	border:none;
	float:right;
}
/* DIV FOR CREDIT WEBSITE AT BOTTOM - LAST DIV INSIDE #allcontent */
#creditwebsite {
	text-align:right;
	clear:both;
}
/* CLASS FOR CREDIT WEBSITE - SAFARI NEEDED THIS CLASS TO OVERRIDE THE REGULAR alink etc */
.credit_website {
	font-size:75%;
	letter-spacing:0.005em;
	font-weight:bold;
	color:#FFFFFF;
	margin-top:-.01%;
}
/* ____________________________END DIVS THAT APPLY TO THE INDEX PG ONLY____________________________ */

/* ____________________________START DIVS FOR ALL OTHER PAGES (not index)____________________________ */
/****** TOTAL WIDTH OF #HEADER 800 PX AND HEIGHT 173 PX */
#header {
	height:173px;
	background-color:#EF1D16;
}

/* DESCENDANT SELECTOR IS SPECIFIC TO TAKE BORDER OFF IMAGE RE: a:link - THIS WAY IS FOR XHTML1 STRICT */
#header img {
	border:none;
}

/****** TOTAL WIDTH OF #NAV_TOP 800 PX AND HEIGHT 14 PX */
#nav_top {
	padding:2px 0px 2px 203px;
	font-size:95%;
	letter-spacing:.5px;
	color:#000000;
	background-color:#FFFFFF;
	border:none;
}

/* ____________________________START DIVS FOR 3 COLUMNS____________________________ */
/* #addbackground CONTAINS A TABLE THAT CREATES A Red bkgnd BEHIND ALL 3 COLUMN DIVS */
#addbackground {
	width:800px;
	border:none;
	background-color:#EF1D16;
}

/****** FLOAT LEFT - TOTAL ORIG WIDTH OF #main IS 203 PX AND HEIGHT IS 317 PX */
#main {
	width:203px;
	float:left;
	font-size:100%;
	line-height:140%;
	padding:34px 0px 10px 27px;
	color:#FFFFFF;
	background-color:#EF1D16;
}

/****** FLOAT RIGHT - TOTAL ORIG WIDTH OF #pictures_captions IS 158 PX AND HEIGHT IS 317 PX */
#picture_captions {
	width:165px;
	float:right;
	font-size:95%;
	padding:47px 10px 10px 20px;
	color:#FFFFFF;
	background-color:#EF1D16;
}

/****** ON FUNDING RESOURCES PAGE USE #funding_resources INSTEAD OF #picture_captions BECAUSE ONLY 1 IMAGE - NO IMAGEVIEWER */
#funding_resources {
	width:180px;
	float:right;
	font-size:95%;
	line-height:140%;
	padding:77px 5px 10px 10px;
	color:#FFFFFF;
	background-color:#EF1D16;
}

/****** TOTAL ORIG WIDTH OF #pictures IS 439 PX AND HEIGHT IS 317 PX AND THE PICTURE SIZE IS 332 px W x 237 px H */
/* +++++++++++ MARGIN-RIGHT = TOTAL WIDTH OF #picture_captions INCLUDING PADDING */
/* +++++++++++ MARGIN-LEFT = TOTAL WIDTH OF #main INCLUDING PADDING */
#pictures {
	margin-right:195px;
	margin-left:230px;
	padding:50px 0px 30px 30px;
	color:#FFFFFF;
	background-color:#EF1D16;
}
/* ____________________________END DIVS FOR 3 COLUMNS____________________________ */

/****** TOTAL WIDTH OF #address IS 800 PX AND HEIGHT OF LOGO_SMALL AND ADDRESS2 IS 45 PX (ADDRESS IMAGE HEIGHT WAS 63 PX) */
/* USE 2 IMAGES IN HTML - logo_small.gif and address2.gif */
#address {
	clear:both;
	color:#0E00D1;
	background-color:#FFFFFF;
	padding:1px 97px 2px 198px;
}

/* DESCENDANT SELECTOR IS SPECIFIC TO TAKE BORDER OFF IMAGE RE: a:link - THIS WAY IS FOR XHTML1 STRICT */
#address img {
	border:none;
}

/****** ONLY USE #nav_bottom FOR RULE - TOTAL WIDTH OF #NAV_BOTTOM IS 800 PX AND HEIGHT 30 PX - IS THE SAME AS #nav_top */
/* KEPT FONT INFO FOR FUTURE REDO USING TEXT NOT address2.gif */
#nav_bottom {
	padding:2px 0px 15px 203px;
	font-size:95%;
	font-weight:900;
	letter-spacing:.5px;
	color:#EF1D16;
	background-color:#FFFFFF;
}

#counter_right {
	float:right;
	border:none;
}

/* ____________________________END DIVS FOR ALL OTHER PAGES (not index)____________________________ */

/* ____________________________________________________________________________________________________________ */
/* __________________START IMAGEVIEWER inside #picture_captions DESCENDANT SELECTOR and CLASS__________________ */
/* +++++++++++ IMAGEVIEWER (DHTML) IN HTML p element USE onclick="first()", second(), etc (change pictures) INSIDE #picture_captions */
/* IMAGEVIEWER ORIG CODE FROM http://www.w3schools.com/dhtml/dhtml_examples.asp - Browser Scripting>Learn DHTML>DHTML EXAMPLES>Images>Image viewer http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_array_next */

/* +++++++++++ IN BROWSER TO CHANGE FROM TEXT CURSOR IN p element TO THE ARROW CURSOR - HTML DOM cursor Property - default value - The cursor (often an arrow), pointer value - The cursor indicates a link, auto value - The browser sets a cursor - http://www.w3schools.com/htmldom/prop_style_cursor.asp?output=print*/
#picture_captions p {
	cursor:default;
}

/* ITALIC FOR 2ND LINE OF EACH CAPTION OF #picture_captions using DESCENDANT SELECTOR WITH CLASS p class="two" */
#picture_captions p.two {
	font-style:italic;
	margin-top:-0.001px;
	margin-bottom:25px;
	line-height:140%;
}

/* BOLD FOR 1ST LINE OF EACH CAPTION OF #picture_captions using DESCENDANT SELECTOR WITH CLASS p class="three" */
#picture_captions p.three {
	font-weight:bold;
	letter-spacing:0.5px;
	line-height:90%;
	margin-bottom:-0.001px;
}

/* Blue COLOR TO HIGHLIGHT TEXT OF #picture_captions THAT MATCHES THE IMAGE LOADING FROM IMAGEVIEWER ON THAT PAGE using DESCENDANT SELECTOR WITH CLASS p class="four" */
#picture_captions p.four {
	color:#0000FF;
	font-weight:bold;
	letter-spacing:0.5px;
	line-height:90%;
	margin-bottom:-0.001px;
}

/* in #picture_captions CREATED CLASS FOR firstlinemoveup above picture captions */ 
.firstinemoveup {
 margin-top:-30px;
}
/* __________________END IMAGEVIEWER inside #picture_captions DESCENDANT SELECTOR and CLASS__________________ */
/* __________________________________________________________________________________________________________ */

/* ___________________________START CLASS ALL PAGES (not #picture_captions IMAGEVIEWER)____________________________ */
/* inside #main CLASS FOR HEAD */
.head {
	color:#FFFFFF;
	font-size:130%;
	margin-top:-10px;
	margin-bottom:-5px;
}

/* inside #main contact.html CLASS FOR HIGHLIGHT COPY */
.boldtext {
	font-weight:bold;	
}

/* inside #main day-services-programs - CLASS SPECIFIC TO MOVE 2nd paragraph UP */
/* inside #textmainpage - CLASS SPECIFIC TO MOVE 2nd and 3rd paragraph UP */
.linemoveup_day {
	margin-top:-6px;
}

/* inside #funding_resources - CLASS SPECIFIC TO MOVE FUNDING LINE UP */
.linemoveup_funding {
	margin-top:20px;
}

/* inside #funding_resources - CLASS SPECIFIC TO MOVE RESOURCES LINE UP */
.linemoveup_resources {
	margin-top:-30px;
}

/* inside #nav_bottom Red RULE using DESCENDANT SELECTOR WITH CLASS FOR p class="one" */
#nav_bottom .one {
	border-style:solid;
	border-bottom:thick;
	color:#EF1D16;
	margin-top:-0.5px;
	margin-bottom:-0.1px;
}
/* ___________________________END CLASS ALL PAGES (not #picture_captions IMAGEVIEWER)____________________________ */

/* **************** START ******************** FOR LINKS ****************************************** */
/***** DESCENDANT SELECTOR IS SPECIFIC TO TAKE text-decoration OFF LOGO IMAGE RE: a:link - THIS WAY IS FOR XHTML1 STRICT *****/
#header a:link {text-decoration:none;}
#header a:visited {text-decoration:none;}
#header a:hover {text-decoration:none;}
#header a:active {text-decoration:none;}

/***** STYLE THE LINKS INSIDE #NAV_TOP using DESCENDANT SELECTOR WITH PSEULO-CLASSES *****/
#nav_top a:link {color:#000000;}
#nav_top a:visited {color:#000000;}
#nav_top a:hover {color:#FFFFFF; background-color:#EF1D16; text-decoration:none;}
#nav_top a:active {color:#FFFFFF; background-color:#EF1D16; text-decoration:none;}

/***** STYLE THE LINKS INSIDE #creditwebsite using DESCENDANT SELECTOR WITH PSEULO-CLASSES *****/
#creditwebsite a:link {color: #2D5BE6; font-weight:bold; text-decoration:none;}
#creditwebsite a:visited {color:#2D5BE6; font-weight:bold; text-decoration:none;}
#creditwebsite a:hover {color:#0000FF; font-weight:bold; text-decoration:none;}
#creditwebsite a:active {color:#0000FF; font-weight:bold; text-decoration:none;}

/***** TO STYLE THE LINKS INSIDE ALL OTHER DIVS *****/
a:link {color:#98C1FF; font-weight:bold; text-decoration:none;}
a:visited {color:#98C1FF; font-weight:bold; text-decoration:none;}
a:hover {color:#0000FF; font-weight:bold; text-decoration:underline;}
a:active {color:#0000FF; font-weight:bold; text-decoration:underline;}
/* **************** END ********************** FOR LINKS ****************************************** */