/*
Description: This design was custom made by Carol of Sin21 Designs.
This theme is not to be used or redistributed without the explicit permission of Carol L.
Version: 1.0
Author: Carol L. (admin@sin21.org)
Author URI: http://sin21.org

--------------------------
	Design Colors
--------------------------

7EBA99 - teal / green
D8B59B - orange
6F6461 - brown
fff - white

Note: Be sure to check the menu.css for any additional color codes 
featured above to assure that all colors are changed.
*/

body, html {-webkit-font-smoothing: antialiased!important; -webkit-text-size-adjust: none;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin:0; background: url(images/gallerybg.png); top center repeat-x; font:400 14px Lato, Arial; color: #fff; line-height:165%; text-align:justify;}


/* -----------------------------------------------------------
	Global Styling
-------------------------------------------------------------- */

.clear {clear: both; display:block;}
.clearR {clear: right;}
.clearL {clear: left;}
.pull-left {float: left!important;}
.pull-right {float: right!important;}

/* -- Webkit Scrollbar -- */
::-webkit-scrollbar-thumb {height: 100px;background: #6E6362;}
::-webkit-scrollbar {width: 10px;height: 10px; background: #c4c4c4;}
::-webkit-scrollbar-thumb:hover {background-color:#663399;} ::-webkit-scrollbar-thumb:active {background-color:#8A0707;}

/* -- Links -- */
a, a:visited, a img, a:visited img, a:hover img {color:inherit; text-decoration: none; transition:all .15s ease-in-out;}
a:hover{color:#7EBA99; text-decoration: none;}

/* -- Gallery Sub-Menu -- */
.sub-nav {margin:15px auto; padding:15px; background:#00a9bc; width:1060px; color: #fff; text-align:center; overflow:hidden; border:1px solid #000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.sub-nav a, .sub-nav a:visited {padding: 3px; font:700 12px Lato, sans-serif; color:fff; text-decoration: none; letter-spacing:0; vertical-align:middle;}
.sub-nav a:hover {color:#663399; text-decoration: none;}

/* -- Global Wrappers -- */
.spec, .spec-alt, .wrapper {margin:0 auto!important; position:relative; max-width:1060px;}
.wrapper {display:block; overflow:hidden;}

/* -- Global Heading -- */
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
h4 {font-size:14px;}
h5 {font-size:14px;}

/* -- Global Footer -- */
.footer {margin:auto; padding:0; width:100%; background:#00a9bc; color:#fff; font-size:14px; font-weight:400; text-align:justify; overflow:hidden;}
.footer .pad {margin:0 auto; padding:20px 0; overflow:hidden;}
.footer .pull-left {font-weight:700; font-size:13px; text-transform:uppercase;}
.footer .pull-right {font-weight:400; font-size:13px;}
.footer a, .footer a:visited {color:#A3A3A3; font-weight:400;}
.footer a:hover {color:#663399; text-decoration: none;}

/* -----------------------------------------------------------
	Full Site (967px Resoultion and Higher)
-------------------------------------------------------------- */

@media only screen and (min-width:967px), only screen and (min-width:967px) {
/* -- HIDE -- */
.mobile-name {display:none!important; visibility:hidden!important; padding:0!important; margin:0!important; height:0!important;}

/* -- Wrap -- */
.spec {margin: 0 auto!important; width:3000px; overflow:hidden; background:#000;}

/* -- First Bar ( Site Name / Navigation ) -- */
.first-bar {margin:5px auto 0!important; padding:20px 0; background:#00a9bc; height:30px; display:block; overflow:show; text-align:center; position: relative;}
.first-bar h1 {display:inline-block; margin:0 0 -5px; padding:0; font: 700 42px Lato; background:#226e30; color:#fff; letter-spacing:-2px; text-transform:uppercasex;}
.first-bar div.descript {margin:0!important; font-size:13px; color:#00a9bc; letter-spacing:1px;}
.first-bar .nav {position:relative; z-index:999; margin-top:0px; margin-left:0; display:inline-block; overflow:show;}

/* -- Second Bar ( Social Icons / Search Box ) -- */
.second-bar {margin:30px auto 0!important; padding:0; background:#00a9bc; width:1060px; height:50px; display:block; overflow:hidden; text-align:center; position: relative; z-index:50; box-shadow: 0 2px 4px rgba(0,0,0,0.050);}

/* -- Second Bar: Social Icons -- */
.second-bar .social {margin:9px 0 0 15px; text-align:center; display:inline-block;}
.second-bar .social a, .social a:visited {margin:0 0 0 0; padding:4px 10px; display:block; float:left; color:#fff; font-size: 14px; text-align:center;}
.second-bar .social a:hover {color:#663399;}
.second-bar .social .fa {margin-right:5px;}

/* -- Second Bar: Search -- */
.second-bar #searchform {display: block; margin:9px 15px 0 0;}
.second-bar #searchform label {display: none;}
.second-bar #searchform #s {padding: 7px 35px 7px 10px; position: relative; width:200px; background: #fff url('images/search.png') 95% 48% no-repeat; font:400 13px Lato, sans-serif; color:##00a9bc; outline: none; border:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.second-bar #searchform #searchsubmit {display:none;}

/* -- Header -- */
.header {margin:0 auto 0; position:relative; display:block; width:100%; height:300px; background:url('images/header.jpg') center top no-repeat;}

.sub-nav {max-width:1060px;}

/* -- Content / Sidebar -- */
#content {margin:0 auto; padding:0 0 15px!important; background: display:block;}

/* -- Footer -- */
.footer {margin:20px auto 0;}
.footer .pad {padding:15px; max-width:1060px; overflow:hidden;}
}

/* -----------------------------------------------------------
	Responsive (966px Resoultion and Lower)
-------------------------------------------------------------- */

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {

/* -- HIDE -- */
#toolbar, #toolbarlayer, .toolbarlayer, #hw_main_nav, #hw_navcontent, #hw_nav, #hw_logo_container, .mobile {display:none!important; visibility:hidden!important; padding:0!important; margin:0!important; height:0!important;}

/* -- Body / Wraps -- */
body {margin:0!important; padding:0!important; overflow-x:hidden;}
.spec {display:block; margin:0 auto; padding:0; max-width:none!important}
.spec-alt {margin:0 auto; width:100%!important;}
#content {margin:10px auto 0; background:#fff;}

.spec, .sub-nav, #content {width:90vw; max-width:90vw!important;}

/* -- Navigation -- */
.first-bar {margin:0 auto; display:block!important; max-width:100%; padding:15px!important; background:##00a9bc;!important; overflow:hidden; max-height:none!important; text-align:center;}
.first-bar .nav {float:none!important;}

/* -- Gallery Sub-Menu -- */
.sub-nav {margin:15px auto; padding:15px; background:##00a9bc; max-width:none!important; text-align:center; overflow:hidden; border:1px solid #EBEBEB; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

/* -- Site Name -- */
.mobile-name h1 {margin:0 auto 0px!important; padding:15px!important; display:block; background:#00a9bc; font:700 28px Lato!important; color:#fff!important; text-align:center; letter-spacing:-1px; line-height:105%;}
.mobile-name span {display:block; font-size:12px; letter-spacing:0; color:#fff;}

/* -- Headings -- */
h1, .tableh1 {font-size:1.8em!important;}
.statlink h2 {font-size:1.4!important;}

/* -- Footer -- */
.footer {margin:40px auto; text-align:jusitify!important;}
.footer .pad {margin:0 auto; padding:15px!important; overflow:hidden;}
.footer .pull-left, .footer .pull-right {display:block!important; float:none!important; text-align:center;}

/* -- CPG -- */
.maintable, .admin_menu_wrapper {padding:10px!important; line-height:145%;}

.image {margin: 2px!important;}
.thumb_title {margin: 2px 0!important;}
.thumbnails {margin:0!important; padding:1vw 0!important; width: 0.1vw!important;}

#fullsize_image {max-width: 100%; height: auto;}
.thumbnails .image, .thumbnails .thumbnail {height: auto; display:inline; max-width:10vw;}
a:link .image {padding:0.5vw!important;}

.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments,.thumb_resolution {display:table!important; max-width: 12vw!important; overflow: hidden; font-size:11px!important;}
.strip_image {max-width: 14vw!important; height: auto;}

#film {width: 100%!important;}
#film .thumb a:link {width: 100%!important;}
.tape {width: 100%!important; height: 100%!important; margin-left: 0px!important;}
.remove {display: none!important;}
.display_media .image {max-width: 70vw!important; height: auto;}
#picinfo {width: 100%!important; overflow: scroll;}
.sortorder_cell img,.thumb_caption_rating img,#comments img {max-width: 2vw!important; height: auto!important;}
#comments #captchaImg img{max-width: 25vw!important; height: auto!important;}
.comment_date {font-size: 1.4vw!important;}
.navmenu img,.buttonlist img {max-width: 2.5vw!important; height: auto;}
.buttonlist {text-align:center;}
.buttonlist ul li a span {height: 2vw!important; line-height: 2vw!important;}
.buttonlist ul li a{font-size: 1vw!important;}

}	

@media only screen and (max-width: 481px), only screen and (max-width: 481px) {

.tableh1 {padding: 5px 7px!important; font-size: 19px!important;}
.thumbnail {max-width: 12vw!important; height: auto;}
.statlink {line-height: 21px!important;}
.catrow_noalb {padding: 5px 7px!important;}
.catrow {padding: 5px 7px!important;}
.catlink {font-size: 14px!important; line-height: 21px!important;}
.catrow_noalb table,.catrow table {font-size: 13px!important; line-height: 21px!important;}
.tableh2 {padding: 5px!important;}
.alblink {font-size: 13px!important; line-height: 20px!important;}
.tableb p {font-size: 10px!important; line-height: 1.5!important;}
.sortorder_cell {display: none;}

}	

/* -----------------------------------------------------------
	Coppermine Styling
-------------------------------------------------------------- */
p {}
pre.filepath {margin: 0; padding: 0;}
ul, ol {margin:0; padding: 0;}
li {margin:0; padding: 0; list-style-position: outside;}
ul li {list-style-type: none;}

input, .textinput, select {padding: 10px; background: #F8F8F8; color: #828282; max-width:45vw; border:1px solid #EDEDED;}
.listbox {color: #828282; border:1px solid #EDEDED; vertical-align: middle;}
.button {padding: 6px; max-width:35%; background: #E5E5E5; font-weight:700; color: #909090; text-align: center, left; border: 0;}
.comment_button {padding: 6px; max-width:35%; background: #E5E5E5; font-weight:700; color: #909090; text-align: center, left; border: 0;}

.radio, .checkbox {vertical-align: middle;}
.bblink a, .bblink a:visited {color: #C1A67B; text-decoration: none;}
.bblink a:hover {color: #BE9127; text-decoration: underline;}

.maintable, .admin_menu_wrapper, x.footer_cpg {margin-bottom:15px; position:relative; z-index:100; background: #000; padding:20px; box-shadow: 0 2px 4px rgba(0,0,0,0.050);}

/* -------------------------------
	Table Titles
------------------------------- */
.tableh1 {margin:0; padding:8px; font:800 25px Open Sans; color: 226e30; line-height:110%; letter-spacing: 0px; text-align: center; text-decoration: underline; text-decoration-color: #fff;
};}
.tableh1 a, .tableh1 a:visited {color:#fff; text-decoration: none;}
.tableh1 a:hover {color:#226e30; text-decoration: none;}
.tableh1-alt {padding: 0px; background:#F2F2F2; font-weight:700; font-size:13px; color: #fff;}

/* -------------------------------
	Statlink Style
------------------------------- */
.statlink {font-size:13px; color: #fff;}
.statlink h2 {margin:0; padding-bottom:15px; font:700 16px Lato;  text-transform:none; letter-spacing:-1px;}
.statlink a {text-decoration: none;}
.statlink a:hover {text-decoration: none;}

/* -------------------------------
	Albums Titles
------------------------------- */
.tableh2 {padding:10px; background: #000; font-weight:700; color: #fff; border:0;}

/* -------------------------------
	Albums Link Styles
------------------------------- */
.alblink, .alblink a, .alblink a:visited {font-weight:700; color:#FF4E00; text-decoration: none;}
.alblink a:hover {color:#226e30; text-decoration: none;}

.tableb {padding:10px;}
.tableb p {margin: 0; padding: 5px 0 0 0;}
.tableb a, .tableb a:visited {color:#5B5B5B;text-decoration: none;}
.tableb a:hover {color:#7EBA99;text-decoration: none;}

/* This class will be used in conjunction with class tableb: attributes not particularly (re)-assigned will be taken into account from tableb. */
/* It is being used to accomplish alternating row colors for lists. */
/* It's recommended to only assign another background color that slightly differs from the one defined in tableb */
.tableb_alternate {padding:0 10px; background: transparent;}
.tablef {padding: 10px; background:#000; font-size:13px;}

/* -------------------------------
	Category Table Style
------------------------------- */
.catrow_noalb, .catrow {margin:0; padding: 10px 5px; background:#000; font-size:15px; font-weight:400; color: #fff; font-style:italic; border-bottom:1px solid #000;}

/* -------------------------------
	Category Link Styles
------------------------------- */
.catlink {display: block; margin:0; padding:0;}
.catlink a, .catlink a:visited {color:#00a9bc; font-size:16px; font-weight:700; font-style:normal; text-decoration: underline; text-decoration-color:#000}
.catlink a:hover {color:##8300ff; text-decoration: none;}
.album_stat {margin: 5px 0;}

/* -------------------------------
	Thumbnail Meta
------------------------------- */
.thumb_filename {display: block;}
.thumb_title, .thumb_caption, .thumb_resolution {
	display: inline-block; margin:1px 1px; padding: 5px; font-size:11px; font-weight:700;
	 color:#fff; width:auto; border:0; line-height:140%;
}
.thumb_resolution {background:#226e30; color:#fff; font-weight:400; padding:5px 7px;}
.thumb_caption {background:#fff !important; color: #000 !important; font-weight:400; padding:5px 7px;}
.thumb_caption a {text-decoration: underline; color: #000;}

.thumb_num_comments {padding: 2px; display: block; font-weight: normal; font-size:11px; font-style: italic;}
.user_thumb_infobox {margin:1px 0;}
.user_thumb_infobox th {margin:1px 0; font-weight: bold; font-size: 100%; text-align: center;}
.user_thumb_infobox td {margin:1px 0; font-size: 85%; text-align: center;}
.user_thumb_infobox a {text-decoration: none; color: ##00a9bc;}
.user_thumb_infobox a:hover {color: #226e30; text-decoration: underline;}

.sortorder_cell {margin: 0; padding: 0; font-weight:400; font-size:11px; color: #ccc; line-height: 15px; letter-spacing: 0;}
.sortorder_options {margin: 0; padding: 0; white-space: nowrap;}

.buttonlist ul li {text-align:center; margin-right:-7px!important;}
.button, .buttonlist ul li a, .buttonlist ul li a:visited {
	padding: 5px; white-space: nowrap; background: #c4c4c4;
	color: #000; font-size: 11px; text-transform: uppercase; border: 0;
}
.button:hover,.buttonlist ul li a:hover {background: #5B5B5B; color:#fff;}

/* -------------------------------
	Menu Above Image While Viewing
------------------------------- */
.navmenu {margin:0; padding:5px 10px; background: #F2F2F2; font-weight:700; color:#747474; border:0; border-right: 1px solid #fff;}
.navmenu img {margin:0; padding: 5px;}
.navmenu a, .navmenu a:visited {display: block;}
.navmenu:last-child {border:0;}

/* -------------------------------
	Admin Menu Style
------------------------------- */
.admin_menu_wrapper {margin-bottom:5px;}
.admin_menu {padding: 5px; background-color: #000; font-size:11px; font-weight:700; color: #fff; text-align: center;}
.admin_menu a, .admin_menu a:visited {color:#5A5A5A; text-decoration: none;}
.admin_menu a:hover {color: #226e30; text-decoration: none;}
.admin_float {
	display: block; float:left; margin:1px; max-height:1.5em;
	position: relative; white-space:nowrap; /*width:100px;*/
}

a.admin_menu {padding:0!important;background-color:transparent;}
.icon {vertical-align:middle;margin-right:1px;border:0!important;background:none!important;}
.comment_date{color: #5F5F5F;font-size: 90%;vertical-align: middle;}

/* -------------------------------
	Image Border Styles
------------------------------- */
.image, a:link .image, a:visited .image, a:focus .image, a:active .image,
a:link .middlethumb,a:visited .middlethumb,a:focus .middlethumb,a:hover .middlethumb,a:active .middlethumb, .imageborder {margin:0 0 5px; padding:2px; background:##00a9bc; border:1px solid #00a9bc; box-shadow: 0 2px 3px rgba(0,0,0, 0.050);}
a:hover .image {opacity:0.8; border-color:#8300ff;}

.display_media {padding: 5px 10px;}
.thumbnails {padding: 10px 5px; width:17%;}
.strip_image {margin:0 5px!important;}

/* -------------------------------
	Coppermine Footer Style
------------------------------- */
.footer_cpg {font-size:13px;}

/* -------------------------------
	Filmstrip Style 
------------------------------- */
.filmstrip_background {background:none;}
.thumb .middlethumb {padding:0!important; border:0!important;}
.prev_strip {text-align: left;}
.next_strip{text-align: right;}

/* -----------------------------------------------------------
	Coppermine CSS - NO NEED TO EDIT
-------------------------------------------------------------- */
.topmenu {font-family: "Lato", Lato, Geneva, Lato, sans-serif;}
.topmenu a {color: #747474;text-decoration: none;}
.topmenu a:hover {color: #747474; text-decoration: underline;}
.img_caption_table {border: none;background-color: none;width: 100%;margin: 0px;}
.img_caption_table th {background: #D1D7DC ;font-size: 100%;color: #A47969;padding-top: 4px;padding-right: 10px;padding-bottom: 4px;padding-left: 10px;border-top: 1px solid none;}
.img_caption_table td {background: none ;padding-top: 6px;padding-right: 10px;padding-bottom: 6px;padding-left: 10px;border-top: 1px solid none;white-space: normal;}
.debug_text {border: #BDBEBD;background-color: #F3F3F3;width: 100%;margin: 0px;}
.clickable_option {cursor: default;}
.listbox_lang {color: #747474;background-color: none;border: 1px solid #D1D7DC;font-size: 80%;font-family: Lato, Lato, sans-serif;vertical-align: middle;}
.pic_title {color: #747474;font-size: 100%;font-weight:bold;text-align: center;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;line-height:1.0em;}
.pic_caption {color: #747474;font-size: 100%;font-weight:normal;text-align: center;padding:0;margin:0;line-height:1.0em;background-image:none;}
.important {	/* background-image: url(images/important.gif); */color: red;font-weight: bold;padding:3px 1px;}
#cpgChooseLanguageWrapper {float:left;}
#cpgChooseThemeWrapper {float:left;}

/** Swfupload css **/
div.fieldset {border:  2px solid #0E72A4;margin: 10px 0;padding: 20px 10px;}
div.fieldset span.legend {position: relative;padding: 3px;top: -30px;background-color: #8AA5B5;color: #ffffff;font-weight: bold;}
div.flash {width: 375px;margin: 10px 5px;border-color: ##00a9bc;}

input[disabled]{ border: 1px solid #ccc} /* FF 2 Fix */

.progressWrapper {width: 357px;overflow: hidden;}
.progressContainer {margin: 5px;padding: 4px;border: solid 1px #E8E8E8;background-color: #F2F2F2;overflow: hidden;}

/* Message */
.message {margin: 1em 0;padding: 10px 20px;border: solid 1px #FFDD99;background-color: #FFFFCC;overflow: hidden;}

/* Error */
.red {border: solid 1px #B50000; background-color: #FFEBEB;}

/* Current */
.green {border: solid 1px #DDF0DD; background-color: #EBFFEB;}

/* Complete */
.blue {border: solid 1px #CEE2F2; background-color: #F0F5FF;}
.progressName {font-size: 8pt; font-weight: 700; color: #555; width: 323px; height: 14px; text-align: left; white-space: nowrap; overflow: hidden;}
.progressBarInProgress,
.progressBarComplete,
.progressBarError {font-size: 0; width: 0%; height: 2px; background-color: blue; margin-top: 2px;}
.progressBarComplete {width: 100%; background-color: green; visibility: hidden;}
.progressBarError {width: 100%; background-color: red; visibility: hidden;}
.progressBarStatus {margin-top: 2px; width: 337px; font-size: 7pt; font-family: "Lato"; text-align: left; white-space: nowrap; color: #555;}
a.progressCancel {font-size: 0; display: block; height: 14px; width: 14px; background-image: url(images/cancelbutton.gif); background-repeat: no-repeat; background-position: -14px 0px; float: right;}
a.progressCancel:hover {background-position: 0px 0px;}
.swfupload {vertical-align: top;}

/**styles for photo manager*/
table#pic_sort tr td { padding: 4px; border-bottom: 1px solid #ccc;}

/** styles for album manager and photo album*/
table#album_sort tr td {padding: 3px; border-bottom: 1px solid #ccc;}
table#album_sort tr td span.editAlbum {margin-left: 100px; font-size: 10px; line-height: 100%; text-decoration: underline; cursor: pointer; display: none; color: #FF0000;}
.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center;}
.cpg_message_info {color: #00529B; background-color: #BDE5F8; background-image: url('images/message/info.png');}
.cpg_message_success {color: #4F8A10; background-color: #DFF2BF; background-image: url('images/message/ok.png');}
.cpg_message_warning {color: #9F6000; background-color: #FEEFB3; background-image: url('images/message/warning.png');}
.cpg_message_error {color: #D8000C; background-color: #FFBABA; background-image: url('images/message/stop.png');}
.cpg_message_validation {color: #D63301; background-color: #FFCCBA; background-image: url('images/message/error.png');}
#GB_window {background-color: none; border: 5px solid #CCD7E0;}
.external {background: transparent url('images/link.gif') 100% 50% no-repeat; padding-right: 10px;}
.detail_head_collapsed, .detail_head_expanded {color: #fff;}