﻿/* CSS layout */

/* CSS technique from http://www.elitesoundandcinema.com/ */
/* Arrangement from Bloomberg.com, lef.org, quixtar.com */

/* Notes: IE & Mozilla have different actions */
/* For browser compatibility, do not combine background info into one background */
/* Img position in IE is measured from inside DIV; in Mozilla it is from left edge of float. */

/* Float left causes left col div to be left. 
/* Measurements on right col div are also from the left edge */
/* Italic in header causes menus in left col to stop working. Use <span> instead. */

/* For float use wrap with display: Table */
/* Div that is Float must have width defined. */
/* Div that fills in beside float must have Margin:0px  */
/* Wrap must have a width to keep the components together  */



/*-----------------------------------------------------------------*/
/*  LAYOUT AND POSITIONING  */
/*-----------------------------------------------------------------*/


/*-------------------------------------------------*/
/* --PAGE BODY-- */

html {margin: 0;}

body {margin: 0;}

img {border: 0;}

/* Fix for Dynamic menu drop down in IE8 */
.adjustedZIndex {
    z-index: 1;
}


/*-------------------------------------------------*/
/* --HEADER-- */

#masthead {
    width: 600px;
}

#logo {
	float: left;
	width: 140px;
	height: 40px;
	background-color: #004488; 
	background-image: url('../logo/bar-140x40.gif');
	background-position: top left;
	background-repeat: no-repeat;
}

#header {
	float: left;
	margin: 0;
	width: 460px;
	height: 40px;
	background-color: #004488; 
	background-image: url('../images/co%204x2-rl%20wh.gif');
	background-position: right bottom;
	background-repeat: no-repeat;
    display:block;
}

#left1col {
    float:left;
    width:30px; 
}
    
#right1col {
    margin:0px;  
}

#mastleft {
	float: left;
    width: 180px;
    height:20px;
	background-color: #004488; 
	background-image:  url('../img/icons/corner%204x2%20white%20fill%20ul%20db.gif');
	background-repeat:no-repeat;
	background-position:right;
}
#mastright {
    float:left;
	margin: 0;
    width: 390px;
    height:20px;
}

/* 
#topleft {
	float: left;
    width: 150px;
    height: 20px;
	background-color: #004488; 
}

#topright {
	margin: 0;
	padding: 0;
    width:450px;
    height:20px;
	background-image:url('../img/icons/li_tran_myorange-transparent2.gif') ;   
	background-repeat:repeat-x;
}
 */

/*-------------------------------------------------*/
/* --MAIN-- */

#colleft {
    float: left;
    width: 140px;
}
/* 

.colmenu {
    background-color: #004488;
}

.colmenux {
    height: 20px; 
    background-position: right; 
    background-image: url(../images/co%204x2%20lr-wh.gif);  
    background-repeat: no-repeat;
}
 */
 
/* 
#menu_left {
 	height: 40px;
 	width: 150px;
 }
 */
 
#container {
    margin: 0px;
	text-align: left;
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:  10pt;
}

#colright {
	float: right;
	width: 130px;
    border-top:3px #9dceff solid;  
}

#page_content {
    margin:0 130px 0 140px;
    background:  #DBDFE3;
    border-top:3px #9dceff solid;
}


/*-------------------------------------------------*/
/* --PAGE CONTENT - MAIN-- */

#content_cols {	
    width: 100%;
    margin:0;
}

#content_left {
    float: left;
    width: 50%;
}

#content_right {
    float: right;
    width: 49.9%;
	margin: 0;
}

/*
.liner {
    margin: 10px 10px 10px 10px;
}
*/

#liner {
    margin: 6px 6px 6px 6px;
}

#liner_left {
    margin: 0px 3px 0px 6px;
}

#liner_right {
    margin: 0px 6px 0px 3px;
}


/*-------------------------------------------------*/
/* --FOOTER-- */

#footer {
	text-align: center;
	font-size: 8pt;
	font-family: Tahoma;
	color: #FFFFFF;
    background:  #DBDFE3; 
}

#footer_menu {
    background-color: #004488;
}

#footer_copy {
	margin:2px;
    background:  #004488;
	color: #FFFFFF;
	text-align: center;
}


/*-------------------------------------------------*/
/* --FLOAT & WRAP-- */

.wrap{
    width: 100%;
    margin: 0px; 
    display:table; 
}

.clear_float {clear: both; }
.float_left {float:left; } 

#wrap {
    width: 100%;
    margin: 0px; 
}
#float_left {float:left; }    
#clear_float {clear: both; }

.wrap2col {
    width:100%;
}

.left2col {
    float:left;
    width:100px; 
    height:100px;
}
    
.right2col {
    margin:0px;  
}

.left2float {
    float:left; 
    width: 40%; 
    background:#60809f;
	color: #FFff80;
    padding-top: 5px;
	padding-bottom: 5px;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
	font-style:italic;
	text-decoration: none;
}

.right2fill {
    margin:0px;
    text-align:right;
}

.book2col {
    float:left;
    width:125px; 
    height:200px;
}

.back_gradient { background-image:url('../img/icons/bg-grad-dkmd-bl.jpg'); color:white; }
.back_right { background-color:  #E9DFD6; }   
   

#shadow {
padding-top: 9px;
background-image:  url('../images/hd drop-shadow.gif');
background-repeat: repeat-x;
background-position: 0 0;
clear: left;
}


/*-----------------------------------------------------------------*/
/* CLASSES */
/*-----------------------------------------------------------------*/

/* CLASS - link effects */
a.effect1:link { background-color:#0066cc; color:white ; }
a.effect1:hover { background-color:#1a8cff; color:white; }
a.effect1:active { background-color:#9dceff; color:white;}
a.effect1:visited { background-color:#0066cc; color:yellow; }

/*-------------------------------------------------*/
/* --CLASS - color-- */

/*--Cool is blue, warm is orange. Three ways to make cool.
  1.  Slide hue two counts toward blue to make cooler.
  2.  Less saturation makes gray and introduces blue.
  3.  More luminence makes lighter and introduces blue.
  Brown is orange with less saturation.
  Chocolate brown is cool. It is two counts toward red ------*/

.grey {color:#C0C0C0; text-decoration:none}
.rose {color:#FF00B9; text-decoration:none}
.white {color:#ffffff; text-decoration:none}

.yellowbl {color:#FFFFAA; text-decoration:none} /* yellow blue 40-240-1800*/
.yellowgn {color:#F2ff00; text-decoration:none} /* yellow green 42-240-120*/
.yellow {color:#FFCC00; text-decoration:none} /* yellow gold 32-240-120*/

.yellowlt {color:#FFFFAA; text-decoration:none}
.yellowltr {color:#ffff80; text-decoration:none} /* yellow light */
.gold {color:#ffd700; text-decoration:none} /* gold 255-215-0*/
.goldenrod {color:#daa520; text-decoration:none} /* 218-165-32*/

.oldkhaki {color:#C3B091; text-decoration:none}
.oldkhakilt {color:#e9e1d6; text-decoration:none}
.taupe {color:#C2A992; text-decoration:none}
.taupelt {color:#E9DFD6; text-decoration:none} /* background rt */
.taupeover {color:#C6BB93; text-decoration:none} /* old rollover */
.khakibar {color:#d2c5ac; text-decoration:none} /* khaki bar */

.myorange {color:#FFBC80; text-decoration:none} /* my orange 255-188-128 */
.mygold {color:#C4B791; text-decoration:none} /* */


.bluedk {color:#004488; text-decoration:none} /* dark blue 0-68-136*/
.bluemd {color:#0066cc; text-decoration:none} /* medium blue 0-102-204*/
.bluebt {color:#1a8cff; text-decoration:none} /* bright blue 26-140-255*/
.bluelt {color:#55aaff; text-decoration:none} /* light blue */
.bluelr {color:#88c4ff; text-decoration:none} /* lighter blue */
.bluevy {color:#9dceff; text-decoration:none} /* very light blue */
.bluesmoke {color:#60809f; text-decoration:none} /* smokey blue 140-60-120 */

.bluegraylt {color:#DBDFE3; text-decoration:none} /* light blue gray bg */
.bluegraymd {color:#cfd5da; text-decoration:none} /* medium light blue gray 207-213-218 */

.truebluesmoke {color:#60609f; text-decoration:none} /* true blue smoke 160-60-120 */



.greenbright {color:#00994d; text-decoration:none} /* green bright */
.greendeep {color:#008040} /*deep green bright 100-240-60*/
.greensmoke {color:#609f80} /*smoke green 100-60-120*/

.reddeep {color:#990026; text-decoration:none} /* deep red */
.redsmoke {color:#ca353d; text-decoration:none} /* red smoke 238-60-120 */
.brownsmoke {color:#9f7c60; text-decoration:none} /* chocolate 18-60-120 */
.chocolatedeep {color:#8f7e70; text-decoration:none} /* deep chocolate 18-30-120, more blue */

.purpledeep {color:#800080} /*deep purple bright 200-240-60 */
.purplesmoke {color:#9f609f} /*purple smoke 200-60-120 */
.purplegray {color:#8f708f} /*purple smoke 200-30-120 */ 

.black  {color:#000000; text-decoration:none}
.back_color { background:#004488 }
.abs {vertical-align:middle}


/*-------------------------------------------------*/
/* --CLASS - border-- */

.border_left {
	border-style: none none none solid;
	border-left-width: medium;
	color: #ffffff;
	background-color:#0066cc;
	line-height:16px;
}

.border_both {
	border-style: none solid none solid;
	border-left-width: medium;
	border-right-width: medium;
	color: #ffffff;
	background-color:#0066cc;
}


/*-------------------------------------------------*/
/* --CLASS - position-- */

.floatRight { float: right; }
.floatLeft  { float: left; }
.clearer { clear: both; }
.clear { clear: both; }
.clearl {clear:left}

.block  { display: block; }
.next  { display: table; }

.right  { text-align: right; }
.left   { text-align: left; }
.center { text-align: center; }
.none   { text-decoration: none;}



/*-------------------------------------------------*/
/* --CLASS - More arrows-- */

.more {
	background: url('../img/icons/arrow.gif') no-repeat left 5px;
	padding-left: 12px;
}

.highlight {
	background-color: #FFFFCC;
	color: #000;
	font-weight: bold;
}
.more_right {
	background: url('../img/icons/arrow.gif') no-repeat right 5px;
	padding-right: 12px;
}




/*-----------------------------------------------------------------*/
/* --HEADERS-- */
/*-----------------------------------------------------------------*/


.combo0{
	color: #FFff80;
	background-color: #60809f} /* yellow on blue smoke */

.combo1{
	color: #FFff80;
	background-color: #8f708f} /* yellow on purple gray */

.combo2{
	color: #FFff80;
	background-color: #609f80} /* yellow blue on green smoke */

.combo3{
	color: #ca353d;
	background-color: #d2c5ac} /* near red on khaki bar */

.combo4{
	color: #ffff80;
	background-color: #60609f} /* yellow on trueblue smoke */

.combo5{
	color: #FFff80;
	background-color: #9f7c60} /* yellow blue on brown smoke */

.combo6{
	color: #FFff80;
	background-color: #990026} /* yellow on maroon */


.who { 
	font-family:  "Times New Roman", Times, serif;
	font-size: 24px;
    font-weight:bold;
    font-style:italic;
    line-height:36px;
	color: #8f7e70;
	margin: 0;
}/* This was necessary for a header to have italic and work with menu in left col.
    COlor deep chocolate --*/

.people { 
	font-family:  "Times New Roman", Times, serif;
	font-size: 12px;
    font-weight:bold;
    line-height:14px;
	text-decoration: none;
	color: #990026;
	margin: 0;
}

.nologo { 
	font-family:  "Times New Roman", Times, serif;
	font-size: 18px;
    font-weight:bold;
	color: #8f7e70;
	margin: 0;
}/* For no logo  --*/

.book { 
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	font-style:italic;
	color: #FFCC00;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left:125px;
	background:#60809f;
}



h1 { 
	font-family:  "Times New Roman", Times, serif;
	font-size: 20px;
    font-weight:bold;
	color: #C4B791;
	padding-top: 22px;
	margin: 0;
	margin-bottom: 0px;
}

h2 { 
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	font-style:italic;
	color: #FFff80;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left:100px;
	background:#60809f;
}/* Container header main pages--*/

h3 { 
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	font-style:italic;
	color: #0066cc;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left:100px;
	background:#d2c5ac;
}/* Container header sub pages--*/

h6 { 
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	color: #C4B791;
}


h4 {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	font-style:italic;
	color: #004488;
	margin: 0;
	padding-top: 0px;
	padding-bottom: 5px;
	margin-left:100px;
	border:1px #004488 solid;
}


h5 {
	font-family: tahoma;
	font-size: 12px;
	color: #FFF;
	margin-bottom: 6px;
	text-align:center;
}


/*-----------------------------------------------------------------*/
/* --TABLES-- */
/*-----------------------------------------------------------------*/

/*-----------------------------------------------------------------*/
/* --ROUNDED CORNER BOXES-- */
/*-----------------------------------------------------------------*/

/* Corners technique from http://www.redmelon.net/tstme/4corners/ */
/* The embedded technique resolves div alignment in different browsers.
/* In essence a box is made of a top, content, and bottom area. Each area has 3 segments. */

/*-------------------------------------------------*/
/* --box blue medium-- */ 
.rbbmbox    { background: #0066cc; } 

.rbbmtop         { background: #0066cc; }
.rbbmtop div     { background: url('../images/co%20uplt-white.gif') no-repeat left top ;}
.rbbmtop div div { background: url('../images/co%20uprt-white.gif') no-repeat right top ;}

.rbbmbot         { background: #0066cc; }
.rbbmbot div     { background: url('../images/co%20lolt-white.gif') no-repeat left bottom;}
.rbbmbot div div { background: url('../images/co%20lort-white.gif') no-repeat right bottom;}

.rbbmcontentwrap { background: #ffffff; }
.rbbmcontent     { background: #0066cc; }

  /* height and width details */
.rbbmbot {
	width: 100%;
	height: 10px;
	font-size: 1px;}
.rbbmbot div {
	width: 100%;
	height: 10px;
	font-size: 1px;}
.rbbmtop {
	width: 100%;
	height: 10px;
	font-size: 1px;}
.rbbmtop div {
	width: 100%;
	height: 10px;
	font-size: 1px;
	}
.rbbmcontent  { padding: 1px 1em; margin: 0;  }


/*-------------------------------------------------*/
/* --box original version from http://www.elitesoundandcinema.com/-- */

.rbroundbox    {background-color: white; }

.rbtop         { background: url("../img/icons/corner_top_graymd.jpg") repeat-x; }
.rbtop div     { background: url('../img/icons/corner_ul_grayfill_graylt.jpg') no-repeat left top ;}
.rbtop div div { background: url('../img/icons/corner_ur_grayfill_graylt.jpg') no-repeat right top ;}

.rbbot         { background: url("../img/icons/corner_top_graymd.jpg") repeat-x; }
.rbbot div     { background: url('../img/icons/corner_ll_grayfill_graylt.jpg') no-repeat left bottom;}
.rbbot div div { background: url('../img/icons/corner_lr_grayfill_graylt.jpg') no-repeat right bottom;}

.rbcontentwrap { background: url("../img/icons/corner_right_graymd.jpg") repeat-y; }
.rbcontent     { background: url("../img/icons/corner_right_graymd.jpg") repeat-y right; }

  /* height and width details */
.rbbot {
	width: 100%;
	height: 8px;
	font-size: 1px;
}
.rbbot div {
	width: 100%;
	height: 8px;
	font-size: 1px;
}
.rbtop {
	width: 100%;
	height: 8px;
	font-size: 1px;
}
.rbtop div {
	width: 100%;
	height: 8px;
	font-size: 1px;
}
.rbcontent  { padding: 1px 1em; margin: 0;  }
/* --/ original box-- */ 


/*-----------------------------------------------------------------*/
/* -/Woody Woodpecker-- */
/*-----------------------------------------------------------------*/













