/* Import fonts from Google */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

/* Start with the styles for the mobile version */

html, body {  
	margin: 0;
        padding: 0;
	border: 0;  
	outline: 0;  
	/* These two lines are supposed to keep iOS from enlarging the text
	when a device is held in landscape mode. Doesn't seem to work. */
	-webkit-text-size-adjust: 100%;  
	-ms-text-size-adjust: 100%; 
}
html {
	height: 100%;
}
body {
        background-color: #f6f6f6;
	font-family: Arial, Helvetica, sans-serif;  
	line-height: 1.3;
	font-size: 1.0em;
	color: #222222;
	position: relative; /* Required to let the header div remain in it's position. */
}

/* Links */ 
a:link, a:visited {
	color: #0099CC;
	text-decoration: none;
}

/* Styles for the main page elements */
.page_header {
	position: fixed; /* Keep this header div at the top of page when scrolling */
	z-index: 10; /* make this is on top of the advertising sliderwall. */
	top: 0;
	height: 52px; /* The height of the background logo */
	/* This is how to combine a linear gradient background with a foreground image */
	background-image: url(/images/logo-mobile.png), linear-gradient(to top,#06a9e0,#0290c1);
        background-repeat: no-repeat;
        background-position: top center;
	box-sizing: border-box;
	width: 100%;
	padding-left: 0.8em;
	padding-right: 0.8em;
}
.page_header_image {
	margin-top: 52px; /* move this down under the header for mobile */
	width: 100%;
}
.logo {
	display: none;
}
.page_data {
        padding-top: 1em;
        padding-right: 0.8em;
        padding-bottom: 1.5em;
        padding-left: 0.8em;
        background-color: #f6f6f6;
}

/* Styles for the Menu icon that appears in the header */
.menu_icon, .back_icon {
	margin-top: 0.8em;
	/* No box around it
	padding: 0.1em;
	padding-left: 0.3em;
	padding-right: 0.3em;
        background-color: #FFFFFF;
        border: 2px solid #ff9800;
	border-radius: 6px;
	*/
}
.menu_icon {
	float: right;
}
.menu_icon:after {
	content: "\2261";
	font-size: 2.0em;  
	line-height: 0.8em;
	color: #FFFFFF;
}

/* Styles for the "back" icon that appears in the header */
.back_icon {
	float: left;
}
.back_icon:after {
	content: "\2039";
	font-size: 2.6em;  
	line-height: 0.4em;
	color: #FFFFFF;
}
.home_page .back_icon {
	display: none; /* Don't show the "back" icon on the home page */
}

/* Footer Styling */
.footer {
	clear: both;
        padding-top: 1.0em;
        padding-left: 1.5em;
        padding-right: 1.5em;
        padding-bottom: 1.0em;
	/*background: #00af43;*/ 
	background: linear-gradient(to bottom,#06a9e0,#0290c1);
        color: #FFFFFF;
	font-size: 0.8em;
}
.footer_text, .footer_text b {
	font-size: 1.0em;
	font-weight: normal;
}
.footer a {
	color: #FFFFFF;
}
.footer_contact {
	text-align: center;
}
/* Footer Styling */


/* Headings */
H1, H2, H3, H4, H5, .heading1, .heading2, .heading3, .heading4, .heading_blog, .blog_title {
	margin-top: 0;
	margin-bottom: 0;
	color: #0184B1;
	/*font-family: Oswald, Arial, Helvetica, sans-serif;  */
	letter-spacing: -0.02em;
	line-height: 1.2;
}
H1, .heading1 {
	font-size: 2.0em;
	font-weight: 700;
	margin-bottom: 0.5em;
}
H2, .heading2, .blog_title {
	font-size: 1.7em;
	font-weight: 700;
	margin-bottom: 0.4em;
}
H3, .heading3, .heading_blog {
	font-size: 1.4em;
	font-weight: 700;
}
H4, .heading4 {
	font-size: 1.3em;
	font-weight: 600;
}
.larger {
	font-size: 1.4em;
	letter-spacing: -0.04em;
	line-height: 1.2;
}

SMALL, .small, .caption, .blog_date, .blog_date_latestentrysummary {
	font-size: 0.8em;
	color: #777777;
        line-height: 1.0;
}

.verysmall {
	font-size: 0.7em;
}

.caption {
	margin-top: 0.3em;
	line-height: 1.1;
}

hr {
        border: none;
        color: #FEC911;
        background-color: #FEC911;
        height: 3px;
}
hr.thinblue {
        border: none;
        color: #0184B1;
        background-color: #0184B1;
        height: 1px;
}


/* ================== Forms and Buttons ================== */
label {
        display: block; /* Force it onto a new line */
}
/* class="form" is the normal text */
.form {
        font-weight: normal;
}
/* class="form_required" is for required fields */
label.form_required, span.form_required {
        font-weight: bold;
}
input.form_required {
        font-weight: normal;
}
/* class="form_error" is for error fields */
label.form_error, span.form_error {
        color: red;
        font-weight: bold;
}
input.form_error, textarea.form_error {
        border: 2px solid red;
}
/* class="form_warning" is for error fields */
label.form_warning, span.form_warning {
        color: #FF9900;
        font-weight: bold;
}
input.form_warning, textarea.form_warning {
        border: 2px solid #FF9900;
}

select, input, textarea, input[type=search] {
	font-family: Arial, Helvetica, sans-serif;  
	font-size: 1.0em; 
	max-width: 85vw; /* This seems to format them nicely on mobile browsers */
	background-color: #FFFFFF;
	border: 1px solid #bbbbbb;
	padding: 3px;
	margin-top: 0px;
	border-radius: 4px;
}

.button, a.button, input.button, input[type=submit] {
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 1.1em;
	-webkit-appearance: none; /* Remove Safari's style overrides for buttons */
        text-decoration: none;
	color: #FFFFFF;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 8px;
        padding-right: 7px;
        background-color: #0099cd;
	border: 1px solid black;
	border-radius: 1em;
	cursor: hand;
	cursor: pointer;
}
*:hover.button, *:active.button, input[type=submit]:hover {
        background-color: #fec911;
	color: black;
}
input.button, input[type=submit] {
	/*margin-top: 0.5em; /* Add more vertical separation between a form submit button and it's form elements above */
}

.emform_spacing {
        display: block;
        margin-bottom: 0.6em;
}

/* Adjust the spacing around forms */
.clear_input_box {
	border: none;
        background-color: transparent;
}

/* Reset div and table widths to 100% for phones. */
.width_20, .width_30, .width_40, .width_50, .width_60, .width_70, .width_80, {
	width: 100%;
}

/* ================== /Forms and Buttons ================== */

iframe, object, embed, video {
	max-width: 100%;
	max-width: 90vw; /* = XX% of the viewport width */
	max-height: 50vh; 
}

.callout {
	padding: 1.0em;
	background-color: #FFFFFF;
        border-radius: 8px;
	text-align: left;
	border: 2px solid #0184B1;
}

.align_left {
	max-width: 100%;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}
.align_right {
	max-width: 100%;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}
.notop {
	margin-top: 0;
}

.photo_corners {
        border-radius: 8px;
}
.photo_border {
        border: 3px solid #00a2e5;
}
.oval {
	border-radius: 50%;
}

/* Styling quotes */
.quote, .quote i {
        position: relative; /* So that we can absolutely position the quote symbol */
        margin-left: 22px;
}
.quote:before {
        font-family: 'Georgia', serif;
        content: "\201C";
        color: #5b108b;
        opacity: 0.9;
        font-size: 50pt;
        position: absolute;
        left: -25px;
        top: -25px;
}

.quote_maker, .quote_maker i {
        color: #5b108b;
        text-align: right;
        margin-top: 2px;
	margin-right: 1em;
}
.quote_maker:before {
        content: "\2014 \2009";
}
/* /Styling quotes */

/* Style Lists */
ul.compact, ol.compact{
	margin-top: 0;
}
ol.large_numbers {
	list-style: none;
	counter-reset: my-counter;
	display: table;
	margin-left: -2.0em;
}
ol.large_numbers > li {
	margin-bottom: 1.5em;
	counter-increment: my-counter;
	display: table-row;
}
ol.large_numbers > li::before {
	content: counter(my-counter) ".";
	font-size: 1.5em; 
	font-weight: bold; 
	color: #e9a417;
	display: table-cell; /* This makes the left edges of subsequent lines line up */
	text-align: right;
	padding-right: 0.3em;
}
ul.expand li, ol.expand li {
	margin-bottom: 0.5em;
}
ul.align, ol.align {
	margin-left: -1.5em;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
ul.toc, ol.toc {
	margin-top: 2px;
	margin-left: 18px;
}

/* Styles to display the artists from the database */
.listing_photo {
        max-width: 90vw;
	max-height: 50vh;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}


/* Use this to hide certain elements in the mobile versions.
   omit_phone - not shown for mobile phones.
 */
.omit_phone {
	display: none;
}
/* Force a line break on mobile versions */
.break_phone {
        display: inherit;
}

/* Use this to keep images  and divs from taking up too much space */
.scale {
	max-width: 100%;
}

/* Adding display:block to the images seems to remove the 5PX bottom padding */
/* that we get on images in <td>s with HTML5 doctype                         */
/* But only do this for images within <td>s.                                 */
img {
        display: block;
}

.question {
	color: red;
        font-weight: bold;
}


/* ================================================================ */
/* Add media queries and styling for larger screen sizes            */
/* ================================================================ */

/* ======================================================================== */
/* This media query styles the site for desktop browsers */
@media all and (min-width: 750px) {  

/* The full navigation styles in "navigation.css" is included from top.ssi with a media query */

html {
        background-color: #f6f6f6;
}
body {    
	/*font-size: 13pt; adjust font size for desktop version */
        padding: 0;
}

.menu_icon, .back_icon {
	display: none;
}

/* Remove the Fixed header from the mobile version. */
.page_header {
	position: relative;
	height: 36px;
	background-image: none;
	background: linear-gradient(to top,#06a9e0,#0290c1);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 100%;
	border-bottom: none;
}
.page_header_data {
	width: 1000px;
        margin: 0px auto; /* Center the div horizontally */
	padding-top: 5px;
}
.page_header_image {
	margin-top: 0px;
}
.logo {
	display: inherit;
}
.page_data {
	max-width: 1000px;
        margin: 0px auto; /* Center the div horizontally */
        padding-top: 1.5em;
        padding-left: 2.0em;
        padding-right: 2.0em;
        padding-bottom: 2.0em;
}
.footer_contact {
	text-align: left;
}

/* These styles allow div and table widths to be responsive */
.width_20 { width: 20% !important; }
.width_30 { width: 30% !important; }
.width_40 { width: 40% !important; }
.width_50 { width: 50% !important; }
.width_60 { width: 60% !important; }
.width_70 { width: 70% !important; }
.width_80 { width: 80% !important; }
.width_auto { width: auto !important; }


/* Display stuff that is ommitted on all mobile devices */
.omit_phone {
	display: inherit;
}
.break_phone {
	display: none;
}
/* Hide stuff from the desktop version */
.omit_desktop {
	display: none !important; /*Overrides display rules in navigation.css */
}

/* ============= Specific styles for the fullscreen site ============== */

.align_left {
	margin-top: 0.8em;
	margin-right: 0.8em;
	margin-bottom: 0.8em;
	margin-left: 0;
	float: left;
	text-align: left;
}
.align_right {
	margin-top: 0.8em;
	margin-right: 0;
	margin-bottom: 0.8em;
	margin-left: 0.8em;
	float: right;
	text-align: left;
}

ol.large_numbers {
	margin-left: -1em;
}

/* Styles to display the artists from the database */
.listing_photo {
        /*max-width: 190px; Some photos are not 190px wide*/
        max-width: 300px;
	margin-top: 0;
	margin-right: 0.8em;
	margin-bottom: 0.8em;
	margin-left: 0;
	float: left;
	text-align: left;
}

/* Style the HVmusic calendar entries */
.hvmusic_date, .hvmusic_artist {
  font-size: 14pt;
}

.two-column {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 2em;
	-moz-column-gap: 2em;
	column-gap: 2em;
}
.three-column {
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 2em;
	-moz-column-gap: 2em;
	column-gap: 2em;
}
 
} /* End of media query */
/* ======================================================================== */