/* >>>>> awl 3 col css <<<<<  */

/*
Page Colors
-------------
#EAFFC3 Green Col
#FFB4FF	Pink Col
#CF0041 Headlines
#00993E Green Links

Logo Colors
------------
#FFCC00	amber
#24CA65	green stem
#FF55A9 pink petal
#FF4853 orange petal
#FF2463  red petal
*/

/* >>>>> Main Elements <<<<< */

html, body {margin: 0; padding: 0; font-size:x-small; }

body {
  background-color: #FFB4FF;
  font-family: 'Lucida Grande',Verdana, Geneva, Arial, Helvetica, sans-serif;
  padding:0;
  margin:0;
}

p,td,th,div,span,ol,ul,dl,dt,dd,li,form {
  font-family: 'Lucida Grande',Verdana,Arial,Geneva,Helvetica,SunSans-Regular,sans-serif;
  font-size: x-small;
  color: #444444;
}

p {margin:0 padding: 0}

h1,h2,h3,h4,h5,h6,h7,h8,h9 {
  font-family:'Lucida Grande',Arial,Verdana,Geneva,Helvetica,SunSans-Regular,sans-serif;
  color: #ee0066;
  margin-bottom:3px;
  text-align: left;
}

h1 { font-size: 200%; border-bottom: 1px solid #ee0066;}
h2 { font-size: 180%; border-bottom: 1px solid #ee0066;}
h3 { font-size: 160%; border-bottom: 1px solid #ee0066;}
h4 { font-size: 140%; border-bottom: 1px solid #ee0066;}
h5 { font-size: 120%; border-bottom: 1px solid #ee0066;}
h6 { font-size: 100%; border-bottom: 1px solid #ee0066;}
h7 { font-size:  90%; border-bottom: 1px solid #ee0066;}
h8 { font-size:  80%; border-bottom: 1px solid #ee0066;}
h9 { font-size:  75%; border-bottom: 1px solid #ee0066;}

a:link { color: #00993E; text-decoration: none; border:none;}
a:visited { color:#00993E; text-decoration: none;border:none; }
a:hover { background:#FFCC00; color: #000000; text-decoration: none; border:none;}
a:active { background:#FFB4FF; color:#FFFFFF; text-decoration: none; border:none;}
/*what does this do?
a.clicked:link { font-weight:bold; background:#FFB4FF; color:#FFFFFF; text-decoration: none; }*/


} 
/* bottom padding instead of margin to avoid Op6
      "Bottomgap Bug." Please see Big John's explanation of this bug -
      http://www.positioniseverything.net/op-omnibus/bottomgap.html */

/* Definition Lists */
dl {margin-top:1em;}
dt {font-weight:bold;}
dd {margin-bottom:0.5em;}

table {
 /* table-layout:fixed; for faster rendering*/
  border-collapse: collapse;
  border:none !important;
  margin-left:auto;
  margin-right:auto;
}

th {background: #EAFFC3; border: 0.2em solid #24CA65;}
td {text-align: center;}

ul {
  color: #444444;
  list-style: square !important;
  list-style-position: outside;
  padding: 0 0.2em 1.5em 2.0em;
}


pre {
  background: #EAFFC3;
  border: 0.1em solid #444444;   
  margin: 0.5em;
  padding: 0.5em;
  font-family: "Courier New",courier,georgia sans-serif;
  font-size: 0.9em;
  font-weight: normal; }


/* >>>>> CSS One-image, three-state button <<<<< */

div.menu {
  background-color:#00993E;
  width: 185px;
  margin-left: -6px;
  text-align: left;
  font-weight: bold;
  font-size: 1.0em;
  line-height: 2.0em;
}

div.menu a {
    font-family: 'Lucida Grande',Verdana,Arial,Geneva,Helvetica,SunSans-Regular,sans-serif; 
    margin: 0;
    padding:0px 0px 0px 24px;
    border:none;
    background: url(img/button.gif) 0 0 no-repeat;
    text-decoration: none;
    display:block;
    }

div.menu a:link { color: #00993E; }
div.menu a:visited { color: #00993E; }
div.menu a:hover {background-position: -185px 0; color: #000000;}
div.menu a:active {background-position: -370px 0; color: #FFFFFF;}
div.menu a.clicked:link {background-position: -370px 0; color: #FFFFFF;}

div.outer {
    width: 185px;
    margin-top:0px;
    padding-left:0px;
}

div.outer a {
    padding:0px;
    overflow:hidden;
    display: block;
    border-top: 0.1em solid #444444;
}

div.outer span {
    display: block;
    margin: 0;
    padding: 0;
}

div.outer a:hover {
    background-position: -185px 0;
    color:#FFFFFF;
}

div.outer a:active {
    background-position: -370px 0;
    color:#FFFFFF;
}


/* >>>>> Custom CSS Classes <<<<< */

.right-tbl table {
 /* table-layout:fixed; for faster rendering*/
  border-collapse: collapse;
  border:none !important;
  width: 270px;
  padding:0
  margin-left:auto;
  margin-right:auto;
}

.caption {
    font-size: 100%;
    color:#444444;
    text-align:center;
    margin-top:-6px;
}

.img-frame {
   display: block;
   border: 8px solid #FFFFFF;
 }

.alignright  {margin: 0; padding: 1em 0.5em 2em 0; text-align: right; }

.alignright strong {color: #444444; font-weight: bold; }

.small {
  font-size: 90%;
  color: #444444;
}

.small alignright {
  font-style: italic;
  margin: 0;
  padding: 1em 0.5em 2em 0;
  text-align: right;
}

.small alignleft {
    font-style: italic;
  margin: 0;
  padding: 1em 0.5em 2em 0;
  text-align: left;
}

.decoration {float: right; margin: 0.25em 0.5em; position: relative; } /*** for IE6 ***/

html[xmlns] .decoration {margin: 0 0.5em 0 0; } /*** Moz put the image too low ***/

.dash {border-top: 0.1em solid #444444; margin-top: 1em;  }

/* >>>>> Custom CSS IDs <<<<< */

#strip { width: 1200px }

#nav {
  background: #EAFFC3;
  float: left;
  width: 175px;
  height:3000px;
  margin: 0;
  list-style:none !important;
  padding:0;
  }

#nav li {
  float: left;
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande", Arial, Verdana sans-serif;
  font-weight:bold;
  font-size:x-small;
  }

#nav a {
  float: left;
  display: block;
  width:155px;
  padding: 4px 15px;
  color: #00993E;
  font-weight:bold;
  text-decoration: none;
  border: none; /*1px solid #EAFFC3;*/
  background: #EAFFC3 url(img/off_bg3.gif) repeat-x top left;
  }

#nav a:hover, body#intro #t-intro a {
  color: #CF0041;
  /*padding-bottom: 5px;*/
  border-color: #444; /*#727377;*/
  background: #EAFFC3 url(img/off_bg.gif) repeat-x top left;
  }


#header {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height:175px;
  margin: 0;
  padding: 0;
  }

} /*** must be set so the following absolutely positioned divs are
          placed correctly on initial load of the page***/

#pagetitle {
  font-family: 'Lucida Grande',Verdana,Arial,Geneva,Helvetica,SunSans-Regular,sans-serif;
  font: #FF2463 bold 125%;
  margin: 0;
  padding: 0;
  text-align: center;
}

#leftbox {
  background-color:#EAFFC3;
  position: absolute;
  left: 0;
  top: 175px;
  width: 185px;
  height:3000px;
  padding:0;
  margin:0;
}

#leftbox .left-title {
	color:#444444;
	font-size:100%;
	font-weight:bold;
    border-bottom: solid 0.075em #444444;
	margin:12px 6px 3px 0; 
  display:inline;
}

#container {
  display:inline;
  background: #FFFFFF url(img/container-shadow.gif) repeat-y top left;
  position: absolute;
  left: 185px;
  top: 175px;
  width: 510px;
  margin:0;
 padding:0 15px 0 15px;

  /*padding:0 10px 0 10px;*/

}

/*** IE5/Mac has trouble with right positioned boxes due to a secret margin. See
     - http://www.l-c-n.com/IE5tests/right_pos/index.shtml - Philippe Wittenbergh's page
     for an explanation of this problem and Sam Foster's page for an explanation of the
     hack used  - http://www.sam-i-am.com/testsuite/css/mac_ie5_hack.html - ***/

#rightbox {
  background: #FFB4FF;
  position: absolute;
  border: none;
  left: 735px;
  top: 165px;
  width: 270px;
  margin:0;
  padding:0;
  height:3000px;
  }

/* hide the following from IE5-Mac \*/
#rightbox {
  right: 0;
  margin-right: 0; }
/* IE5-Mac can see the rest */

#rightbox .right-title {
	color:#CF0041;
	font-size:125%;
	font-weight:bold;
        border-bottom: solid 1px #CF0041;
	margin:12px 6px 3px 0; 
	display:inline;
}


#rightbox a:link { color: #00993E; text-decoration: none; }
#rightbox a:visited {  color: #00993E; text-decoration: none; }
#rightbox a:hover { background:#FFCC00; color: #000000; text-decoration: none; }
#rightbox a:active { background:#FFB4FF; color:#FFFFFF; text-decoration: none;}
/*what does this do?*/
#rightbox a.clicked:link { font-weight:bold; background:#FFB4FF; color:#FFFFFF; text-decoration: none;}

#centerbox {
  width: 510px;
  margin: 0;
  padding: 0x;
  display:inline;
  /*position: relative; } *//*** for IE6 ***/
}

#wrapper {
  margin: 0;
  padding: 0; }

/*** Tan hack for IE. Only IE browsers see this selector.
     This replaces the old Tantek hack. Please see Edwardson Tan's page.
     http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html ***/

* html #wrapper {
  width: 100%; /*** IE5.5 needs this value to eliminate a horizontal scrollbar ***/
  w\idth: auto; } /*** resets the value for IE6 and IE5-Mac ***/

#wrapper2 {
  margin: 0;
  padding: 0; }

/*** Tan hack for IE. Only IE browsers see this selector.
     This replaces the old Tantek hack. Please see Edwardson Tan's page.
     http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html ***/

* html #wrapper2 {
  width: 100%; /*** IE5.5 needs this value to eliminate a horizontal scrollbar ***/
  w\idth: auto; } /*** resets the value for IE6 and IE5-Mac ***/


.left {
  margin: 3px;
  padding: 0;
  width: 185px;
  float: left;
}

html>body .left {margin-left: 12px; } /*** IE doubles the margin on the float. This sets
          the margin to the correct width for others ***/

.right {
  margin: 3px;
  padding: 0;
  width: 250px;
  float: right;
}

html>body .right {margin-right: 12px; } /*** IE doubles the margin on the float. This sets
          the margin to the correct width for others ***/

.clear {
  clear: both;
  margin: 0;
  padding: 0; }

#center-bottom {
  width: 530px;
  margin: 0;
  padding: 0;
  position: relative; } /*** IE6 needs this to display the div ***/

#footer {
  color: #444444;
  margin: 0;
  padding:0;
  width: 520px;
  border-top: 0.1em solid #24CA65;
}

/* >>>>> Drop Shadows <<<<< */

.img-shadow {
  clear: both;
  float:left;
  background: url(img/ds/shadowAlpha.png) no-repeat bottom right !important;
  background: url(img/ds/shadow.gif) no-repeat bottom right;
  margin: 6px 0 0 2px !important;
  margin: 6px 0 0 1px;
}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px 0px;
  padding: 8px;
 /*width: 154px;
  height: 203px;*/
}

.p-shadow {
  clear: both;
  width: 90%;
  float:left;
  background: url(img/ds/shadowAlpha.png) no-repeat bottom right !important;
  background: url(img/ds/shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}

.p-shadow div {
  background: none !important;
  background: url(img/ds/shadow2.gif) no-repeat left top;
  padding: 0 !important;
  padding: 0 6px 6px 0;
}

.p-shadow p {
  color: #000;
  background-color: #fff;
  font: 1em georgia, serif;
  border: 1px solid #a9a9a9;
  padding: 4px;
  margin: -6px 6px 6px -6px !important;
  margin: 0;
}