/* template styles */
body { text-align: center; padding:0px; width:90%; margin-left:auto; margin-right:auto;  float: center;}

#container { height:100%; width:100%; margin-left: auto; margin-right: auto; position:relative; max-width:800px; float: center;}

#header {  background-color:#FFFFE5; top:0; float: center;margin-left:auto; margin-right:auto; border-top: #000000 thin solid; border-left: #000000 thin solid;border-right: #000000 thin solid; border-bottom: #000000 thin solid;height:70px; background-image:url(images/header.jpg); background-repeat: no-repeat; width: 100%; }/*84px*/

#content { background-color:#FFFFE5; float: center; width: 100%; text-align: left; top:100px; BORDER-LEFT: #000000 thin solid; BORDER-RIGHT: #000000 thin solid; font-family: Georgia, "Times New Roman", Times, serif; font-size: 15px; }

.rightnav { 
background-image:url(images/rightnav.jpg); background-repeat: no-repeat; background-position:top right;
float:right; 
border: thin solid black; 
width: 235px; 
margin-top:12px; margin-bottom:15px; margin-left:10px; margin-right:5px; 
padding-left:10px;padding-bottom:10px;padding-top:10px;padding-right:10px; 
font-size:13px; 
box-shadow:5px 5px 5px #bdbcbc; 
clear: right; 
} 

.rightnav2 { 
background-color:#FFFFE5;
float:right; 
border: thin solid black; 
width: 235px; 
margin-top:12px; margin-bottom:15px; margin-left:10px; margin-right:5px; 
padding-left:10px;padding-bottom:10px;padding-top:10px;padding-right:10px; 
font-size:13px; 
box-shadow:5px 5px 5px #bdbcbc; 
clear: right; 
} 


/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) 
{
    body, .container, .content { width: 100%; }
   .rightnav { float:none; }
   .rightnav2 { float:none; }
}

.section_header_img { max-width:100%; height:auto; margin-top:30px; margin-bottom:15px; }

.header_txt { font-size: 18px; text-align: center; padding-top:25px; padding-bottom:25px; }
.header_div { text-align:center; }
.header_img { max-width:100%; height:auto; border: solid black 1px; margin-bottom:5px; }

.subheader_txt { background-color: black; color:white; padding:5px; font-size: 18px; margin-bottom:20px; margin-left:0px; margin-right:0px; margin-top:35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}
.subheader_txt a { font-size:15px; } /* link in subheading bar */

.bar_div { text-align:center; padding-bottom:25px; padding-top:25px; }
.bar_img { max-width:100%; height:auto; }

.topnav { background-color: black; overflow: hidden; width: 100%; BORDER-LEFT: #000000 thin solid; BORDER-RIGHT: #000000 thin solid; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; }
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 7px 7px; text-decoration: none; margin-right:1px; }
.topnav a:hover { background-color: #FFFFE5; color: black; }
.topnav_active { background-color: #FFFFE5; color: black; } /* Add an active class to highlight the current page */
.topnav .icon { display: none; } /* Hide the link that should open and close the topnav on small screens */

/* if screen < 600 pixels wide, hide all links except home link/show link which opens topnav */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon { float: right; display: block; }
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon { position: absolute; right: 0; top: 0; }
  .topnav.responsive a { float: none; display: block; text-align: left; }
} 


#footer { clear:both; background-color:#FFFFE5;  width: 100%; text-align: left; top:0;  BORDER-LEFT: #000000 thin solid; BORDER-RIGHT: #000000 thin solid; border-bottom: #000000 thin solid; border-top: #000000 thin solid; height:75px; background-image:url(images/footer_txt.jpg); background-repeat:no-repeat; }
.footer_text { padding:10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 11px; color:#000000; }
.footer_text a { color: #000000; }
.footer_text a:hover { text-decoration:none; }


.imgGallery { float: center;margin-left:auto; margin-right:auto; width: 100%; text-align:center; }
.galleryItem { min-width: 120px; margin: 5px; display: inline-block; color: #fff; }
.galleryItem img { max-width: 100%; border: solid black 1px; }
.galleryItem img:hover { opacity: 0.6; filter: alpha(opacity=60);}
.galleryItem p { color:black; margin-top:5px;margin-bottom:5px;}


.textblock { padding-left:25px; padding-right:25px; padding-bottom:25px; color: black; }
.textblock p { padding-bottom:5px; }

.linksblock { text-align:center; width:100%; font-size: 17px; padding-bottom:25px; }


/* modal */
.modal { display:none; position:fixed; top:1px; bottom:1px; left:1px; right:1px; z-index: 1; }
.modalhead { width:100%; height:3em; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9) }
.modalcontent { position:absolute; top:3em; bottom:150px; width:100%; background-size:contain; background-repeat:no-repeat; background-position:center; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); }
.modalfooter { position:absolute; bottom:0; width:100%; padding-top:10px; height:140px; overflow:auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); color: white; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; text-align:center; }
.modalcaption { margin-left:50px; margin-right:50px; }
.modalexpand { position: absolute;top: 15px;left: 35px;color: #f1f1f1; font-size: 20px; font-weight: bold; }
.modalexpand a { color: #f1f1f1; font-weight: bold; text-decoration: none; }
.modalexpand a:hover { color:#bbb; text-decoration:none; text-decoration: none; }
.modalclose { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 20px; font-weight: bold; }
.modalclose:hover { color: #bbb; text-decoration: none; cursor:pointer; }

/* 100% Image Width on Smaller Screens */
/*@media only screen and (max-width: 700px){ .modal-content { width: 100%; } }*/

#soulmates_body { background-color:#ACA0D2; background-image:url(images/bg_soul.jpg); background-repeat:repeat-x; }
.soulmates_links a { color: #655d7c; }
.soulmates_links a:hover { color:#ACA0D2; text-decoration:none; }
.soulmates_quotes { padding-left:20px;padding-right:20px;padding-top:15px; padding-bottom:2px; font-size:13px; background-color:#eae5fb; margin-bottom:20px; box-shadow:5px 5px 5px #bdbcbc; }

#pigs_body { background-color:#9a9f77; background-image:url(images/bg_pigs.jpg); background-repeat:repeat-x; }
.pigs_links a { color:#707456; }
.pigs_links a:hover { color:#9a9f77; text-decoration:none;}

#music_body { background-color:#277A5E; background-image:url(images/bg_music.jpg); background-repeat:repeat-x; }
.music_links a { color:#1f5f49; }
.music_links a:hover { color:#42c496; text-decoration:none;}

#rennfest_body { background-color:#4f5e46; background-image:url(images/bg_rennfest.jpg); background-repeat:repeat-x; }
.rennfest_links a { color:#384334; }
.rennfest_links a:hover { color:#9dbb8b; text-decoration:none; }

#anime_body { background-color:#865C68; background-image:url(images/bg_anime.jpg); background-repeat:repeat-x; }
.anime_links a { color:#875e6a; }
.anime_links a:hover { color:#ad8792; text-decoration:none; }

#tv_body { background-color:#6C4232; background-image:url(images/bg_tv.jpg); background-repeat:repeat-x; }
.tv_links a { color: #c79564; }
.tv_links a:hover { color:#e1a972; text-decoration:none; }

#dolls_body { background-color:#6e7fba; background-image:url(images/bg_dolls.jpg); background-repeat:repeat-x; }
.dolls_links a { color:#4b5780; }
.dolls_links a:hover { color:#7688c6; text-decoration:none;}
.dolls_quotes { padding-left:20px;padding-right:20px;padding-top:15px; padding-bottom:2px; font-size:13px; background-color:#e8edfe; margin-bottom:20px; box-shadow:5px 5px 5px #bdbcbc; }

#montages_body { background-color:#c26161; background-image:url(images/bg_montages.jpg); background-repeat:repeat-x; }
.montages_links a { color:#c26c6c; }
.montages_links a:hover { color:#e17e7e; text-decoration:none;}

#auto_body { background-color:#444D84; background-image:url(images/bg_auto.jpg); background-repeat:repeat-x; }
.auto_links a { color:#39406e; }
.auto_links a:hover { color:#6572c0; text-decoration:none;}

#main_body { background-color:#296275; background-image:url(images/bg_main.jpg); background-repeat:repeat-x; }  
.main_headerimage { position: relative; top: -45px; text-align:right; right:-45px; }
.main_links a { color:#296275; }
.main_links a:hover { color:#66FFFF; text-decoration:none; }

/*.main_tbl { border: 1px solid #ccc; border-collapse: collapse; margin-left: 0; margin-right: 0; margin-top: 12px; margin-bottom: 20px; padding: 0; box-shadow:5px 5px 5px #bdbcbc; }
.main_tbl tr { border: 1px solid #ccc; padding: .35em; }*/
/*.main_tbl td:first-child { width: 35%; text-align:center;}*/ /* left col */

.main_tbl {  margin-left: 0; margin-right: 0; margin-top: 12px; margin-bottom: 20px; padding: 0; }
.main_tbl tr { padding: .35em; }
.main_tbl td { padding-left:0px;padding-right:25px;padding-top:4px;padding-bottom:4px;text-align: left; font-size:13px; }

@media screen and (max-width: 600px) {
  .main_tbl { border: 0; box-shadow:none; }
  .main_tbl tr { border-bottom: 2px solid #ddd; display: block; margin-bottom: .625em; }
  .main_tbl td { display: block; font-size: 13px; text-align: left; }
  .main_tbl td:last-child { border-bottom: 0; }
}

/*.main_rightnav { background-image:url(images/rightnav.jpg); background-repeat: no-repeat; background-position:top right;
float:right; border: thin solid black; width: 235px; margin-top:12px; margin-bottom:15px; margin-left:20px; margin-right:5px; padding-left:10px;padding-bottom:10px;padding-top:10px;padding-right:0px; font-size:13px; box-shadow:5px 5px 5px #bdbcbc; clear: right; } 
.main_rightnav2 { background-color:#FFFFE5; float:right; border: thin solid black; width: 235px; margin-top:12px; margin-bottom:15px; margin-left:20px; margin-right:5px; padding-left:10px;padding-bottom:10px;padding-top:10px;padding-right:0px; font-size:13px; box-shadow:5px 5px 5px #bdbcbc; clear: right; }*/

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) 
{
   .main_rightnav { float:none; margin-left:10px; }
   .main_rightnav2 { float:none; margin-left:10px;}
}


.list_moments { list-style-type: square; }
.list_moments li { padding: 2px; }


/* table with info and images */
.tbl_list { border: 1px solid #ccc; border-collapse: collapse; margin-left: 0; margin-right: 0; margin-top: 10; margin-bottom: 20px; padding: 0; width: 100%; box-shadow:5px 5px 5px #bdbcbc; 
}
.tbl_list tr { border: 1px solid #ddd; padding: .35em; }
.tbl_list td { padding-left:0px;padding-right:25px;padding-top:4px;padding-bottom:4px;text-align: left; font-size:13px; }
.tbl_list_img { border: solid black 1px; } /*margin-left:5px;*/
.tbl_list_img:hover { opacity: 0.6; filter: alpha(opacity=60);}
.tbl_list td:first-child { width: 27%; text-align:center;} /* left col */
.tbl_list_img_nolink { margin-left:5px; border: solid black 1px; }

@media screen and (max-width: 600px) {
  .tbl_list { border: 0; box-shadow:none; }
  .tbl_list tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; }
  .tbl_list td { display: block; font-size: 13px; text-align: left; }
  .tbl_list td:last-child { border-bottom: 0; }
}


/* favorites table */
.tbl_fav { border: 1px solid #ccc; border-collapse: collapse; margin-left: 0; margin-right: 0; margin-top: 10; margin-bottom: 20px; padding: 0; width: 100%; box-shadow:5px 5px 5px #bdbcbc; /*table-layout: fixed;*/ }
.tbl_fav tr { border: 1px solid #ddd; padding: .35em; }
.tbl_fav th, .tbl_fav td { padding-left:4px;padding-right:25px;padding-top:4px;padding-bottom:4px;text-align: left; font-size:13px; }
.tbl_fav th { font-weight:bold; }

.tbl_fav tbody td:first-child { font-weight:bold; width: 24%; } /* left col */
.tbl_fav tbody td:nth-child(2) { width: 38% } /* middle col */
.tbl_fav tbody td:nth-child(3) { width: 38% } /* right col */


@media screen and (max-width: 600px) {
  .tbl_fav { border: 0; box-shadow:none;}
  .tbl_fav thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* hide table head */
  .tbl_fav tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; }
  .tbl_fav td { border-bottom: 1px solid #ddd; display: block; font-size: 13px; text-align: left; }
  .tbl_fav td:before { content: attr(data-label); float: left; font-weight: bold; padding-right:22px; width:20%; }
  .tbl_fav td:last-child { border-bottom: 0; }
  
  .tbl_fav tbody td:first-child { font-weight:bold; width: auto;} /* left col */
  .tbl_fav tbody td:nth-child(2) { width: auto; } /* middle col */
  .tbl_fav tbody td:nth-child(3) { width: auto; } /* right col */ 
}


.tbl_auto { border: 1px solid #ccc; border-collapse: collapse; margin-left: 0; margin-right: 0; margin-top: 10; margin-bottom: 20px; padding: 0; width: 100%; /*table-layout: fixed;*/ box-shadow:5px 5px 5px #bdbcbc;}
.tbl_auto tr { border: 1px solid #ddd; padding: .35em; }
.tbl_auto td { padding-left:4px;padding-right:25px;padding-top:4px;padding-bottom:4px;text-align: left; font-size:13px; }
.tbl_auto th { font-weight:bold;  font-size:13px;}

.tbl_auto td:first-child { width: 45%; } /* left col */
.tbl_auto td:nth-child(2) { width: 25% } /* middle col */
.tbl_auto td:nth-child(3) { width: 30% } /* right col */

/* hide two right cols */
@media screen and (max-width: 600px) {
.tbl_auto td:first-child { width: 100%; } /* left col */
.tbl_auto td:nth-child(2) { display:none; } /* middle col */
.tbl_auto td:nth-child(3) { display:none; } /* right col */

.tbl_auto th:first-child { width: 100%; } /* left col */
.tbl_auto th:nth-child(2) { display:none; } /* middle col */
.tbl_auto th:nth-child(3) { display:none; } /* middle col */
}