@charset "utf-8";

/*Comment elements*/

body,th { font: 100%/1.2em Geneva, Arial, Helvetica, sans-serif; background-color: #336699; padding-bottom: 8%;}
a,p {color: #3A3629;}
p {padding: .5em 0em .5em 0em; }
h1 {font-size: 150%; padding: .5em .5em .5em 0em;}
h2 {font-size: 130%; padding: .5em .5em 1em 0em; }
h3 {font-size: 110%; padding: .5em .5em .5em 0em; }
em {zoom: 100%; overflow: hidden;}

.title {font-size:150%}
#outer_container {margin: 1% 10% 3% 10%; }


/*menu*/

#menubar2 {padding: 5px 10px 10px 10px; border: 1px solid #484F3c; color: #000; font-size: 80%; margin: 3% 10% 1% 10%; height: 2em;}
#menubar2 ul li {display: inline;}
#menubar2 a {float: left; display: in-line; color:#000; text-decoration:none; margin: 2px; padding: 4px 8px 4px 8px; border: 1px solid #9B8A5E;}
#menubar2 a:hover {background: #423E2F; color:#EEE;}
#menubar2 li.active a {background-color: #423E2F; color: #EEE;}


/*greeting*/

#greeting a {color: #EEE;}
#welcome { padding: 0px 10px 0px 10px; margin-left: 10%; color: #EEE; }
#welcome a:visited {color: #EEE;}
#login {padding: 0px 15px 0px 15px; border: 1px solid #484F3c;  margin: 3% 0%; }

/*heading*/

#heading {color: #3A3629; font-size: 140%; padding: 10px 10px 0px 10px; border-top: 1px solid #484F3c; border-right: 1px solid #484F3c; border-left: 1px solid #484F3c;}
.content { padding: 15px ; border: 1px solid #484F3c; margin-bottom: 3%;}


/*content call-out boxes & images*/

.imgleft {padding: 10px 10px 10px 0px; float: left; text-align: center}
.imgright {padding: 10px 0px 10px 10px; float: right; text-align: center}
.textleft { font-style: oblique; padding: 10px 10px 10px 10px; width: 30%; float: left; font-size: 90%; background: #e7dca0; color: #3A3629; margin-right: 10px; border: 1px solid #3A3629;}
.textright { font-style: oblique; padding: 10px 10px 10px 10px; width: 30%; float: right; font-size: 90%; background: #e7dca0; color: #3A3629; margin-right: 10px; border: 1px solid #3A3629;}
.captionlef {clear: both; float: left; padding: 0px 10px 10px 10px;}
.imagecenter {display: block; margin:0 auto;}

/*family list*/

#index { padding: 10px 10px 10px 10px; }
#index ul {width: 10em; }
#index li {list-style-type: none; }
#index a {display: block; width: 10em; text-decoration: none; padding: 4px; border: 1px solid #9B8A5E; margin: 2px; }

#index a:hover {background: #423E2F; color:#EEE;}
#index li.active a {background-color: #423E2F; color: #EEE;}

#familylist {width: 90%; margin: auto; height: 29em;}
#parents    {float: left; margin-top: 1.25em; width: 10em;}
#childlist  {float: left; margin-top: 1.25em; margin-left: 5%; width: 10em;}
#childlist2 {float: left; margin-top: 1.25em; margin-left: 5%; width: 10em;}
#childlist3 {float: left; margin-top: 1.25em; margin-left: 5%; width: 10em;}

/******* slide show **************/
#myGallery15 {float: right}
slideElement a {text-decoration: none;}

/*Moderation*/
#moderate {padding-top: 10px;}
#moderate a:hover {background: #423E2F; color: #EEE;}

/*Login & Signup*/

#login {padding: 0px 25px 25px 25px; }
#login ul li {display: inline;}
#login a {display: in-line; background: #423E2F; color:#EEE; height: 15px; text-decoration:none; margin: 5px 2px; padding: 4px 8px 4px 8px; border: 1px solid #9B8A5E;}
#login a:hover {text-decoration: underline;}
#login td {padding: 2px;}

.subscribe a{display: block;color: #3A3629; line-height: 2em; text-decoration: none; list-style-position: inside; border: 1px solid #3A3629;}
.subscribe a:hover {display: block; line-height: 2em; background: #423E2F; color: #EEE; list-style-position: inside;}

#signup {padding: 0px 25px 25px 25px; border: 1px solid #484F3c; background: url(http://www.terrybarthdesign.com/JohnD/assets/images/tilebeige6.gif) repeat; margin: 3% 0%; }
td {background: url(http://www.terrybarthdesign.com/JohnD/assets/images/tilebeige6.gif) repeat; vertical-align: top;}

.errors {border: 3px solid #336699}

#footer, #footer a {text-align: center; font-size: 80%; color: #E0DFE3;}
#footer a {font-size: 100%}
#footer a:hover {color: #fff;}