@charset "utf-8";
/* CSS Document */

/* POSTPONE CUSTOM FONT FOR NOW
@font-face {
  font-family: 'Gabriola';
  src: url('/_fonts/gabriola/gabriola.eot'); 
  src: url('/_fonts/gabriola/gabriola.eot?#iefix') format('embedded-opentype'), 
       url('/_fonts/gabriola/gabriola.woff2') format('woff2'), 
       url('/_fonts/gabriola/gabriola.woff') format('woff'), 
       url('/_fonts/gabriola/gabriola.ttf') format('truetype'), 
       url('/_fonts/gabriola/gabriola.svg#svgGabriola') format('svg'); 
}
*/

/* POSTPONE IMAGE FOR NOW
html { 
  background: url(/_images/BG-River-Reflection.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
*/

@import url(//fonts.googleapis.com/css?family=Lobster);

body {
	font-family: "Lato", Arial, sans-serif;
	font-size:15px;
	line-height:1.25;
    height: 100%;
    background: #0099cd; /* For browsers that do not support gradients */
    background: linear-gradient(180deg, #0090cc, #c7e9f4, #88b0d2, #838bc4); /* Standard syntax (must be last) */	
    height: 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Lobster", "Times New Roman", "serif";
	color: #0099cc;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2.5em;
}
h3 {
  font-size: 2em;
}

.imgBrdr {
    border: 2px solid #0099cc;
}

ol.phpfmg_form{
    width: 100%;
    list-style-type: none;
}


.river-blue,.hover-river-blue:hover{color:#fff!important;background-color:#0099cc!important}
.text-river-blue{color:#0099cc}
.soft-blue,.hover-soft-blue:hover{color:#fff!important;background-color:#c7e9f4!important}
.text-soft-blue{color:#c7e9f4}
.menu-purple,.hover-menu-purple:hover{color:#fff!important;background-color:#976ec2!important}
.text-menu-purple{color:#976ec2}

.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#0099cc;color:#fff}
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#0099cc;color:#fff}

.highlight {
	background-color: #c7e9f4;
}

.TopOfPage {
}

.header{width:100%;
	padding-top: 4vw;
	padding-bottom: 0;
    }

.header img { 
	padding-right:1%; 
	padding-top:20px; 
	padding-left:0; 
	padding-bottom:0; 
	vertical-align: text-bottom;
 	width: 80%; 
	height: auto;
   }

@media (min-width: 32em) { .header img { 
	width: 20%; 
	height:auto; 
	padding-right:1%; 
	padding-top:10px; 
	padding-left:0; 
	padding-bottom:0; 
	} 
}	 

@media (min-width: 45em) { .header img { 
	width: 10%; 
	height:auto; 
	padding-right:1%; 
	padding-top:0; 
	padding-left:0; 
	padding-bottom:0; 
	} 
}


.header h1{
	color: #ffffff; 
	text-shadow: 1px 1px 0 #444;

}
.header-font {
	padding-top: 4vw;
	padding-bottom: 0;
	color: #ffffff; 
	text-shadow: 1px 1px 0 #444;
}

img.Left { 
	width: 100%; 
	height: auto;
	display: block;
}
@media (min-width: 32em) { img.Left { 
	width: 30%; 
	height:auto; 
	display: block; 
	float:left;
	padding-right: 2%;
	padding-bottom: 2%;
	} 
}	 

@media (min-width: 45em) { img.Left { 
	width: 45%; 
	height:auto; 
	display: block; 
	float:left; 	
	padding-right: 2%;
	padding-bottom: 2%;
	} 
}

img.ThumbLeft { 
	width: 100%; 
	height: auto;
	display: block;
}
@media (min-width: 32em) { img.ThumbLeft { 
	width: 20%; 
	height:auto; 
	display: block; 
	float:left;
	padding-right: 2%;
	padding-bottom: 2%;
	} 
}	 

@media (min-width: 45em) { img.ThumbLeft { 
	width: 25%; 
	height:auto; 
	display: block; 
	float:left; 	
	padding-right: 2%;
	padding-bottom: 2%;
	} 
}

img.TrophyLeft { 
	width: 100%; 
	height: auto;
	display: block;
}
@media (min-width: 32em) { img.TrophyLeft { 
	width: 10%; 
	height:auto; 
	display: block; 
	float:left;
	padding-right: 2%;
	padding-bottom: 2%;
	} 
}	 

@media (min-width: 45em) { img.TrophyLeft { 
	width: 15%; 
	height:auto; 
	display: block; 
	float:left; 	
	padding-right: 2%;
	padding-bottom: 2%;
	} 
}

img.Right { 
	width: 100%; 
	height: auto;
	display: block;
}
@media (min-width: 32em) { img.Right { 
	width: 30%; 
	height:auto; 
	display: block; 
	float:right; 	
	padding-left: 2%;
	padding-bottom: 2%;
	} 
}	 

@media (min-width: 45em) { img.Right { 
	width: 45%; 
	height:auto; 
	display: block; 
	float:right; 	
	padding-left: 2%;
	padding-bottom: 2%;
	} 
}

img.ThumbRight { 
	width: 100%; 
	height: auto;
	display: block;
}
@media (min-width: 32em) { img.ThumbRight { 
	width: 20%; 
	height:auto; 
	display: block; 
	float:right; 	
	padding-left: 2%;
	padding-bottom: 2%;
	} 
}	 

@media (min-width: 45em) { img.ThumbRight { 
	width: 25%; 
	height:auto; 
	display: block; 
	float:right; 	
	padding-left: 2%;
	padding-bottom: 2%;
	} 
}

img.TrophyRight { 
	width: 100%; 
	height: auto;
	display: block;
}
@media (min-width: 32em) { img.TrophyRight { 
	width: 10%; 
	height:auto; 
	display: block; 
	float:right; 	
	padding-left: 2%;
	padding-bottom: 2%;
	} 
}	 

@media (min-width: 45em) { img.TrophyRight { 
	width: 15%; 
	height:auto; 
	display: block; 
	float:right; 	
	padding-left: 2%;
	padding-bottom: 2%;
	} 
}

.footer-BG {
	background-color: #976ec2;
}

.river-blue {
	color: #0099cc;
}
.alert-red {
	color: #ff0000;
}
.BG-soft-purple {
	background-color:#cad1fc;
}
.BG-soft-blue {
	background-color:#cae0fc;
}
.BG-soft-yellow {
	background-color:#fcf6ca;
}

table#schedule {
    width: 100%; 
	font-family: "Trebuchet MS", Segoe, "Segoe UI", "DejaVu Sans", Verdana, "sans-serif";
	font-size: 10pt;
	text-align: center;
	background-color: #ffffff;
    border: 1px solid #999999;
    border-collapse: collapse;
}

table#schedule td {
    border: 1px solid #999999;
    border-collapse: collapse;
    padding: 3px;
	height: auto;
}
.red {color: red;}
.strike {text-decoration: line-through;}
.required {
	color: red;
	font-weight: bold;
}


/* Form CSS */


.jf-form{
  margin-top: 28px;
}

.jf-form > form{
  margin-bottom: 32px;
}

.jf-option-box{
  display: none;
  margin-left: 8px;
}

.jf-hide{
  display: none;
}

.jf-disabled {
    background-color: #eeeeee;
    opacity: 0.6;
    pointer-events: none;
}

/* 
overwrite bootstrap default margin-left, because the <label> doesn't contain the <input> element.
*/
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: 0px;
}

div.form-group{
  padding: 8px 8px 4px 8px;
}

.mainDescription{
  margin-bottom: 10px;
}

p.description{
  margin:0px;
}

.responsive img{
  width: 100%;
}

p.error, p.validation-error{
  padding: 5px;
}

p.error{
  margin-top: 10px;
  color:#a94442;
}

p.server-error{
  font-weight: bold;
}

div.thumbnail{
  position: relative;
  text-align: center;
}

div.thumbnail.selected p{
  color: #ffffff;
}

div.thumbnail .glyphicon-ok-circle{
  position: absolute;
  top: 16px;
  left: 16px;
  color: #ffffff;
  font-size: 32px;
}

.jf-copyright{color: #888888; display: inline-block; margin: 16px;display:none;}

.form-group.required {
    color: #000000;
    content: "*";
    margin-left: 0px;
}
.control-label:after {
    color: #FF0000;
    margin-left: 0px;
}

.submit .btn.disabled, .submit .btn[disabled]{
  background: transparent;
  opacity: 0.75;
}

/* for image option with span text */
.checkbox label > span, .radio label > span{
  display: block;
}

.form-group.inline .control-label,
.form-group.col-1 .control-label,
.form-group.col-2 .control-label,
.form-group.col-3 .control-label
{
  display: block;
}

.form-group.inline div.radio,
.form-group.inline div.checkbox{
  display: inline-block;
}

.form-group.col-1 div.radio,
.form-group.col-1 div.checkbox{
  display: block;
}

.form-group.col-2 div.radio,
.form-group.col-2 div.checkbox{
  display: inline-flex;
  width: 48%;
}

.form-group.col-3 div.radio,
.form-group.col-3 div.checkbox{
  display: inline-flex;
  width: 30%;
}

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