html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

header, section, footer, aside, nav, main, article, figure { display: block; }

body {  line-height: 1.5em; color: #333; background: url(images/bg.gif) repeat; font-family: "PT Sans Narrow","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif; font-size: 1em; }

p { ; }

h1, h2, h3, h4, h5, h6 { font-family: inherit; line-height: 1em; color: inherit; text-rendering: optimizelegibility;  word-wrap: break-word; font-weight: normal; }
h1 { font-size: 2.6em; margin: 3% 2% .4% 2%; }
h2 { font-size: 1.8em; margin: 1.5% 2% .4% 2%; }
h3 { font-size: 1.5em; margin: 1.5% 2% .4% 2%; }
h4 { font-size: 1.2em; margin: 1.5% 2% .4% 2%; }

a:hover, a:active { outline: 0; }
a { color: #0088cc; text-decoration: none; font-weight: bold; }
a:focus {  outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
a:hover { color: #005580; text-decoration: underline; }

h2 a { font-weight: normal; color: #333; }
h3 a { font-weight: normal; color: #333; }

#page-container { margin-right: auto; margin-left: auto; background-color: #fff; *zoom: 1; overflow: hidden; }

img { width: auto\9; height: auto; max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }

.fine-print { font-size: 0.8em; }

.clear { clear: both; *zoom: 1; }

header h1 { font-size: 2.6em; margin: 1% 2% .4% 6%; }
header h2 { font-size: 1.8em; margin: .5% 2% .4% 6%;; }

#title { float: left; }

#current-weather { float: right; width: 21%; margin: 0 2%; }
#current-weather img { ; }
#current-weather h3 { text-align: center; }
#current-weather p { ; }
.weather-icon { ; }
.weather-data-container { margin: auto; position: relative; }
.weather-data { ; }
.temp { font-size: 3em; position: absolute; left: 1.2em; top: .2em; }
.condition { font-size: 1.1em; position:absolute; left: 3.7em; top: 2.3em; }

#primary-content { float: left; width: 75%; margin-top: 1em; }
/*#primary-content { float: left; width: 75%; background: #FAEEF6; }*/
#primary-content p { float: left; margin: 1em 6%; } 

#cam-container { margin-right: auto; margin-left: auto; max-width: 800px; background: #BBC5E3; }

#social-container { margin: 0 10%; }

#travel-info { float: right; width: 25%; }
#travel-info p { line-height: 1.2em; margin: .2em 0 .6em; }
#travel-info img { margin: 0; }
#travel-info ul { margin: 1em 0 2em; }
#travel-info li { margin-top: 2em; }

/*Coffee Banner*/
.coffee-banner { text-align: center; }
.coffee-banner img { border: 1px solid black; margin: 5px 10px 0; }
.coffee-banner img:hover {  box-shadow: 0 0 10px #000;  }

.travel-info-list { width: 90%; margin-right: auto; margin-left: auto; margin-top: 1em; }

.google-leaderboard-reponsive-ad { margin: auto; padding: 0 3em; }

.google-maps { position: relative; padding-bottom: 75%; // This is the aspect ratio height: 0; overflow: hidden; width: 90%; margin-left: auto; margin-right: auto; }
.google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

#videos { float: left; width: 25%; text-align: center; margin-top: 1em; }
#videos h2 { margin: .5em 0 .5em 0; }
#videos h3 { margin: .1em 0 .5em 0; }
#videos img { width: 45%; margin: auto; }

#disqus-container { float: right; width: 48%; margin-right: 2%; text-align:center; }


.video-link {opacity:.85; position: relative; display: inline-block; margin: 5% 10% 1%; position: relative; }
.video-link:hover { opacity: 1; }

.play { background: url('/homepage-images/play-button.png') center center no-repeat; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; z-index: 10; pointer-events: none; }


.xvideo-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
	padding: 0 10%;
}

.xvideo-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 60%;
}
.video-container iframe {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}

footer { clear: both; text-align: center; }

footer li { display: inline-block; padding: 0 1em; }
footer ul a { }
footer a {  width: 30%; }

/*mobile styles*/ 
@media only screen and (max-width:480px) {
body { font-size: 1em; }
#page-container { width: 100%; }
h1 { font-size: 2em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }

#title { float: none; width: 100%; text-align: center; }
#current-weather { float: none; width: 100%; }
.weather-data-container { width: 40%; }
#cam-container { max-width: 480px; }
#primary-content { float: none; width: 100%; }
#travel-info { float: none; width: 60%; margin: 0 20%; }
#videos { float: none; width: 60%; margin: 1em 20% 0; }
#disqus-container { float: none; width: 90%; margin: 5%; }

	}

/*tablet styles*/
@media only screen and (min-width:481px) and (max-width:900px) {
#page-container { width: 100%; }
#title { float: none; width: 100%; text-align: center; }
#current-weather { float: none; width: 100%; }
#primary-content { float: none; width: 100%; }
#travel-info { float: none; width: 60%; margin: 0 20%; }
.weather-data-container { width: 30%; }
#cam-container { max-width: 480px; }
#videos { float: none; width: 60%; margin: 1em 20% 0; }
#disqus-container { float: none; width: 90%; margin: 5%; }
	}

/*desktop styles*/
@media only screen and (min-width:901px) and (max-width:1200px) {
#page-container { width: 100%; }
#title { width: 70%; }
#current-weather { float: right; width: 26%; margin: 0 2%; margin-top: 1%; }
.weather-data-container { width: 65%; }
#cam-container { max-width: 640px; }
	}

/*large display styles*/
@media only screen and (min-width:1201px) {
#page-container { width: 1200px; }
#title { width: 75%; }
#current-weather { width: 21%; margin: 0 2%; margin-top: 1%; }
.weather-data-container { width: 70%; }
#cam-container { max-width: 800px; }

	}