﻿/* -----------------------------------------------
Project: Patient Navigator Course
Cascading Style Sheet for Screen Display
Designer and Developer: Glenda Crawford, glenda.crawford@cudenver.edu
Website: http://www.cittdesign.com
Last Update: March 4, 2008
----------------------------------------------- */
html {
	padding: 0px;
	margin: 0px;
	color: #000;
	background: /*7C7C8F*/#fff url(../images/header_repeat.jpg) repeat-x 0px 0px;
	height: 100%;
	}
body {
	padding: 0px;
	margin: 0px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1em;
	height: 100%;
}
#container {
	padding: 0px;
	margin: 0px;
	width: 760px;
	line-height: 1.5em;
	position: relative;
	background: url(../images/left_bkgrnd_repeat.jpg) repeat-y 0px 0px;
	/*border-right: 2px solid #4d3A19;*/
	min-height: 100%;
}
*html #container {
	height: 100%;
}

#header {
	padding: 0;
	margin: 0;
	position: relative;
	width: 760px;
	height: 138px;
	background-image: url(../images/header.jpg);
}
/*------ MAIN PAGE NAVIGATION ------*/
#nav {
	padding: 0;
	margin: 0;
	width: 250px;
	height: 30px;
	position:absolute;
	top: 112px;
	left: 580px;
}
#nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 100%;
}
#nav ul li {
	display: inline;
	height: 30px;
}
#nav a {
	margin: 0px;
	padding: 0px 10px 0px 10px;
	float: left;
	font-size: .75em;
	color: #fff;
}
#nav ul li a:hover {
	color: #fff;
	background-color:#463716;
}
/*------ MAIN BODY MARKUP ------*/
#content {
	padding: 0px 25px 0px 160px;
	margin: 0px;
	background: url(../images/left_bkgrnd_img.jpg) no-repeat;
	min-height: 550px;
}
*html #content { /*IE Fix*/
	height: 550px;
}
#content h1 {
	padding: 10px 0px 7px 15px;
	margin: 0px;
	color: #757497;
	line-height: 1.5em;
	font: 1.4em Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	background: url(../images/h1_underline.jpg) no-repeat left bottom;
	}
*html #content h1 { /*IE Fix*/
	padding: 10px 0px 7px 0px;
	height: 20px;
	}

#content h2 {
	padding: 10px 0px 0px 0px;
	margin: 0px;
	color: #755c28;
	background-color:#fff;
	line-height: 1.5em;
	font: 1.3em Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}
#content h3 {
	padding: 10px 0px 0px 0px;
	margin: 0px;
	color: #755c28;
	background-color:#fff;
	line-height: 1.2em;
	font: 1.0em Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}
#content p {
	padding: 3px 0px 15px 0px;
	margin: 0px;	
}
#content table { /* table */
	margin: 10px 0px;
	padding: 0px;
	color: #000;
	background-color: #fff;
	border-top: 1px solid #757497;
	border-right: 1px solid #757497;
	width: 100%;
}	
#content table th { /* table header */
	color: #fff;
	background-color: #757497;
	padding: 5px 10px;
	text-align: left;
	vertical-align: top;
}	
#content table td { /* table cell */
	padding: 5px 10px;
	border-left: 1px solid #757497;
	border-bottom: 1px solid #757497;
	vertical-align: top;
	}
#content table td ul { /* table cell unordered list */
	margin: 0px 0px 0px 15px;
	padding: 0px;
	}
*html #content table td ul { /* table cell unordered list */
	margin: 0px 0px 0px 20px;
	padding: 0px;
	}
#content ul {
	margin: 0px 0px 0px 40px;
	padding: 0px;
}
*html #content ul {
	margin: 0px 0px 0px 50px;
	padding: 0px;
}
#content ul li {
	padding-bottom: 7px;	
	list-style-image: url(../images/bullet_level1.png);
}
#content ul li ul li {
	margin: 3px 0px 0px 0px; 
	list-style-image: url(../images/bullet_level2.png);
}
#content ol {
	margin: 0px 0px 0px 40px;
	padding: 0px;
}
*html #content ol {
	margin: 0px 0px 0px 50px;
	padding: 0px;
}
#content ol li {
	padding-bottom: 7px;
	line-height: 1.5em;
}
#content ol li ol li {
	margin: 3px 0px 0px 0px; 
	line-height: 1.5em;
	list-style-type: lower-alpha;
}
#content img {
	float: right;
	border: 1px #463716 solid;
	margin: 10px 15px 10px 15px;
	}
#content img.imageleft {
	float: left;
	border: 1px #463716 solid;
	margin: 10px 15px 10px 15px;
	}
#content img.nofloat {
	float: none;
	border: 1px #463716 solid;
	margin: 10px 15px 10px 20px;
	}
#content img.noborder {
	float: right;
	border: 0px #fff solid;
	margin: 10px 15px 10px 15px;
	}
#content a {
	color: #53526D;
	background-color:#fff;
}
#content .smalltext {
	font-size:80%;
}
#content .bigtext {
	font-size: 190%;
}
/* -----------------------highlight boxes------------------------------------*/
#content .quotables { /* quotables box */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative; /*needed for ie bug: container is relative, so this must also be relative*/
	background: url(../images/notebox_repeat.gif) repeat-y left top;
	width: 570px;
	clear:both;
}
#content .quotables h4 { /*h4 title of quotable*/
	margin: 0px 0px 0px 0px;
	padding: 20px 25px 5px 30px;
	color: #755c28;
	line-height: 1em;
	font: .9em Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	background: url(../images/notebox_top.gif) no-repeat left top;
}
#content .quotables p { /*paragraph of quotable*/
	margin: 0px 0px 0px 0px;
	padding: 0px 25px 20px 30px;
}
#content .quotables .last { /*last element of quotable*/
	margin: 0px 0px 0px 0px;
	padding: 0px 25px 20px 30px;
	background: url(../images/notebox_bottom.gif) no-repeat left bottom;
}
#content .quotables ul { /*unordered list of quotable*/
	margin: 0px 0px 0px 0px;
	padding: 0px 30px 10px 50px;
}
#content .quotables ul.last { /*last unordered list of quotable*/
	margin: 0px 0px 0px 0px;
	padding: 0px 30px 10px 50px;
	background: url(../images/notebox_bottom.gif) no-repeat left bottom;
}
#content .quotables img {
	float: right;
	border: 1px #463716 solid;
	margin: 20px 30px 0px 15px;
	}
#content .tip { /* tip box */
	margin: 10px 7px 10px 10px;
	padding: 0px 0px 0px 0px;
	position: relative; /*needed for ie bug: container is relative, so this must also be relative*/
	background: #fff url(../images/noteboxslim_repeat.gif) repeat-y left top;
	width: 252px;
	float:right;
}
#content .tip h4 { /*h4 title of tip*/
	margin: 0px 0px 0px 0px;
	padding: 20px 20px 0px 20px;
	color: #755c28;
	line-height: 1em;
	font: .9em Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	background: url(../images/noteboxslim_top.gif) no-repeat left top;
}
#content .tip p { /*paragraph of tip*/
	margin: 0px 0px 0px 0px;
	padding: 0px 20px 20px 20px;
}
#content .tip .last { /*last unordered list of tip*/
	margin: 0px 0px 0px 0px;
	padding: 0px 20px 20px 20px;
	background: url(../images/noteboxslim_bottom.gif) no-repeat left bottom;
}
#content .tip ul.last { /*last element of tip*/
	margin: 0px 0px 0px 0px;
	padding: 0px 20px 10px 40px;
	background: url(../images/noteboxslim_bottom.gif) no-repeat left bottom;
}
#content .tip ul { /*unordered list of tip*/
	margin: 0px 0px 0px 0px;
	padding: 0px 20px 10px 40px;
}
#content .tip a, #content .quotables a {
	color: #53526D;
	background-color:#eaeaef;
}
/* -----------------------question styles------------------------------------*/
#content .question {
	margin: 20px 0px 0px 0px;
	background-color: #DBDBE3;
	position: relative;
	border: 1px solid #757497;
}
#content .question p {
	margin: 0px;
	padding: 5px;
}
#content .question p label {
	margin-left:20px;
}
#content .question a {
	background-color: #DBDBE3;
}
.feedback {
	margin-top: 10px;
	background: #BBBBCC;
	border-top: 1px solid #757497;
	border-right: 0px solid #757497;
	border-bottom: 1px solid #757497;
	border-left: 0px solid #757497;
	position: relative;
}
#content .feedback p {
	margin: 0px;
	padding: 5px 5px 5px 10px;
}
td.feedback {
	margin: 0px;
	padding: 0px;
	background: #BBBBCC;
	border: 0px solid #BBBBCC;
}
#content td.feedback p {
	margin: 0px;
	padding: 0px;
}
/* -----------------------content definition styles - NEW------------------------------------*/
#content dl#TJK_DL { /*definition list used for show and hide drop down information*/ 
	margin: 10px 0px 15px 10px;
	padding: 10px;
	color: #000000;
	background-color: #eeeef2;
	border: 1px solid #757497;
	width: 540px;
}
#content dd {margin: 5px 0px 0px 0px; padding:10px; color: #000; background-color: #eeeef2;}
/*see additional formatting for the TJK definition list in the TJK_ToggleDL.css*//* -----------------------popup links------------------------------------*/
#content .popup {
	padding: 10px;
	background-color: #E7DFD8;
	border: 2px solid #4d3a19;
	height: auto;
	width: 550px;
	position: absolute;
	z-index: 1;
	left: 170px;
	top: 200px;
	visibility: hidden;
}
#content .popup a {
	background-color: #E7DFD8;
}
#content .popup ul {
	margin-left: 40px;
	margin-right: 40px;
}
#content .popup img {
	margin: 5px 0px;
	padding: 0px;
	position:relative;
	float:none;
}
#content .popup table { /* table */
	width: 90%;
}	
#content .popup p.closewindow {
	margin: 0px;
	padding: 0px;
	text-align:center;
}
#content .popup h2, #content .popup h3, {
	background-color: #E7DFD8;
}
/*------ SIFR MARKUP ------*/
/* These are standard sIFR styles... do not modify */
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}
.sIFR-replaced {
	visibility: visible !important;
}
span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}
/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}
/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
/*------ FOOTER MARKUP ------*/
#footer {
	margin: 0px 0px 0px 150px;
	padding: 6px 25px 0px 0px;
	color: #463716;
	clear:both;
	background: #fff url(../images/compass.jpg) no-repeat right bottom;
	height: 134px;
	z-index: 1;
	position:relative;
	vertical-align:bottom;
}
#footer p {
	margin: 100px 0px 0px 0px;
	padding: 6px 25px 6px 10px;
	font-size: .8em;
}
#footer a:link, #footer a:visited {
	color: #463716;
	background-color:#fff;
}

/*------FLASH VIDEO STYLES------*/
#content object { /* object style */
	float:right;
	margin: 0px 10px;
	position:relative;
	clear:both;
}
#content span.objectlegend { /* object legend style */
	float: right;
	font-size: 95%;
	text-align:center;
	background-color: #A4B3CA;
	width: 310px;
	padding: 5px;
	margin: 0px 10px;
	position:relative;
}
/*------ SUB PAGE NAVIGATION MARKUP (page xx of yy) ------*/
#progress { /* progress div that includes page numbers and previous and next buttons, top of page */
	margin: 0px 0px 0px 415px;
	padding: 5px;
	width: 150px;
	text-align: center;
	vertical-align: middle;
	line-height: 1.2em;
	font-size: .8em;
	position:relative;
}
#progressbottom { /* progress div that includes page numbers and previous and next buttons, bottom of page */
	margin: 10px 0px 0px 0px;
	padding: 5px;
	width: 150px;
	float: right;
	text-align: center;
	vertical-align: middle;
	line-height: 1.2em;
	font-size: .8em;
	clear:both;
	position:relative;
}
#progress a img, #progressbottom a img { /* back and next buttons */
	margin: 0px;
	padding: 0px 10px 0px 10px;
	border: 0px;
	vertical-align: middle;
	float:none;
}
/*------ SIFR Font Replacement CSS for H1 ------*/
/* These are standard sIFR styles... do not modify */
.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}
.sIFR-replaced {
	visibility: visible !important;
}
span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}
/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
 display: none !important;
}
/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
.sIFR-hasFlash h1 {
	visibility: hidden;
}
/*------ Miscellaneous ------*/

.hidden {
	visibility: hidden;
}
.designernotes {
	color: red;
	font-weight: bold;
	}
