/*************************************************************************************************/
/* (C) 2014-2019 Iterum, LLC. All rights reserved. Iterum.llc.                                        */
/*-----------------------------------------------------------------------------------------------*/
/* This file contains css classes that are specific to the wbskiing.com website.                 */
/* See iterum.grid.*.css and iterum.core.css, too!                                               */
/* This has VERY similar classes to the other site-specific css files.                           */
/*************************************************************************************************/

/*************************************************************************************************/
/*************************************************************************************************/
/* Redefined Main CSS Selectors                                                                  */
/*************************************************************************************************/
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
/* Always force the display of the vertical scrollbar so the layout doesn't shift left when the  */
/* scrollbar appears. Not a great solution, but it seems to be the common solution.              */
/* js at http://www.johnpezzetti.com/2011/01/31/removing-vertical-scrollbar-jump-shift-problem-a-javascript-fix-for-all-browsers */
/* I remove code this in ccweather.com, because I can handle the shift. */

html{
	overflow-y: scroll;
	/*todo0: Is this required? In the desktop map? Other sites don't have this*/
}

/*-----------------------------------------------------------------------------------------------*/
h1 {
	font-size: 24px;
	font-weight: bold;
	color: #ee962d;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #ee962d;
	margin-top: 10px; /* Increase the space before the h1 style. */
	margin-bottom: 4pt;	/* Don't space below the heading style. */
}

/*-----------------------------------------------------------------------------------------------*/
h2 {
	font-size: 21px;
	font-weight: bold;
	color: #ee962d;
	margin-top: 8pt;	/* Limit space before the h2 heading style. */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #ee962d;
	margin-bottom: 2pt;	/* Limit space after the h2 heading style. */
}

/*-----------------------------------------------------------------------------------------------*/
h3 {
	font-size: 17px;
	font-weight: bold;
	color: #ee962d;
	margin-top: 8pt; /* Limit space before the h2 heading style. */
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #666666;
	margin-bottom: 2pt;	/* Limit space after the h2 heading style. */
}

/*************************************************************************************************/
/* Header class
/*-----------------------------------------------------------------------------------------------*/
/* The Header contains the logo and menu bar. It changes based on it's width.                    */
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
header{
    width: 100%;
    height: 60px; /* Height of the toolbar. */
    background: #888888; /* Color of the toolbar. */
}

/*-----------------------------------------------------------------------------------------------*/
/* When the window becomes narrow, switch to a vertical menu. Define new colors in that menu.    */
/* Determine this constant (used in many places) by narrowing the window until the standard menu */
/* items no longer fit.                                                                          */
@media (max-width:790px){
    header nav ul li a{
        display: block;
        width: 100%;
        padding: 20px 0;
    }
    header nav ul li a:active{
        display: block;
        width: 100%;
        padding: 20px 0;
        background: #2c2c2c;
    }
}

/*-----------------------------------------------------------------------------------------------*/
/* The logo on the left side of the header.                                                      */
header .logo{
    float: none;
    margin-left: 20px;
}

/* Remove the logo's left margin when the window is very narrow.                                 */
@media (max-width:500px){
    header .logo{
    	margin-left: 0;
    }   
}

/* Hide the logo if the screen is extremly narrow.                                               */
@media (max-width:300px){
    header .logo{
        display:none;
    }   
}

/*-----------------------------------------------------------------------------------------------*/
/* Menu icon. Normally hidden*/
header .menu_icon{
    width: 35px;
    height: 35px;
    background: url('../images/menu_icon.png') no-repeat;
    float: right;
    margin-top: 13px;
    display: none; 
}

/* Display the menu icon when the window gets narrow. The Nav bar gets hidden elsewhere. */
@media (max-width:790px){
    header .menu_icon{
        display: block;
    }
}

/* This has an onclick() handler in main.js. It displays the nav bar. The "nav." is required. */
@media (max-width:790px){
    header nav.show_menu{ 
        display: block;
    }
}

/*-----------------------------------------------------------------------------------------------*/
/* Hide the "Home" option in the wide (horizontal) menu to save space. Show it in the narrow     */
/* (vertical) menu). This isn't very logical, because it's needed in both cases, but it's easy to*/
/* show in the vertical menu.                                                                    */
.menuHome{
	display: none; /* Default is hidden in the horizontal menu. */
}

@media (max-width:790px){
    .menuHome{
		display: block; /* Display Home in the vertical menu. */
	}
}

/*-----------------------------------------------------------------------------------------------*/
header nav{
    overflow: hidden;
    display: inline-block;
    margin: 10px 0 0 20px; /* Note that the margin is outside of all menu items and the vertical line. */
    padding: 13px 0; /* top/bottom and left/right padding around outside of menu items. left/right affects space between vertical ine and first menu item. */
    border-left: 1px #404040 solid; /* Vertical line between logo and menu items. */
    z-index: 9999;
    vertical-align:top;
}

/* Hide the menu when the screen gets narrow. */
@media (max-width:790px){
    header nav{
        background: #353434;
        margin: -10px 0 0 0;
        padding: 0;
        border-left: 0;
        border-top: 1px #2c2c2c solid;
        overflow: hidden;
        text-align: center;
        position: relative;
        z-index: 9999;
        display: none;
    }
    /* edtr: I don't think this is working. I suspect it is supposed to make the vertical menu have radius. */
    header nav{
        -webkit-border-bottom-left-radius: 2px; 
        -moz-border-bottom-left-radius: 2px; 
        -o-border-bottom-left-radius: 2px; 
        -border-bottom-right-radius: 2px; 
        -webkit-border-bottom-right-radius: 2px; 
        -moz-border-bottom-right-radius: 2px; 
        -o-border-bottom-right-radius: 2px; 
        -border-bottom-left-radius: 2px; 
    }
}

header nav ul{
    list-style: none;
    margin-left: 0; /* This is the space between the vertical line left of the menu items and the first menu item. */
}

header nav ul li{
    float: left;
    margin-left: 25px; /* Horizontal space between menu items */
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
}

@media (max-width:790px){
    header nav ul li{
        margin: 0;
        width: 100%;
        border-bottom: 1px #2c2c2c solid;
    }
}

@media (max-width:790px){
    header nav ul li:last-child{
        border-bottom: 0;
    }
}

/*---------------------------------------------*/
header a {
    text-decoration: none;
    color: #ffffff
}

header a:link {
    text-decoration: none;
    color: #ffffff
}

header a:visited {
    text-decoration: none;
    color: #ffffff
}

header nav ul li a {
    text-decoration: none;
	color: #1155cc /* Google's link color */
}

header nav ul li a:hover{
	color: #1155cc /* Google's link color */
}

.outer_frame {
	background: #fff;
}

.outer_frame .box_quote{
	text-align: center;
	font-size: 110%;
	font-style: italic;
	color: #999999; /* This is also the color of headings */
}

.outer_frame .box_subhead_large{
    margin-bottom: 0;
    color: #ee962d; /* Text color of headings */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px; /* Add this space between characters. */
}

/* Retain heading color for headings with links. */
.outer_frame .box_subhead_large a { 
    text-decoration: none;
    color: #ee962d; /* Text color of headings */
}

/* Simply underline links on hover. */
.outer_frame .box_subhead_large a:hover { 
    text-decoration: underline;
} 

/*---------------------------------------------*/
/* THIS IS USED. */
.outer_frame .box_onethird_callout{
    display: block;
    width: 27%;
    height: auto;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    
    font-family: Arial, Helvetica, sans-serif;
    background-color: #eeeeee; /* color of callout box */
    border: thin #aaaaaa solid;
    border-radius: 5px;
}

/* Increase the box_onethird_callout block to 100% on smaller screen. */
@media (max-width:790px){
    .outer_frame .box_onethird_callout{
        width: 100%;
        margin-right: 0!important;
        float: left;
    }
}

.box_onethird_callout p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-decoration: none;
    
	margin: 5px; /* Padding round text in the one-third box */
}

.box_onethird .box_onethird_icon{
    float: left;
    width: 18%; /* Icon width as a percent so it shrinks with box. */

    margin-right: 3%; /* Space between icon and text (or heading). */
    padding: 3px;
}

/*************************************************************************************************/
/*************************************************************************************************/
/* Footer, Copyright, etc                                                                        */
/*************************************************************************************************/
/*************************************************************************************************/

/*-----------------------------------------------------------------------------------------------*/
footer{
    padding: 5px 0 0 0;
    border-top: 1px #dedede solid;
    border-bottom: 1px #dedede solid;
    color: #222222; /* Text color used throughout website. */
    background: #f9f9f9;
    text-align: center;
	margin-left: auto; /* Center footer */
    margin-right: auto; /* Center footer */
}

/*-----------------------------------------------------------------------------------------------*/
footer .copyright{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8pt;
}

.bottomPadding{
    margin-bottom: 500px; /* Large padding at bottom of page so we can link to bookmarks that are low on the page. */
}

/*-----------------------------------------------------------------------------------------------*/
.noJavascript{
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px; /* A trick to center one line vertically. Must be same as the height. */

	background-color:red;
	color: white;
	
    font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	text-align: center;
}

/*-----------------------------------------------------------------------------------------------*/
.statusMessage {
	display: block;
	width: 100%;
	height: 25px;
	line-height: 25px; /* A trick to center one line vertically. Must be same as the height. */

	background-color: #ee962d; /* A more subtle color: #dddddd; */
	color: #333333;
	
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;

	border-width: 1px;
	border-style: solid;
	border-color: #999999;
		
    font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-align: center;
}

/* Hide the logo if the screen is extremely narrow.                                               */
@media (max-width:790px) {
	.statusMessage {
		display: none;
	}
}

ol, ul {
	margin-left: 30px;
}

.calloutText p {
	font-style: italic;
	text-align: center;
	font-size: 20px;
}