@charset "utf-8";

/*Comment elements*/

body,th { font: 23px 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% 3% 3% 3%; }

#heading,
#menubar2,
.content {color: #3A3629; background: url(../images/tilebeige6.gif) repeat;}

/*menu*/

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

/*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: 30px 5%; border-top: 1px solid #484F3c; border-right: 1px solid #484F3c; border-left: 1px solid #484F3c;}
.content { padding: 20px 5% ; 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: 100%; }
#index li {width: 275px; list-style-type: none; display: inline-block; margin: 0  0 5px;}
#index a {text-align: left;  text-decoration: none; padding: 8px; border: 1px solid #9B8A5E; display: inline-block;
    font-size: 90%;}

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


#photo-index { padding: 10px 10px 10px 10px; }
#photo-index ul {width: 100%; text-align: center; }
#photo-index li {width: 275px; list-style-type: none; display: inline-block; margin: 0  10px 20px;}
#photo-index a {text-align: left;  text-decoration: none; padding: 8px; border: 1px solid #9B8A5E; display: inline-block; }


#familylist {width: 100%; margin: auto; }
#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;}

.photo-gallery a {text-decoration: none;  display: inline-block; margin: 10px;}
.photo-gallery a img {max-height: 100px;
    box-shadow: 10px 10px 9px 0px rgba(0,0,0,0.31);
-webkit-box-shadow: 10px 10px 9px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 10px 10px 9px 0px rgba(0,0,0,0.31);
}


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

/*** Cycle2 Slideshow ***/

/*** set border-box so that percents can be used for width, padding, etc (personal preference) */
	.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
	box-sizing: border-box; }

	.cycle-slideshow { min-width: 200px; max-width: 1020px;  margin: 10px auto 0; padding: 0;
	position: relative; border-bottom: 0px solid #606fab; height: 500px;} 
	
	.cycle-slideshow img {z-index: -100; position:  max-width: 640px;   padding: 0; 
	display: none;}
	.cycle-slideshow img:first-child { position: static; z-index: 100; display: block;
    }

	.cycle-slide {position: relative; }

/*** pager ***/
	.cycle-pager { margin-top: 0px; text-align: center; width: 100%; z-index: 1500; position: relative; bottom: 50px; overflow: hidden; }
	.cycle-pager span { font-size: 0; width: 11px; height: 11px; margin:0 3px; display: inline-block; cursor: pointer; border: 1px solid #000;
	background-color: #ddd; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px }
	.cycle-pager span.cycle-pager-active { background-color:  #000;; }
	.cycle-pager > * { cursor: pointer; }

/*** caption ***/
	.captions { text-align: center; width: 100%; }
	.cycle-slide img {}
	.cycle-slide a { display: block; padding: 30px 0px 3px 10px; clear: right;
	text-decoration: none; text-align: right; color: #3A3629; text-transform: uppercase; font-size: 90%; line-height: 1;
	font-weight: 300; z-index: 2000;}

	.cycle-slide .line1 {color: #3A3629; margin-top: 1em; font-weight: 400; font-size: 1.35em;}


/*** Forms ***/

/*** forms ***/	
	form,
	fieldset {border:0; padding:0; margin:0; }

	form,
	#form_container,
	form div {display: block; width: 100%; clear: both; padding:0; margin:0; border:0; }
form div label {display: none; /*  width: 10%; min-width: 10%; background-color: transparent; margin-right: 10px; */}
form div input {width: 80%; border: 0;}

	input:focus, textarea:focus, select:focus {border:1px solid #222; outline: none; }	
	input, select, textarea, label  {background:#fff; font:1em/1.214em Arial, Helvetica, sans-serif; 
		color:#444; resize:none; float: left; display: block; }
	input, select, textarea { padding:0.75em 1.5em; margin-bottom: 1em;  }
	textarea {overflow:auto; height:10.812em; }

	::-webkit-input-placeholder { color: #444; }
	:-moz-placeholder {color:    #444; }

	.error {color: #E41124; padding: 0; margin: .5em 0 -3em;}
	#workemail {position: absolute; left: -10000px;}
/*
	.radio label,
	.checkboxes label   {float: left;}
	#radio-container,
	#checkbox-container {float: left; clear: none; }
	.radio-button,
	.checkbox           {width: 150px;  float: left; display: inline-block; clear: none;}
	.checkbox span      {margin-top: 3px; display: inline-block;}
*/
	.form-buttons {width: 200px; border: 1px solid #3A362;}
	.form-buttons input {background-color: transparent; margin-left: 0; border: 1px solid #3A3629;}
	.form-buttons input:hover {color: #fff;}

	input[type=submit]:hover {cursor: pointer; background-color: #3A3629; color: #fff;}

/*** Comment this out for location fields to be on separate rows ***
	form label,
	form div label { width: 10%; min-width: 80px; float: left; text-align: right; padding-right: 5px;}

	form div input,
	form div select,
	form #radio-container,
	form #checkbox-container,
	form div textarea {width: 88%; float: left; margin-bottom: 1em;}
	    
	form #city, 
	form #state {clear: none; float: left;  margin-right: 0;  width: 30%; min-width: 230px;}
    form #zip   {clear: none; float: right; margin-right: 2%; width: 20%; min-width: 139px; 
	text-align: right;}

	form #state label {min-width: 80px;}
	form #zip   label  {min-width: 40px;}
	
	form #location > input  {width: 150px;}
	form #zip   input  {width: 95px; }
	form #state select {width: 150px;}	

	form #zip label,
	form #zip input {float: none; display: inline-block; }	

	/*** Custom Checkbox ***/
	.form input[type="radio"],
	.form input[type="checkbox"] {width: 30px; display: inline-block; border: 0; padding: 0; clear: left; } 
  #form_container .radio-container label,
	#form_container .checkbox-container label {display: inline; margin: 5px 10px 0 0;}
	#form_container .checkbox {margin-bottom: 1em;}
	
  #form_container .radio-button input, 
	#form_container .checkbox input {display: none;}
  #form_container .radio-button input + label,
	#form_container .checkbox input + label {padding: 5px; width: 24px; min-width: 0; border-radius: 0px; 
		display: inline-block; position: relative; border: 1px solid #aaa; margin-right: 1em;}
  #form_container .radio-container .radio + label,
	#form_container .checkbox-container .checkbox + label {width: 24px!important;}
  
	/* style checkboxes */	
	#form_container .checkbox span           {line-height: 20px;} 
	#form_container .checkbox  input + label {padding: 10px; }
	#form_container .checkbox  input:checked + label:after {content: '\2714'; font-size: 18px; position: absolute; top: 3px; 
    left: 5px; color: #aaa;}

	/* style radio buttons */	
	#form_container .radio-button span           {line-height: 20px;} 
	#form_container .radio-button  input + label {padding: 10px; border-radius: 50%; width: 20px;}
	#form_container .radio-button  input:checked + label:after {content: '\2B24'; font-size: 18px; 
		position: absolute; top: 2px; left: 2px; color: #aaa;}
	
	

/*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;}

.clearfix:after {  clear: both;  height: 0;  display: block;  visibility: hidden;  content: ".";  }