
html,body{height:100%;}
/* Default font */
body {
	font-family: "Segoe UI", "Arial", sans-serif; 
	font-size:10pt;	
	background-color:#4A4E51;
	color:#333333;	
}
a {text-decoration:none}
a:hover {text-decoration:none; color:#396F89;}
a:link, a:visited {text-decoration:underline;color:#396F89} 

/* hyperlinks */
p a, ol li a {
	color:#396F89;
	text-decoration:none;
	border-bottom:1px dotted #396F89;
}
p  a:hover, ol li a:hover {text-decoration:none; color:#396F89;}
p  a:link, p a:visited, ol li a:link, ol li a:visited {text-decoration:none; color:#396F89;} 

hr {height:0px;border:1px solid #CCCCCC;}
img {border:0}

/* default headlines in normal text */
h1, h2, h3, h4 {font-weight:bold;color:#396F89}
h1 a {text-decoration:none}
h1 {font-size:20pt}
h2 {font-size:14pt}
h3 {font-size:12pt}

.big {font-weight:bold;font-size:18pt;line-height:14pt;}
.large {font-weight:bold;font-size:15pt;line-height:14pt;}
.small{font-size:8pt}
.tiny{font-size:8pt} 

.copy {font-size:12pt;color:#396F89}
.text {font-size:10pt;line-height:120%;} 
.teaser {font-size:9pt; margin:0px 0px 4px 0px;}
.more {color:#FF9900 !important; font-style:italic; text-decoration:none;}
.headline {font-weight:bold; font-size:110%}
.spaced {letter-spacing:3px;}

/* music examples pages */
.explain {margin-bottom:0px;margin-top:0px}
.chords {color:#0066FF;margin-bottom:4px;margin-top:8px}
.playback {margin-bottom:8px;margin-top:2px}
.download, .download A, .download A:visited, .download A:active {color:#0066FF;margin-top:0px;margin-bottom:0px}

ol li, ul li {margin-bottom:0.5em;}
.boxright p {line-height:140%;}
.padded {padding:8px}

/* background colors & default font sizes */
.paper {background-color:white}
.form {background-color:#FFFFCC}
.error {color:#FF0000; font-weight:bold}
.achtung {background-color:#FFF572}

/* special elements */
.label{font-size:8pt; margin-top:8px; margin-bottom:0px;color:#396F89} 
.fixed{font-family:"Courier New","Courier","mono"} 
.capital{font-size:32pt; font-weight:bold; color:#396F89}

/* form input fields */
.boxed {
	border:1px dotted #396F89;
	background-color:#F0F5F0;
	height:1.5em;}

/* data items in tables and lists */
.data {
	background-color:#F0F5F0;
	padding-left:1em;}

/* homepage testimonials */
.quoteLarge { 
	font-style:italic;	
	color:#5E6266;
	padding:0px 10px 0px 0px; }

/* article listings */
.listing {
	padding: 0px 8px 0px 8px;
	margin-bottom:8px;
	clear:left;
}

/* #navTopLinks, #navTopLogo, #navTopMenu are single-instance object ids */

#navTopLinks {
	display:block;
	position:absolute; top:6px;	left:0px;
	margin-left:20px;
	font-weight:bold; }

#navTopLogo {
	display:block;
	position:absolute; top:0px;	right:8px;
	z-index:2; }

#navTopMenu {
	display:block;
	z-index:4;
	position:absolute; left:0px; top:40px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:12px; }

#navTopMenu ul {
	padding:0px;
	margin:0px 0px 0px 14px;
	list-style:none; } 
		
#navTopMenu li {	
	float:left;
	background:#6E7277 url(/images/grad20.png) repeat-x;
	padding:10px 10px 11px 10px;
	margin-right:2px;
	margin-bottom:0px;	
	display:block;
	/*height:35px;*/
	overflow:hidden; }

#navTopMenu li.current {
	color:#5E6266;
	border-top:4px solid #FFCC66;
	background:#F0F0F0 url(/images/grad10.png) repeat-x; }

#navTopMenu li a:hover {
	color:black; }	

#navTopMenu li a {
	text-decoration:none;
	color:white;}

#navTopMenu li.current a {
	text-decoration:none;
	color:black;}

	
/* left-side navigation block, level B */

ul.navListB {	
	display:block;
	list-style:none; 
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	width:auto;
	margin:20px 0px 20px 0px;
	padding:0px;}

ul.navListB li {
	display:block;
	margin:8px 0px 0px 0px; 
	padding-right:8px; }

ul.navListB li a, ul.navListB li a:visited, ul.navListB li a:link {
	text-decoration:none; 
	color:#5E6266;
	font-weight:bold; }

ul.navListB li a:hover {
	text-decoration:underline; }
		
ul.navListB li.current {
	background: #E5E8EC url(/images/grad20.png) repeat-x;
	height:2em;
	padding-top:0.5em;
	font-weight:bold !important;
	border-left:10px solid #FFCC00; }


/* left-side navigation block, level C */

ul.navListC {
	list-style-type:none;
	margin-left:0px;
	padding-left:0px;
	margin-bottom:2em; }
	
ul.navListC li {
	display:block;
	color:#00548E }

ul.navListC li a, ul.navListC li a:visited, ul.navListC li a:link {	
	font-weight:normal;
	text-decoration:none;
	color:#6E7277; }

ul.navListC li a:hover {
	text-decoration:underline; }
	
ul.navListC li.current {
	border-left:8px solid #FFCC00; }

/* links placed on body background at top and bottom of page */
.menuD { 
	padding:8px 0px 4px 0px;
	font-size:9pt; 
	color:#D4D7DB; }
.menuD A:link, .menuD A:visited, .menuD A:active {color:#D4D7DB;text-decoration:none}
.menuD A:hover {color:white;text-decoration:underline}
		
/* bottom site map */
.sitemap {
	margin:1px 0px 12px 0px;
	padding:0px;
	height:auto;
	overflow:hidden;
	font-size:8pt;
	color:#D4D7DB;	
	background-color:#6E7277; }
.sitemap-column {
	margin:8px 1px 12px 0px;
	padding:4px 0px 4px 4px;	
	width:126px;
	height:210px;
	float:left }	
	
.divider {
	border-right:1px solid #7E8387; }
		
.sitemap A:link, .sitemap A:visited, .sitemap A:active {text-decoration:none;color:#E5E8EC}
.sitemap A:hover {color:black}
.sitemap ul {
	list-style:none;
	margin-left:8px;
	padding-left:0px; }
	
.sitemap li {
	margin-bottom:3px;
	margin-left:0px;
	padding-left:0px; }	

.sitemap h4 {
	margin-bottom:0px;
	margin-left:8px;
	padding-left:0px;
	color:#E5E8EC;
	font-size:120%;
	font-weight:bold;} 
.sitemap li.current {
	color:white;
	font-weight:bold !important;}	

/* outer frame that contains everything */
.container {
	width:800px;
	height:auto;
	overflow:hidden;
	margin:0px auto;
	position:relative;
}

/* layout box spaning full container width */
.boxmain {
	display:block;
	clear:both;
	width:100%;
	overflow:hidden;
}

/* layout wrapper used as container around .boxleft and .boxright */
.boxfull {	
	width:800px;	
	overflow:hidden;
	vertical-align:top;	
	background-color:white;	
}

/* left side navigation box */
.boxleft {
	float:left;
	width:150px;
	margin:0px;	
	padding:0px;
	vertical-align:top;	
	text-align:right;
	/*background-color:#F7FAFC url(/images/grad20.png) repeat-x;*/
	border-right:1px solid #D4D7DB;
}

/* righthand content area for pages with left-side navigation */
.boxright {
	float:right;
	width:610px;
	overflow:hidden;	
	margin:0px;
	padding:12px 20px 24px 16px;	
	vertical-align:top;
	background-color:white;		
}

/* inset layout box for pages w/o left-side navigation */
.boxinset {	
	width:776px;	
	overflow:hidden;
	vertical-align:top;	
	background-color:white;	
	padding:12px;
}

/* specify arbitrary areas for use with text content */
.content {
	vertical-align:top;
	background-color:white; }

.textflow {
	line-height:140%; }

/* teaser columns on homepage */
.teaser-column {
	float:left;
	overflow:hidden;
	height:220px;
	margin:0px 1px 0px 0px;	
	padding:0px 1px 0px 0px;
	vertical-align:top;	
	background-color:white;
}
.teaser-column p {padding:4px; font-size:9pt;}

/* column headings with gradient background */
.caption {
	clear:left;
	font-size:10pt;
	text-align:center;
	vertical-align:bottom;
	background:#C2C6CA url(/images/grad20.png) repeat-x;
	color:7E8387;	
	padding:4px;
	margin:0px;
	height:auto;
	min-height:20px;
}

.grad-small {
	background-image: url(/images/grad10.png);
	background-repeat:repeat-x;}

.grad-medium {
	background-image: url(/images/grad20.png);
	background-repeat:repeat-x;}

.grad-large {
	background-image: url(/images/gradsoft.png);
	background-repeat:repeat-x;}

/* ads and teasers in left navigation area */
.hint {
	display:block;
	font-size:8pt;
	text-align:right;
	line-height:120%;
	padding:8px;
}

/* lizard watermark picture */
.watermark {
	background-color: #FFFFFF;
	background-image: url(/images/fossil_background.gif);
	background-repeat: no-repeat;
	background-position: center;
}





