/*
Theme Name: FSSW A Dream To Host
Theme URI:  https://github.com/jarydberg/certificate
Author: Free State Social Work, LLC
Author URI: http://www.freestatesocialwork.com
Description: Theme files for Free State Social Work LLC
Version: 2025.1
*/

body{font:normal .9em/1.6em Arial, Helvetica, sans-serif;color:#2a3845;margin:0;padding:0;background:#E5E6E8 url(images/gradient.jpg) repeat-x; }
a:link{color:#800000;text-decoration:none;word-wrap: break-word; } 
 /* ^^ break-word documentation from http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap */
a:visited{color:#BC3A00;text-decoration:none;}
a:hover{color:#8C2200;text-decoration:underline;}
a:active{color:#4071d3;text-decoration:none;}
h1{color:#800000; margin:0px 0px 10px 0px;padding-bottom:1px;font:normal 1.65em Georgia, serif;}
h2{color:#8C2200;margin:20px 0 10px;padding-bottom:10px;font:bold 1.2em Georgia, serif;}
h3{color:#000;margin:10px 0;padding-bottom:10px;font:bold 1em Arial, Helvetica, sans-serif;}
ul{padding:0;margin:0 0 0 16px;list-style:square;}
.red-span{color:#800000;}
.center-span{text-align: center;}
blockquote{border-left:1px solid #EAEAEA;padding-left:10px;}
table{line-height:normal;}
#wrap{margin:0 auto;width:1020px;background:white;border-left:1px solid #999;border-right:1px solid #999}

#navigation{background:transparent url(images/header.png) repeat-x;text-align:center;height:60px; clear:both;}
#navigation ul{list-style-type:none;display:inline; position: relative; top: 15px; }
#navigation li{list-style-type:none;margin:0px 20px 0 0;display:inline;}
#navigation ul.no-large-screen{display:none;}
#navigation a{text-decoration:none;color:white;font-size:1em;}
#navigation a:hover{text-decoration:none;color:white;font-size:1em;border-bottom:1px solid #FFF}


#header{padding:0px 0px 0px 0px;border-left:0px solid #FFF;border-right:0px solid #FFF; width:1020px; height:  50px; position: fixed; background:transparent url(images/white-box.jpg); z-index:10}
#header-text{font:normal 1.65em Georgia, serif; height:  50px; margin-top:10px; background:transparent url(images/white-box.jpg)}
#header-text li{list-style-type:none;margin:0 20px 0 0;display:inline; }
.header-text-left {float:left; padding-left: 15px;}
.header-text-right {float:right; padding-top:10px;}

/* For a two line banner, this banner-text height should be 20 px and main padding-top should be 180 px.*/
/* For a one line banner, this banner-text height should be 30 px and main padding-top should be 160 px.*/


#banner-text{font:normal 1em Georgia, serif; font-weight:  bold; text-align: center; height:  20px; background:transparent url(images/white-box.jpg); z-index:10}
#banner-text li{list-style-type:none;}
.banner-text-left {float:left; padding-left: 5px;}
.banner-text-right {float:right; padding-top:10px;}



#home-nav {margin:auto; text-align: center; border-spacing: 10px; width:100%;  z-index:1;}
.home-icon{padding: 10px}

#logo{color:#000;padding-left:10px;}
#logo img{float:left;padding-right:15px;}
#logo a{color:#000;text-decoration:none;font:normal 2.4em Georgia, serif;}
#slogan{font-size:.5em;color:#a1a1a1;}
#main{margin:0 auto;padding:160px 0px 0px 0px; z-index:5;overflow:auto;}
#left-column{width:580px;float:left;padding-left:40px;}
#left-column ul{padding:0;margin:0 0 0 30px;}
#left-column ol{padding:0;margin:0 0 0 30px;}
.postmeta{border-top:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;padding:3px 5px;}
.st{padding:3px 5px;color:#777; font:normal .6em Arial, Helvetica, sans-serif;}
#right-column{width:390px;float:right;min-height:600px}
.footnav{padding:10px 0;}
#footer{background:#FFF url(images/footer.png) repeat-x top center;padding:50px 40px 5px 40px;clear:both;color:#666;font-size:1em;}
#comment{width:100%;}
ol h3{border:none;padding-bottom:0}
#commentlist li{padding:5px 10px;}
#commentlist li.alt{background-color:#e9edf6}
.commentmeta{font-size:.7em;color:#999;}
#sidebar{padding:0px 40px 20px 20px;}
#sidebar ul{list-style-type:none;}
#sidebar ul li ul li{list-style-type:none;padding:5px;border-bottom:1px solid #EEE;}
#sidebar h2{color:#000;background:#f9f9f9 url(images/h2.png) repeat-x top left;padding:3px 10px;border-top:1px solid #999}
#sidebar li.rss{border-bottom:none;}
#sidebar li.rss img{float:left;padding-right:10px;}
.textwidget{margin-left:15px;}
.cat-h2{color:#000;}
.cat-h1{color:#000; margin:20px 0 10px;padding-bottom:10px; font: 1.2em Arial, Helvetica, sans-serif;}



.related.products {
    clear: both;
	/*display: block;*/
}




.woocommerce table.cart .product-thumbnail { display:none; }

/* Adjust the font size and padding in the add to cart shortcode box */
/* ins style removes default underline for sale price that only appears if there is a sale price value*/

.woocommerce-Price-amount {padding:10px;font:normal 1.65em Georgia, serif;}
ins {text-decoration: none;}


/* Hide the default coupon form @ WooCommerce Cart table */
/* I hate to use display:none but there is no other solution */
/*  From https://www.businessbloomer.com/woocommerce-move-remove-coupon-form-cart-checkout/ */
 
div.coupon:not(.under-proceed) { 
	display: none !important; 
	}

.tml-button {
	display: block;
  width: 100%;
  border: none;
  background-color: #800000;
margin-top:  25px;
  padding: 14px 28px;
  font-size: 16px;
  color: white;
  cursor: pointer;
  text-align: center;

}

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Dropdown menu styles */
select#category-filter,
select#sort-order {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    color: #2a3845;
    background-color: #fff;
    border: 1px solid #800000;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 5px 0;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
}

select#category-filter:focus,
select#sort-order:focus {
    outline: none;
    border-color: #8C2200;
    box-shadow: 0 0 5px rgba(140, 34, 0, 0.3);
}

/* Label styles */
label[for="category-filter"],
label[for="sort-order"] {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    color: #800000;
    display: block;
    margin-bottom: 5px;
}

/* Container styles */
div:has(> select#category-filter),
div:has(> select#sort-order) {
    margin-bottom: 15px;
}

/* Dropdown arrow customization */
select#category-filter,
select#sort-order {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23800000' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Hover effect */
select#category-filter:hover,
select#sort-order:hover {
    background-color: #f8f8f8;
}

/* Checkbox container styles */
#course-filter {
    margin-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    color: #2a3845;
}

/* Checkbox label styles */
#course-filter label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

/* Checkbox input styles */
#course-filter input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #800000;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

/* Checkbox checked state */
#course-filter input[type="checkbox"]:checked {
    background-color: #800000;
}

/* Checkbox checkmark */
#course-filter input[type="checkbox"]:checked::after {
    content: '\2714';
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Checkbox hover state 
#course-filter input[type="checkbox"]:hover {
    background-color: #f8f8f8;
}*/

/* Checkbox focus state */
#course-filter input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(140, 34, 0, 0.3);
}

/* Label text styles */
#course-filter label span {
    font-family: Georgia, serif;
    font-size: 1.1em;
    color: #800000;
}

/* Style passed listing on archive and search pages */
.pass-status {
    font-weight: bold;
    /* margin-top: 5px; */
}
.pass-status.passed {
    color: black;
}
.pass-status.not-passed {
    color: black;
}
.check-mark {
    color: #333;
    font-size: 1.2em;
    margin-right: 5px;
}

/* RESPONSIVE SUPPORT
----------------------------------------------- */

@media screen and (max-width: 834px) {
#body{width: 100%;}
#wrap{margin:0 auto;width:100%;background:white;border-left:0px solid #999;border-right:0px solid #999}

#logo {text-align: center;}



#logo a{color:#000;text-decoration:none;font:normal 1.6em Georgia, serif;text-align: center;}


#slogan{font-size:.5em;color:#a1a1a1;text-align: center; }

#header{padding:0px 0px 0px 0px;border-left:0px solid #FFF;border-right:0px solid #FFF; width:100%; height:  50px; position: fixed; background:transparent url(images/white-box.jpg)}
#header-text{font:normal 1.2em Georgia, serif; text-align:  center; margin-top:2px; background:transparent url(images/white-box.jpg)}
#header-text li{list-style-type: circle; text-align:center; display: block;}
.header-text-left {float: none; padding-left: 0px;}
.header-text-right {float:none; padding-top: 0px; font-size:.8em}

/* For a two line banner, this banner-text height should be 75 px and main padding-top should be 200 px.*/
/* For a one line banner, this banner-text height should be 50 px and main padding-top should be 175 px.*/

#banner-text{height: 50px;}
#main{padding-top:175px;}




#navigation{text-align:  center;}
#navigation a{text-decoration:none;color:white;line-height:1.2;}
.h_logo{display:none;}
#text-17{display:none;}
#left-column{width:80%;float:none;}
#right-column{width:80%;float:none;}
#navigation ul.no-mobile{display:none;}
#navigation ul.no-large-screen{display:inline; top: 5px;}


	/*table layout for mobile based on write-up at https://css-tricks.com/responsive-data-tables/ */
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */

	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	/*tr { border: 1px solid #ccc; }*/
	
	td { 
		/* Behave  like a "row" */
		border: none;
		margin-top:  6px;
		position: relative;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		padding-right: 10px; 
		white-space: nowrap;
	}
	

}


@media screen and (max-width: 320px) {
	#header{height: 125px; margin-bottom: 10px;}
	#slogan {display: none;}
	#navigation{background: none; text-align:center;height:75px;}
	#navigation a{color:black;}
	#navigation a:hover{text-decoration:underline;color:#800000;font-size:1em;border-bottom:1px solid #FFF}

	#main{padding-top: 200px;}
	
}