/* *********************************************************************
   Source:       mthp.css
   
   Description:  This the stylesheet for http://www.betsypreston.com/mthp 
   
   Date Written: 7 January 2007    Last Update: 20 January 2007
	
   ********************************************************************* */


/* --------------------------------------------------------------------
   Body
   -------------------------------------------------------------------- */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  font-size: small;
  background: #ffffff;
}

a:link, a:active, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}



/* --------------------------------------------------------------------
   Layout Structure	
   -------------------------------------------------------------------- */
#wrap {
  min-width: 700px;
  max-width: 1400px;
  background: url(images/wrap-bg.gif) repeat-y 70% 0;
}

#content {
  float: left;
  width: 70%;
  font-size: 95%;
  line-height: 1.5em;
  color: #333333;
}

#sidebar {
  float: right;
  width: 30%;
}

#footer {
  clear: both;
  background: #828377;
}


/* --------------------------------------------------------------------
   Header	
   -------------------------------------------------------------------- */
#header {
  border-bottom: 3px solid #000000;
  text-align: left;
  background: #333300 url(images/header-bg.gif) repeat-x top left;
}

#header h1 {
  margin: 0;
  padding: 15px;
  font-family: Georgia, serif;
  font-size: 400%;
  letter-spacing: 20px;
  color: #ff9900;
}

#header img {
  vertical-align: bottom;
}


/* --------------------------------------------------------------------
   Message Row	
   -------------------------------------------------------------------- */  
#message {
  margin: 0;
  padding: 10px;
  font-size: 90%;
  color: #ff9900;
  text-align: center;
  background: #606033 url(images/message-bg.gif) repeat-x top left;
}

#message strong {
  text-transform: uppercase;
}

#message a {
  margin: 0;
  color: #ff9900;
  font-weight: bold;
}

#message img {
  border:none;
}


/* --------------------------------------------------------------------
   Gutters
   -------------------------------------------------------------------- */  
#content .gutter {
  margin-right: 4px;
  padding: 25px;
  background: url(images/content-bg.gif) repeat-x top left;
}

#sidebar .gutter {
  padding: 15px;
}



/* --------------------------------------------------------------------
   Content
   -------------------------------------------------------------------- */  
#content h2 {
  margin: 0 0 1em 0;
  padding: 0;
  font-family: Georgia, serif;
  font-size: 150%;
  font-weight: normal;
  color: #666633;
}

#content a {
  color: #333333;
  font-weight: bold;
}

dl.contentMain {
  margin: 15px 0;
  padding: 5px;
}

dl.contentMain dt img {
  float: left;
  margin: 0 15px 0 0;
  padding: 0 4px 4px 0;
  background: url(images/photo-frame-br.gif) no-repeat bottom right;
}

dl.contentMain dd {
  margin-left: 375px;
}

#content dt {
  font-weight: bold;
  color: #666633;
}

#content dd.answer {
  margin-bottom: 5px;
}

#content dd.question span,
#content dd.answer span {
  color: #666633;
}

#picList {
  float: left;
  width: 500px;
  padding: 10px 0;
}

#picList dl {
 float: left;
 margin: 10px 10px;
 padding: 0;
}

#picList dt {
  float: right;
  margin: 20px 0 0 0;
  padding: 0;
  font-size: 130%;
}

#picList dd {
 margin: 0;
 padding: 0; 
}

#picList dd img {
  float: left;
}


/* --------------------------------------------------------------------
   Sidebars
   -------------------------------------------------------------------- */  
.box {
  margin: 0 0 20px 0;
  padding: 0 0 12px 0;
  font-size: 85%;
  line-height: 1.5em;
  color: #666666;
  background: #ffffff url(images/box-corner-br.gif) no-repeat bottom right;
}

.box h3 {
  margin: 0;
  padding: 12px;
  font-family: Georgia, serif;
  font-size: 140%;
  font-weight: normal;
  color: #666633;
  background: url(images/box-corner-tl.gif) no-repeat top left;
}

.box p {
  margin: 0;
  padding: 0 12px;
}

.box a {
  color: #666666;
  font-weight: bold;
}


/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */  
/* Start hide hack from IE5/Mac \*/
* html #footer {height: 1%;}
/* End hide hack from IE5/Mac */

#footer p {
  margin: 0;
  padding: 10px;
  font-size: 85%;
  color: #333333;
  border-top: 2px solid #191919;
  border-bottom: 2px solid #191919;
}


/* --------------------------------------------------------------------
   HTML Form
   -------------------------------------------------------------------- */ 
/* Generic style for all forms */
form {
  height:auto;
  padding:0px;
  margin:0px;
} 

/* Do not display form field, used mostly to hide the legends. */
.hidden {
  display:none;
}

.errors {
  color: red;
}

/* fieldset style for forms */
fieldset {
  border: 0 solid #ffffff;
  padding: 0px 0px 5px 5px;
  height: auto;
}

/* kla kla kla */
label.todo {
  position:relative;
  left:25px;
  display:block;
  top:-17px;
  width:520px;
  height:20px;
}

.submit {
  margin: 1em 0px 1em 0px;
}

input.textinput {
  display: block;
  margin-top:3px;
  width:400px;
  font-size:1.0em;
}

.labelrightoption {
  padding: 5px 5px 0px 0px;
}


/* --------------------------------------------------------------------
   Picture List
   -------------------------------------------------------------------- */  
#picList {
  font-family: Helvetica, sans-serif;
  font-size: small;
  width: 370px;
}

#picList dl {
 float: left;
 display: block;
 margin: 5px 10px;
 padding: 0;
 height: 200px;
}

#picList dt {
  margin: 0;
  padding: 0;
  font-size: 130%;
}

#picList dd {
 margin: 0;
 padding: 0; 
}

#picList img {
  border: none;
}