@import url(https://fonts.googleapis.com/css?family=Mouse+Memoirs);

/* RESET SCRIPT
---------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	font-family: 'Open Sans', arial, sans-serif;
	line-height: 1.6;
	background-color: #006394;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*MY ADDITIONS TO RESET HERE*
---------------------------------------------------*/

html {
	overflow-y: scroll;
}
/*Fixes scrollbar jump on short pages*/


/* CLEARFIX ELEMENT */
.group:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}
* html .group {
	zoom: 1;
} /* IE6 */
*:first-child+html .group {
	zoom: 1;
} /* IE7 */



/* Google Fonts Used (For Reference)
---------------------------------------------------*/
/*
font-family: 'Mouse Memoirs', sans-serif;
font-family: 'Open Sans', sans-serif;
*/



/* PAGE ELEMENTS
---------------------------------------------------*/
header {
	width: 100%;
	/*height: 360px;*/
	background-image: url(images/banner06a.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #ccc;
}

#topbar {
	width: 100%;
	background: url(images/topbar-bgnd.png) top left repeat-x;
}

#nav-wrapper {
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}

#nav {}

#bizname {
	position: absolute;
	/*margin-left: 2.333333%;*/
	padding: 0 28px;
	background-color: #ffcc00;
	font-size: 1.2em;
	line-height: 2.8;
	font-weight: 800;
	text-transform: uppercase;
	height: 100%;
}

#content-wrapper {
	width: 100%;
	background-color: #fff;
	padding: 56px 0;
}

#content {
	width: 94%;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

main {
	float: left;
	width: 73.833333%;
}


aside {
	float: right;
	width: 21.5%;
	padding-bottom: 56px;
}


footer {
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 0;
}

#bottom-map-a {
	float: left;
	width: 21.5%;
	margin-right: 4.6666%;
}
#bottom-map-b {
	float: left;
	width: 21.5%;
}
#bottom-extras {
	float: right;
	width: 47.6666%;
}

div.classday {
	margin-left: 3.160271%;
}


/* FONTS
---------------------------------------------------*/

main h1 {
	font-family: 'Mouse Memoirs', sans-serif;
	font-size: 3.5em; /*56px*/
	line-height: 1; /*56px*/
	color: #006394;
	padding: 0 3.160271%;
}

main h2 {
	font-size: 1.75em; /*28px*/
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1px;
	margin-top: 2em; /*42px*/
	margin-bottom: 1em; /*28px*/
	padding: 0 3.160271% .1em;
	border-bottom: 1px solid #FFCC00;
}

main h3 {
	font-size: 1.125em; /*18px*/
	font-weight: 700;
	color: #535353;
	margin: 1.55em 0 .38em; /*28px  7px*/
	padding: 0 3.160271%;
}	

main p {
	font-size: 1.125em; /*18px*/
	line-height: 1.875em;
	color: #535353;
	margin: 1em 0;
	padding: 0 3.160271%;
}

main p.header-subtext {
	font-size: 1.25em; /*28px*/
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1px;
	margin-bottom: 1em; /*28px*/
	padding: 0 2% .1em 3.160271%;
} 

main p.price {
	margin: .5em 0;
	padding-left: 6.320542%;
}

main h3 + p,
main h3 + p.price { margin-top: 0;}
main div.classday h3 { padding-left: 0;}

ul.pricelist,
ul.contactlist {
	list-style-type: disc;
	font-size: 1.125em;
	line-height: 1.875em;
	color: #535353;
	margin: 0 0 1em 8%;
	padding: 0 3.160271%;
}

ul.pricelist li,
ul.contactlist li {
	margin: .5em 0;
}


#bottom-map-a p, #bottom-map-b p {
	font-size: 1em;
	color: #fff;
	line-height: 1.875em;
	padding: 0 10.852713%;
}

#bottom-extras p {
	font-size: 1em;
	color: #fff;
	line-height: 1.875em;
	padding: 0 4.895105%;
	margin-bottom: 2em;
}

#bottom-map-a p.category-head,
#bottom-map-b p.category-head { 
	font-size: 1.2em; 
	font-weight: 700;
}

#bottom-map-a p.category-head:nth-child(n+2),
#bottom-map-b p.category-head:nth-child(n+2) {
    margin-top: 1.5em;   
}

#bottom-extras p.topic-head {
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: 0;
}

#bottom-extras p.copyright {
	font-style: italic;
}

p.important-note { 
	font-style: italic; 
	font-weight: 700; 
	border: 1px solid #ffcc00; 
	background-color: #ffeeab; 
	margin: 2em 4em; 
	padding-top: .5em; 
	padding-bottom: .5em;
}

p.dogname {
	color: #006394;
	font-weight: 700;
}

strong { font-weight: 700;}

	

/* IMAGES
---------------------------------------------------*/
img.dotw {
	float: left;
	margin-left: -4.160475%;
	margin-right: 4.160475%;
	margin-bottom: 4.160475%;
}

img.fblogo {
	float: right;
	margin-left: 10.852713%;
}

img.right {
	max-width: 100%;
	/* just in case, to force correct aspet ratio */
	height: auto !important;
	display: block;
	float: right;
	padding-left: 3.160271%;
	padding-bottom: 3.160271%;
}

img.rwd {
	max-width: 100%;
	display: block;
	margin: 1.5em auto;
	height: auto!important;
}


/* TABLES
---------------------------------------------------*/
table.classtbl {
	float: left;
	border: 2px solid #000;
	margin-right: 1em;
	margin-bottom: 1em;
}
.classtbl th { 
	font-weight: 700;
	text-align: left;
	padding: .75em;
	text-transform: uppercase;	
	border-bottom: 2px solid #000;
	background-color: #FFCC00;
}
.classtbl td {
	padding: .75em;
	border: 1px solid #999;
}
.classtbl td.tblcategory { font-weight: 700; background-color: #E0E0E0;}

.classtbl td.tblclosed { font-weight: 700; text-transform: uppercase; background-color: #000; color: #ffffff;}

.classtbl td.tblopen { font-weight: 700; text-transform: uppercase; background-color: #006394; color: #ffffff;}


/* LINKS
---------------------------------------------------*/
main a:link,
main a:visited,
aside a:link,
aside a:visited {
	color: #006394;
}

main a:hover,
main a:active,
aside a:hover,
aside a:active {
	color: #000;
}

footer p a:link, 
footer p a:visited { 
	color: #fff; 
	text-decoration: underline;
}

footer p a:hover, 
footer p a:active { 
	color: #ffcc00; 
	text-decoration: none;
}

footer p.category-head a:link, 
footer p.category-head a:visited,
footer p.topic-head a:link,
footer p.topic-head a:visited { 
	text-decoration: none;
}

.superawesome:link,
.superawesome:visited {
	width: auto;
	background: #006394;
	display: inline-block;
	padding: .5em 1em;
	color: #ffffff;
	font-size: 1em;
	text-decoration: none;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px solid #b2d0df;
	position: relative;
	cursor: pointer;
}

.superawesome:hover,
.superawesome:active {
	color: #ffcc00;
	border-color: #006394;
}

.nullbutton:link,
.nullbutton:visited {
	width: auto;
	background: #000;
	display: inline-block;
	padding: .5em 1em;
	color: #ffffff;
	font-size: 1em;
	text-decoration: none;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	border: 3px solid #000;
	position: relative;
	cursor: pointer;
}

.nullbutton:hover,
.nullbutton:active {
}


/* MISCELLANEOUS
---------------------------------------------------*/
div.cams-mini {
	/*padding-left: 3.160271%;*/
	margin: 2.5em 3.160271%;
}

div.cam-mini {
	float: left;
	margin-right: 2px;
	width: 160px;
}

div.cams-mini p {
	font-size: .875em;
	font-weight: 700;
	margin: 0;
	padding: 0 0 1em 0;
	text-align: center;
}

#largecam {
	width: 656px;
	margin: 0 auto;
}

.warning {
	color: #FF0000;
}

/*Responsive Google Maps Stuff*/
.embed-container {
	position: relative; 
	padding-bottom: 56.25%; 
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	max-width: 100%; 
	height: auto;
	margin: 0 3.160271%;
} 

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



/* Wufoo
---------------------------------------------------*/	
div#wufoo-zxcc9zg19cghii {
	margin: 0 3.160271%;
}


/* MAIN NAVIGATION
---------------------------------------------------*/
.nav { 
	width:100%; 
	position: relative;
}

ul.simple-toggle { 
	list-style: none;
	font-weight: 700; 
	text-align: right;
}

ul.simple-toggle li { 
	display: inline-block; 
	text-align: left; }
	
ul.simple-toggle li a { 
	display: block; 
	padding: 14px 20px; 
	text-decoration: none; 
	color: #fff; 
}

ul.simple-toggle li a:hover { 
	color: #ffcc00;
	/*background-color: #ccc;*/
}

#page-home #nav-home,
#page-about #nav-about,
#page-services #nav-services,
#page-classes #nav-classes,
#page-webcams #nav-webcams,
#page-contact #nav-contact {
	background: url(images/menu-current-bgnd.png);
}

.anchor-link { 
	display: none;
	text-align: right;
	padding: 0 1em 0;
	text-align: center;
	font-weight: 700;
	padding: 12px 15px;
	color: #006394;
	background-color: #fff;
	text-decoration: none;
	margin: 2px;
	float: right;
}

#mobile-nav { display:none; }



/* SUB NAVIGATION
---------------------------------------------------*/
.subnav ul {
	font-size: 1em;
}
.subnav li {
	background-color: #b2d0df;
	/*border-left: 7px solid #fff;*/
	margin-bottom: 2px;
}
.subnav li a {
	display: block;
	font-weight: 700;
	color: #006394;
	text-decoration: none;
	padding: 1em 10.852713%;
}
.subnav li a:hover {
	color: #000;
	background-color: #FFCC00;
}
.subnav li#current {
	/*border-left: 7px solid #006394;*/
	background-color: #006394;
}
.subnav li#current a:link,
.subnav li#current a:visited {
	color: #fff;
}
.subnav li#current a:hover,
.subnav li#current a:active {
	color: #fff;
	background-color: #006394;
}



/* CAMERAS
---------------------------------------------------*/
#camera1, #camera2 {
	max-width: 1280px;
}

#camera3, #camera4, #camera5, #camera6 {
	max-width: 640px;
}

.video-wrapper {
	width: 100%;
	margin: 0 auto;
}

.video-wrapper > div {
	position: relative;
}

.video-wrapper.sixteen-nine > div {
	padding-top: 56.25%;
}

.video-wrapper.four-three > div {
	padding-top: 75%;
}

.video-wrapper > div > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* MEDIA QUERIES
---------------------------------------------------*/

@media screen and (max-width:960px) {
	
ul.simple-toggle { display: none; }

.anchor-link, #mobile-nav { display: block; }

ul.open { 
    background-color: #006394;
    box-shadow: 2px 2px 3px #444444;
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 100%;
    width: 70%;
    z-index: 500; 
}

ul.open li { display: block; list-style: none; text-align: center; }
ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #fff; text-decoration: none; }
ul.open li a:hover { background-color: #006394; color: #ffcc00; }
	
}

@media screen and (max-width:900px) {
	
	main { 
		float: none;
		width: 100%;
	}
	
	aside {
		float: none;
		width: 100%;
		padding-top: 56px;
	}
	
	main h1,
	main h2,
	main h3 {
		padding: 0 2.333333%;
	}
	
	main p {
		padding: 0 2.333333%;
	}
	
	.subnav li a {
		padding: 1em 2.333333%;
	}
	
	#bottom-extras {
		float: right;
		width: 60.75%;
	}
	
	#bottom-map-a {
		float: left;
		width: 34.58333%;
		margin-right: 0;
	}
		
	#bottom-map-b {
		float: left;
		clear: left;
		width: 34.58333%;
	}
	
	#bottom-map-a p, #bottom-map-b p {
		padding: 0 6.746988%;
	}

	#bottom-extras p {
		padding: 0 3.840878%;
	}
	
	#bottom-map-b p.category-head:first-child {
		padding-top: 1.5em;
	}
	
	div.cams-mini {
		/*padding-left: 3.160271%;*/
		margin: 2.5em 2.333333%;
	}
	
	p.important-note {
		margin-right: 5%;
		margin-left: 5%;
	}
	
}


@media screen and (max-width:500px) {
	
	#bottom-extras {
		float: none;
		width: auto;
	}
	
	#bottom-map-a,
	#bottom-map-b {
		float: none;
		width: auto;
	}
	
	#bottom-map-a p, #bottom-map-b p {
		padding: 0 2.333333%;
	}

	#bottom-extras p {
		padding: 0 2.333333%;
	}
	
	table.classtbl {
		float: none;
		width: 100%;
	}
	
	div.cam-mini {
		float: none;
		margin: 0 auto;
	}
	
}