/* General rules for page layout and presentation
************************************************/
body { 
  font-family: Arial, Helvetica, sans-serif;   /* Default font for nav and headers */
  background: #B6D4EC; 			                       
  text-align: center; /* centers page in combination with div#container {margin: 0 auto}  */
}

body a { 
  color: #808080;
  color: inherit;
  text-decoration: none;
}

body a:hover  { text-decoration: underline; }

body a:active { 
  outline: none;  /* Removes dotted outline surrounding links when clicked; doesn't seem to work anymore in FF3.5? */
  color: #6BD8EB;
}


/* Contains everythings, centers page 
************************************/
div#container {
  width: 980px;
  height: 800px;
  margin: 0 auto;
  padding-top: 11px;
  background: #281305; 
}


/* Michael's Chance header image 
*******************************/
div#header {
  display: block;
  width: 962px;
  height: 157px;
  margin: 0 auto;
  margin-bottom: 11px;
  background-image: url('images/header.jpg'); 
}


/* Main wrapper, contains and centers 
everything beneath header (including nav) 
****************************************/
div#main {
  width: 960px;
  height: 622px;
  margin: 0 auto;
  background: white;
}


/* Rules affecting navigation only
*********************************/
ul#navigation {
  position: relative;
  margin: 0;
  height: 20px;
  padding: 0;
  width: 960px;
  list-style-type: none;
}

ul#navigation li { 
  position: relative;
  top: 20px;
  display: block;
  float: left; 
  margin: 0 18px 0 18px;
  font-size: 8pt;
  font-weight: bold;
  text-transform: uppercase;
}

ul#navigation li a { 
  display: block; 
  color: #808080;
} 

ul#navigation li a:hover, 
ul#navigation li a.current { 
  position: relative;
  top: 2px; 	/* creates 2px vertical offset on nav item mouseover */
  text-decoration: none;
  border-bottom: solid 4px #F2F2F2;
} 

ul#navigation li.rightnav a { color: #6BD8EB; }  /* Right links are blue */

ul#navigation li a.current { top: 0px; }   /* Don't mouseover the currently selected page */


ul#navigation li img.separator { 
  display: block;
  position: relative;
  top: -4px;
  width: 4px;
  height: 22px;
}

/* Actual content exists in div.content
**************************************/
div.content {
  width: 939px;
  height: 382px;
  margin: 35px 0 0 0;
  color: #5E5E5E;
}


/* Rules affecting paragraphs and headers
****************************************/
div.content p {
  display: block;
  margin: 0 35px 0 0;
  padding: 20px 0 0 12px;
  font-family: Trebuchet MS, Helvetica, sans-serif;    /* Default font for most content */
  font-size: 10.5pt;
  line-height: 15pt;
  text-align: left;
}

div.content h1 { 
  margin: 0px 0 0 0;
  padding: 0 0 0 12px;
  text-align: left;
  font-size: 13pt;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #6BD8EB;
}

img.logo {
  position: relative;
  margin: 0 3px -1px 0;
}

img.logo_sm { margin: 0 0 -2px 2px; }

/* Rules affecting most lists
***************************/
div.content ul {
  list-style-image: url('images/bullet.gif');
  text-align: left;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  margin: 0;
  /*font-size: .8em;*/
}

div.content ul li { 
  margin: 5px 0 0 0; 
  padding: 0; 
}


/* Customization of div.content for 'Eden Loves Michael' image
*************************************************************/
div#welcome {
  margin: 0 auto;
  margin-top: 35px;
}

/* Customization of div.content for text areas
*********************************************/
div#bg_text {
  width: 100%;
  height: 370px;
  background: #F2F2F2;
  padding: 12px 0 0 0;
  text-align: justify;
}

/* About Us page
***************/
div#aboutimage {
  float: left;
  width: 397px;
  height: 350px;
  margin: 0 12px 0 12px;
  background: url('images/about.jpg') no-repeat;
}

ul#navigation  ul#subnav {
  position: absolute;
  z-index: 100;      /* Keep subnav above other text and images */
  width: 150px;
  height: 75px;
  margin: 10px 0 0 0px;
  padding: 5px 0 0 5px;
  text-align: left;
  font-size: 8.5pt;
  text-transform: uppercase;
  line-height: 13pt;
  list-style-type: none;  
  border: solid 1px #5E5E5E;
  background: url('images/submenu_bg.png');
}

ul#subnav li { 
  top: 0px;
  width: 150px;
  margin: 0 0 0 5px;
}

ul#subnav li a:hover {
  color: #6BD8EB;  
  top: 0px;
  border: 0; 
}

/* Get Involved page
*******************/
div#involved_hands {
  float: left;
  width: 395px;
  height: 359px;
  margin: 0 12px 0 12px;
  background: url('images/hands.jpg');
}

ul#navigation ul#subnav2 {
  position: absolute;
  z-index: 100;      /* Keep subnav above other text and images */
  width: 150px;
  height: 25px;
  margin: 10px 0 0 0px;
  padding: 5px 0 0 5px;
  text-align: left;
  font-size: 8.5pt;
  text-transform: uppercase;
  line-height: 13pt;
  list-style-type: none;  
  border: solid 1px #5E5E5E;
  background: url('images/submenu_bg.png');
}

ul#subnav2 li { 
  top: 0;
  width: 150px;
  margin: 0 0 0 5px;
}

ul#subnav2 li a:hover {
  color: #6BD8EB;  
  top: 0px;
  border: 0; 
}

ol#involved {
  position: relative;
  top: 0px;
  left: 20px;
  margin: 0;
  padding: 0 0 0 0;
  width: 460px;
  float: left;
  text-align: left;
  font-size: 8.5pt;
  line-height: 11pt;
  font-family: Trebuchet MS, Helvetica, sans-serif;
}

ol#involved li { 
  list-style-type: none;
	margin: 10px 0 0 0; 

}

ol#involved li form { 
  margin: 0; 
  padding: 3px; }

ol#involved li:first-child strong { font-size: 9.5pt; }

ol#involved li:first-child + li + li { line-height: 13pt; }

ol#involved li span input {
  font-size: 8.5pt;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  color: #5E5E5E;
}

ol#involved li ul.sublist { 
  list-style-type: none; 
  list-style-image: none;
  width: 513px;
  text-align: left;
  font-size: 8.5pt;
}

ol#involved li ul.sublist li {
  text-align: left;
  margin-top: -3px;
  padding: 0;
  *padding: 0 0 0 30px;   /* Hack targets IE7 and below, fixes input indentation */
}

ol#involved li ul.sublist li:first-child { padding: 5px 0 0 0; }

span#email { 
  position: relative;
  top: 3px;
}

span#email input { 
  margin: 0 0 0 10px; 
  width: 211px;
  height: 13px;
  *width: 220px;
  *height: 19px;
  padding: 3px 3px 3px 6px;
  border: none;
  background-image: url('images/textinput_bg_sm1.gif');
}

span#zip input {
  margin: 3px 0 0 20px;
  width: 91px;
  height: 13px;
  *width: 100px;
  *height: 19px;
  padding: 3px 3px 3px 6px;
  border: none;
  background-image: url('images/textinput_bg_sm2.gif');
}

/* Button for contact us and get involved
****************************************/

input#submit, span#thanks input#submit {
  width: 75px; 
  height: 22px; 
  border-left: none;
  border-top: none;
  border-right:1px solid #99FFCC;
  border-bottom: 1px solid #99FFCC;
  margin: 5px 0 0 0;
  background: url('images/textinput_bg.gif');
  font-size: 8.5pt;
}

/* Contact Us page
*****************/
div.content p.contact {
  padding: 10px 0 0 12px;
  display: block;
  width: 513px;
  font-size: 8.5pt;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  line-height: 13pt;
}

div.content a {   
  color: #6BD8EB; 
  font-weight: bold; 
}

ul#contact { 
  font-size: 8.5pt; 
  margin: 15px 0 15px 0;
  *margin: 15px 0 15px 50px;   /* Hack targets IE7 and below */
}

ul#contact li { padding: 5px 0 0 0; }

div#contact_input {
  float: right;
  width: 300px;
  padding: 11px 45px 0 30px;
  text-align: left;
  font-size: 8.5pt;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  line-height: 13pt;
}

div#contact_input span { 
  width: 300px;
  color: #6BD8EB;  }

div#contact_input span input {
  width: 254px;
  height: 17px;
  *height: 23px;
  *width: 260px;
  border: 0;
  padding: 3px;
  font-size: 8.5pt;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  color: #5E5E5E;
  background: url('images/textinput_bg.gif');
}

div#contact_input span#name input  { margin: 5px 0 0 8px; } 
div#contact_input span#email input { margin-top: 5px; }

div#contact_input span#thanks {
  display: block;
  width: 307px;
  text-align: center;
}

div#contact_input span#message {
  display: block;
  margin: 20px 0 0 0;
  color: #6BD8EB; 
}

div#contact_input span#message textarea {
  float: left;
  border: 0;
  padding: 10px;
  resize: none; /* Safari supports this CSS2 Level 3 property */
  width: 307px;
  height: 149px;
  *width: 327px;
  *height: 170px;
  font-size: 8.5pt;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  color: #5E5E5E;
  overflow: hidden;   /* Hide scrollbar in IE */
  background: url('images/textarea_bg.gif');
}

/* Store Locations page
***********************/
ul.locations {
  height: 330px;
  display: block;
  float: left;
  margin: 0;
  padding: 0 0 0 12px;
  font-size: 8.5pt;
  font-family: Trebuchet MS, Helvetica, sans-serif;
  text-align: left;
  color: #5E5E5E;
}

ul.locations li { 
  list-style-type: none;
  list-style-image: none;
  line-height: 1.3em;
  display: block;
  width: 200px;
  height: 75px;
  margin: 0;
  padding: 0; 
}

div#location {
  float: right;
  margin: -20px 12px 0 0;
  width: 302px;
  height: 353px;
  background: url('images/location.jpg');
}

/* Mission page
**************/

ul#mission {
  list-style-position: outside;
  margin: 15px 0 5px 20px;
  font-size: 10.5pt; 
  line-height: 15pt;
}

ul#mission li {
  width: 850px;
  padding: 10px 0 0 0;
  _padding-left: 10px; /* Hack targets IE6 */
}

/* Second Chance page 
********************/

div.secondchance {
  width: 413px;
  height: 330px;
  float: left;
  margin: 0 12px 0 12px;
  background: url('images/2ndchance.jpg');
}

ul.secondchance {
  float: left;
  width: 430px;
  margin: 5px 0 0 0;
  padding: 25px 0 0 30px;
  font-size: 10.5pt;
  line-height: 15pt; 
}

ul.secondchance li { margin: 15px 0 0 0; }

/* Symbols of Hope page
**********************/

table#symbols {
  border: 0;
  margin: 10px 0 0 0;
  width: 900px;
  font-family: Trebuchet MS, Helvetica, sans-serif; 
  font-size: 10.5pt;
}

table#symbols tr td { padding: 6px; }

table#symbols img {
  display: block;
  float: left;
  padding: 0 25px 0 25px;
  height: 25px;
}

img#hope   { width: 91px; }
img#peace  { width: 96px; }
img#chance { width: 120px; }

/* Our Partners page
*******************/

div.partner {
  float: left;
  display: block;
  width: 550px;
  height: 61px;
  margin: 2px 0 0 12px;
  text-align: left;
}

div.partner a {
  display: block;
  float: left;
  font-size: 10.5pt;
  font-weight: bold;
}

div.partner a:hover      { text-decoration: none; }
div.partner a:hover span { text-decoration: underline; }

div.partner img {
  border: solid 2px #281305;
  width: 139px; 
  height: 48px;
  float: left;
  margin: 0 15px 0 0;
}

div#safeplace    a { color: #6BD8EB; }
div#lifebuilders a { color: #00A99D; }
div#lydia        a { color: #1B1464; }
div#primo        a { color: #8CC63F; }

div.partner a span { 
  font-weight: normal;
  color: #5E5E5E;
}


/* The Facts page 
****************/

div.content p.facts {
  margin: 10px 20px 0 0;
  padding: 0;
  font-size: 8.5pt;
  line-height: 11pt;
}

h2 { 
  margin: 10px 0 0 0;
  padding: 0;
  text-align: left;
  font-size: 8.5pt;
  color: #6BD8EB;
}

ul#facts {
  height: 100px;
  display: block;
  list-style-type: none;
  list-style-image: none;
  text-align: left;
  font-size: 8.5pt;
}

ul#facts li {
  margin: 8px 0 0 0;
}

/* Michael's Story page
**********************/
div#story {
	width: 950px;
	height: 500px;
	position: relative;
	left: 5px;
	margin: 33px 0 46px 0;
}


/* Michael's Jewelry page
************************/
div#jewelry {
	width: 950px;
	height: 525px;
	position: relative;
	left: 5px;
	margin: 20px 0 34px 0;
	background: url('images/jewelry_bg.jpg');
}

div#jewelry > a {
  background-color: white;
  display: block;
}

div#jewelry > a {
  display: block;
  position: absolute; 
}

/*div#jewelry a:hover {
  margin: 0;
  z-index: 10;
}*/

div.mouseover {  
  display: none;
  position: relative;
  color: #6BD8EB; 
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 10.5pt;  
  text-align: left;
}

/*
div.mouseover > h1 {
  position: relative;
  left: 10px;
  font-weight: inherit;
  font-size: inherit;
}

div.mouseover > p {
  color: white;
  font-size: 8.5pt;
  padding: 0 10px 0 10px;
}

div.mouseover > a {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 10px 5px 0;
}

div#jewelry > a:hover + div.mouseover { 
  display: block;
  z-index: 10;
  background: url('images/mouseover_bg.png');
}*/

#j1 {
  top: 26px;
  left: 11px;
  width: 297px;
  height: 304px;
  background: url('images/jewelry/img1.png') no-repeat;
  background-position: top center; 
}

/*#j1:hover { width: 212px; }

#j1:hover + div.mouseover { 
  top: 25px;
  left: 223px;
  width: 157px; 
  height: 306px;
}*/

#j2 {
  top: 26px;
  left: 312px;
  width: 293px;
  height: 165px;
  background: url('images/jewelry/img2.png') no-repeat;
  background-position: top center; 
}

/*#j2:hover { 
  width: 224px; 
  height: 304px;
}

#j2:hover + div.mouseover { 
  top: 25px;
  left: 536px;
  width: 150px; 
  height: 305px;
  border-bottom: solid 3px #281305;
}*/

#j3 {
  top: 26px;
  left: 609px;
  width: 334px;
  height: 165px;
  background: url('images/jewelry/img3.png') no-repeat;
  background-position: center; 
}

/*#j3:hover {  
  width: 190px; 
  height: 252px; 
  border-bottom: solid 3px #281305;
}

#j3:hover + div.mouseover { 
  top: 25px;
  left: 799px;
  width: 145px; 
  height: 253px;
  border-bottom: solid 3px #281305;
}*/

#j4 {
  top: 195px;
  left: 312px;
  width: 293px;
  height: 135px;
  background: url('images/jewelry/img4.png') no-repeat;
  background-position: center; 
}

/*#j4:hover { 
  width: 203px;
  height: 313px;
}

#j4:hover + div.mouseover, #j8:hover + div.mouseover  { 
  top: 194px;
  left: 515px;
  width: 154px; 
  height: 315px;
}*/

#j5 {
  top: 194px;
  left: 609px;
  width: 334px;
  height: 314px;
  background: url('images/jewelry/img5.png') no-repeat;
  background-position: top center; 
}

/*#j5:hover { 
  left: 525px;
  width: 268px; 
  border-left: solid 3px #281305;
}

#j5:hover + div.mouseover {
  top: 194px;
  left: 797px;
  width: 147px;
  height: 315px;
}*/

#j6 {
  top: 333px;
  left: 11px;
  width: 148px;
  height: 176px;
  background: url('images/jewelry/img6.png') no-repeat;
  background-position: center; 
}

/*#j6:hover { width: 230px; }

#j6:hover + div.mouseover {
  top: 333px;
  left: 241px;
  width: 157px;
  height: 176px;
}*/

#j7 {
  top: 333px;
  left: 163px;
  width: 145px;
  height: 176px;
  background: url('images/jewelry/img7.png') no-repeat;
  background-position: center; 
}

/*#j7:hover { width: 230px; }

#j7:hover + div.mouseover {
  top: 333px;
  left: 393px;
  width: 155px;
  height: 176px;
}*/

#j8 {
  top: 333px;
  left: 312px;
  width: 293px;
  height: 174px;
  background: url('images/jewelry/img8.png') no-repeat;
  background-position: center; 
}

/*#j8:hover { 
  top: 195px;
  width: 203px;
  height: 313px;
}*/


/* Customize, work within, or replace this div for Jewelry and Story page
************************************************************************/
div#placeholder {
	width: 950px;
	height: 500px;
	position: relative;
	left: 5px;
	top: 20px;
}


/* div#bottom_images lives inside of the #main
   wrapper, between actual div.content and footer
************************************************/
div#bottom_images {
  width: 944px;
  height: 132px;
  margin: 0 auto;
  margin-top: 14px;
  padding-top: 7px;
  background: #281305; 
}

div#bottom_images img {
  float: left;
  height: 124px;
  margin-left: 7px;
  background: white;
}

div#bottom_images img#signature { width: 476px; }
div#bottom_images img#necklace  { width: 220px; }
div#bottom_images img#earings   { width: 220px; }


/* Rules for footer
******************/
ul#footer {
  width: 970px;
  margin: 10px 0 0 -85px;
  text-align: left;
  list-style-type: none;
  position: relative;
}

ul#footer li {
  display: block;
  float: right;
  margin: 0 30px 0 30px;
  color: #808080; 
  font-size: 8.5pt;
  font-weight: bold;
  text-transform: uppercase;
}

ul#footer li a { color: #5E5E5E; }

ul#footer li a:hover {
  color: #6BD8EB;
  text-decoration: none; 
}