/* ----------------------------------------------- */
/*              BASE STYLES For Twigs              */
/* ----------------------------------------------- */

html{font-size:16px;}
body {
        width:100%;
	font-family:Delius,san serif;
	background-color:#ffffff;
	color:#000000;
	margin:0;
	padding:0;
}

.container{width:100%;max-width:984px;margin:10px auto 10px auto;}

/* Base Page for Twigs */

.home{width:100%;max-width:984px;margin:10px auto 10px auto;}
.home_leftcol{width:50%;float:left;margin:12px;}
.home_rightcol{width:45%;float:left;margin:12px}
.text{padding:0px;margin:0px;}
.videospace{width:25%;float:left;margin:12px;}

/*  Media Formatting*/

@media only screen and (max-width: 600px) {
.home{width:100%;}
.home_leftcol{width:100%;float:none;padding:0px;margin:0px;}
.home_rightcol{width:100%;float:none;padding:0px;margin:0px;}
.text{padding:0px;margin:0px 12px 0px 12px;}
.videospace{width:90%;float:none;}

 }

@media only screen and (min-width: 601px) and (max-width: 873px) {
.home{width:90%;}
.home_leftcol{width:47%;float:left;margin:12px;}
.home_rightcol{width:44%;float:left;margin:12px;}
.text{padding:0px;margin:0px;}
.videospace{width:90%;float:none;}

 }

@media only screen and (min-width: 874px) and (max-width: 950px) {
.home{width:80%;}
.home_leftcol{width:40%;float:left;margin:0px 6px 0px 0px;}
.home_rightcol{width:40%;float:left;margin:0px 6px 0px 0px;}
.text{padding:0px;margin:0px 6px 0px 6px;}
.videospace{width:90%;float:none;}

 }

/* Global Styles */

.left {float:left;}
.right {float:right;}
.clear {clear:both;}

/* To make sidebar alignment work */
table, tr, td, td .sidebar {
  vertical-align:top;
}

/* -------------- Adjusts superior, inferior ----------------*/
sub,
sup {
  position: relative;
  font-size: .625rem !important;   /* = 10px */
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}
ul{padding-left:24px;}

/* ---------------------------- */
/*      Sale time, date         */
/* ---------------------------- */
.saletitle{text-align:center;color:red;font-size:1.875rem;line-height:1.2em;font-weight:bold;margin-bottom:6px;} /* = 30px */
.saledates{text-align:center;font-size:1.5rem;line-height:1.2em;} /* = 24px */
.saletext{font-size:1rem;margin-bottom:18px;} /* = 16px */
.seepictures{text-align:left;margin:18px;font-size:1.125rem;font-weight:normal;} /* = 16px */

/* ---------------------------- */
/*      Common Footer           */
/* ---------------------------- */

.footer{max-width:100%;margin:18px auto 12px auto;font-size:.875rem;text-align:center;} /* = 14px */

/* ------------------------------------ */
/*    font-awesome characters           */
/* ------------------------------------ */
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: .875rem; 
    font-size: inherit;
    right:12px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
} /* = 14px */

/* ------------------------------------ */
/*               Link Styles            */
/* ------------------------------------ */
/* jquery mobile overwrite */
.ui-body-c .ui-link {
    color: inherit !important;
    font-weight: inherit !important;
}

/* generic site link styles */
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
   text-decoration:none; color: navy;font-weight:bold;
}
.ui-page-theme-a a:hover, html .ui-bar-a a:hover, html .ui-body-a a:hover, html body .ui-group-theme-a a:hover {
text-decoration:underline;color: #38c /*{a-link-hover}*/;
}
.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
text-decoration:none;color: #800080 /*{a-link-visited}*/;
}
.ui-page-theme-a a:active, html .ui-bar-a a:active, html .ui-body-a a:active, html body .ui-group-theme-a a:active {
text-decoration:none;color: #3192c1 /*{a-link-active}*/;
}

.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head+body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head+body .ui-btn-a.ui-focus, html head+body .ui-body-a.ui-focus {
-webkit-box-shadow: 0 0 12px #ccc;
-moz-box-shadow: 0 0 12px #ccc;
box-shadow: 0 0 12px #ccc;
}

a.white{color: #ffffff;text-decoration:none;}
a:visited.white{color: #ffffff;text-decoration:none;}
a:active.white{color: #ffffff;text-decoration:none;}
a:hover.white{color: #ffcc00;text-decoration:none;}
a:visited:hover.white {color: #ffcc00;text-decoration:none;}

.red a {color: #cc0000;}
.red a:visited {color: #cc0000;}
.red a:active {color: #cc0000;}
.red a:hover {color: #cc0000;}

.smlink {color: #000000;font-size: .75rem;}  /* = 10px */
.smlink a:link {color: #000000;font-size:.75rem;}  /* = 10px */
.smlink a:visited {color: #000000;font-size: .75rem;}  /* = 10px */
.smlink a:active {color: #000000;font-size: .75rem;}  /* = 10px */
.smlink a:hover{color: #000000;font-size: .75rem;}  /* = 10px */

/* ------------------------------------ */
/*         Generic  Button              */
/* ------------------------------------ */ 

 .ui-btn {
        width:150px;
        padding:8px;
	border-color:#4CAF50 !important;
	background-color: #5cb85c !important; /* for non-css3 browsers */
	color:#fff !important;
	font-size: 1.125rem;  
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s ease;
}

.ui-btn:active, .ui-btn:focus {background: #5cb85c !important;}

.ui-btn:hover {
	background-color:#45a049 !important;
	border-color:#45a049 !important;
}

@media screen and (max-width: 500px) {
	.ui-btn {width:96%;float:left;padding:10px;margin:0px;}
 }
/* --------- End Generic  Button ---------- */

/*  body styles */
.text {font-size: 1rem;}  /* = 16px */
.italic{font-style:italic;}

/* Headline sizes */
H1 {font-weight: bold; font-size: 1.5rem; color: navy; line-height: 1.25em;}                          /* = 24px */
H2 {font-weight: bold; font-size: 1.25rem; color: #003366; line-height: 1.25em; font-style: italic;}     /* = 20px */
H3 {font-weight: bold; font-size: 1.125rem; color: navy; line-height: 1.25em;font-style: normal;}     /* = 18px  used for second line*/
H4 {font-weight: bold; font-size: 1rem; color: #003366; line-height: 1.25em; font-style: normal;}        /* = 16px */
H5 {font-weight: bold; font-size: .875rem; color: #0000ff; line-height: 1.25em; text-align: center}    /* = 14px */
H6 {font-weight: bold; font-size: .75rem; color: navy; line-height: 1.25em;}                             /* = 12px */
H7 {font-weight: bold; font-size: .625rem; color: #0000ff; line-height: 1.25em; text-align: center}    /* = 10px */
.header{font-weight: bold; font-size: 1.5rem; color: navy; line-height: 1.25em;}                      /* = 10px */
.subheader {font-weight: bold; font-size: 1.125rem; color: navy; line-height: 1.25em;font-style: normal;} /* = 18px */

/* colors */
.red {color:#cc0000;}
.toc {background: gray}
.look {background: #ff80c0; color: lime}

/* ------------------------------------ */
/*  Form Errors                         */
/* ------------------------------------ */
.formDisplay{display:block;}
.msgDisplay{display:none;}

/*  Form Error Styling*/
input-label{
  font-size: .75rem;
  font-weight:normal;
} /* = 12px */

input[type=text] {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: .75rem;
  height: 33px;
  margin: 0px 0px 15px 0px;
  padding: 0px 0px 0px 15px;
  width: 93%;
} /* = 12px */

input[type=email] {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: .75rem;
  height: 33px;
  margin: 0 0 15px 0;
  padding: 0 0 0 15px;
  width: 93%;
} /* = 12px */

/*  Thank you Styling*/
.thankyou {
	background-color:yellow;
	text-align: center;
	padding-top:12px;
	padding-bottom:12px;
	font-weight:bold;
	
}

/* ------------------------------------ */
/*  FAQs                                */
/* ------------------------------------ */
        /* Container for FAQ */
        .faq-container {
            max-width: 100%;
            margin: 0px;
            padding: 0px 20px;
}

        /* FAQ Section Title */
        .faq-container h1 {
            text-align: center;
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 30px;
        }

        /* FAQ item styling */
        .faq-item {
            margin-bottom: 14px;
        }

        /* Button for FAQ question */
        .faq-question {
            font-family:Delius,san serif;
            width: 100%;
            padding: 15px;
            font-size: 1.125rem;  
            background-color: #4CAF50;
            color: white;
            border: none;
            text-align: left;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        } /* = 16px base */

        /* Button hover effect */
        .faq-question:hover {
            background-color: #45a049;
        }

        /* Answer section */
        .faq-answer {
            display: none;
            padding: 10px 10px 0px 10px;
            font-size: 1rem;
            color: #555;
        }

        /* Optional: Show answers when active */
        .faq-item.active .faq-answer {
            display: block;
        }

@media screen and (max-width: 500px) {
        .faq-container {
            max-width: 100%;
            margin: 0px;
            padding: 0px 20px;
        }

}