/* Resets */
body, ul#nav, ul#nav li, #header h1, .sidebar h3, #benefits ul, ul#bottomNav, #footer ul, #footer li {margin:0; padding:0;}
ul.nav, ul#nav, ul#bottomNav, #footer ul, .content ul { list-style:none; }
a {border:none; outline:none;}
/* end Resets */

body {background:#00baf3 url(../img/bg-water.jpg) no-repeat center 155px; background-size:100%; }
#wrapper {width:100%; position:relative;}
#header {width:100%; background-color:#fff; min-height:155px; box-shadow: 0 4px 8px #acdcf5, inset 0 -4px 6px #e1f0f8; text-align:center;}
#header #logo {position:relative; width:234px; height:114px; margin:0 auto 5px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url(../img/aquadogLogo.png) no-repeat;}
#header h1 { color:#005aab; margin:-8px 0 0; }
#footer { margin-top:20px; text-align:center; color:#0078b8; font-size:11px; }
#footer a { color:#0078b8; }
#footer li { display:inline; background:url(../img/pawRollover.png) no-repeat -1px -184px; padding:2px 0 2px 25px; }
#footer li:first-child { background:none; margin-left:0; padding:0; }
#footer .copyright { margin-top:8px; }
ul.nav {position:relative; z-index:100; overflow:hidden; text-align:center; margin-top:-14px; }
ul.nav li {display:inline;margin-left:20px;}
ul.nav li:first-child {margin-left:-40px;}
ul.nav li.active a,
ul.nav li a {display:inline-block; padding:3px 8px 3px 22px; color:#0082c7; font-weight:bold; text-decoration:none; -webkit-transition:background-color 0.1s ease-out; -moz-transition:background-color 0.1s ease-out; -o-transition:background-color 0.1s ease-out; -ms-transition:background-color 0.1s ease-out; transition:background-color 0.1s ease-out;}
ul.nav li.active a,
ul.nav li a:hover {background:#12bc00 url(../img/pawRollover.png) no-repeat 0 -227px; color:#fff; -moz-border-radius:4px; border-radius:4px; -webkit-transition:background-color 0.3s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out; -ms-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out;}
ul.nav li.mobile { display:none; }
.content {position:relative; margin:20px auto 10px; width:92%; max-width:718px; border-radius:5px; overflow:hidden; padding:0 25px 20px; color:#333;
background: rgb(244,251,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(244,251,255,1) 0%, rgba(179,230,251,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,251,255,1)), color-stop(100%,rgba(179,230,251,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(244,251,255,1) 0%,rgba(179,230,251,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(244,251,255,1) 0%,rgba(179,230,251,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(244,251,255,1) 0%,rgba(179,230,251,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(244,251,255,1) 0%,rgba(179,230,251,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4fbff', endColorstr='#b3e6fb',GradientType=0 ); /* IE6-9 */
}
.content h2 { margin:10px 0; text-align:center; }
.content li { background:url(../img/pawRollover.png) no-repeat top left; margin-bottom:5px; padding-left:20px; line-height:18px; }

/*--Home--*/
#home.content { padding-bottom:10px; }
#home p {clear:both;}
.photo {float:left; position:relative; overflow:hidden; }
.photo.hp img { width:100%; }
.photo .caption {position:absolute; width:100%; bottom:3px; left:0; background-color:rgba(0,0,0,0.5); text-align:center; padding:10px; }
.caption span { color:#fff; font-weight:bold; }
.sidebar {float:right; width:242px; background:#fff; -moz-border-radius:5px; border-radius:5px; text-align:center;}
.sidebar #testimonials {padding:10px;}
.sidebar #testimonials h3 {padding:0 0 10px; }
.sidebar #testimonials .testimonial p {padding:2px 0;}
#home .scrollable { position:relative; overflow:hidden; width:220px; height:206px; }
#home .scrollable .items { width:20000em; position:absolute; }
#home .items div { float:left; width:220px; text-align:left; line-height:16px; }
#home .items div a { display:block; text-decoration:none; color:#333; background-color:#fff; /*-webkit-transition:background 0.3s ease-out; -moz-transition:background 0.3s ease-out; -o-transition:background 0.3s ease-out; -ms-transition:background 0.3s ease-out; transition:background 0.3s ease-out;*/ }
#home .items div a:hover { /*background-color:#eeffd1; -webkit-transition:background 0.3s ease-in; -moz-transition:background 0.3s ease-in; -o-transition:background 0.3s ease-in; -ms-transition:background 0.3s ease-in; transition:background 0.3s ease-in;*/ }
#home .items div span { text-decoration:underline; font-size:11px; }
.share { margin:-10px 0 10px; text-align:center; }

/*--Benefits--*/
#benefits .photo {float:right; margin:5px 0 0 5px;}

/*--Conditions--*/

/*--Testimonials--*/
#testimonials div.section { border-top:1px solid #bbb; }
ul#nav { margin-bottom:5px; padding-bottom:10px; overflow:hidden; border-bottom:1px solid #ccc; }
ul#nav li { float:left; margin-right:20px; padding:5px 0 5px 20px; -moz-border-radius:5px; border-radius:5px; background-position:2px 3px; }
ul#nav li.active { /*background-color:#12bc00;*/ text-decoration:underline; font-size:21px; }
ul#nav li a { color:#0082c7; font-weight:bold; text-decoration:none; }
ul#nav li a:hover { text-decoration:underline; }

.scrollable.vertical { position:relative; width:100%; height:670px; overflow:hidden; }
.scrollable.vertical .items { height:20000em; position:absolute; }
.scrollable.vertical .items div { float:none; width:670px; height:670px; }

/*--About--*/
#about .photo {float:right; margin:5px 0 0 5px;}

/*--Contact--*/
#contact { padding-top:18px; }

/*--Misc--*/
#phoneNav, 
ul#bottomNav { display:none; }

/*-- Typography REM and pixel fallback
------------------------------------------------------*/
body { font:normal 100% Arial, sans-serif; }

#header h1, 
.content h2 { font-size:21px; font-size:1.313rem; }
ul.nav { font-size:18px; font-size:1.125rem; }
.content { font-size:14px; font-size:0.875rem; }
.caption span { font-size:14px; font-size:0.875rem; }
.sidebar #testimonials h3 {font-size:16px; font-size:1.000rem;}
#home .items div,
#footer span { font-size:12px; font-size:0.750rem; }

/*-- Tablets 
------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	/*body::before { content: "Tablet media query (768 < 1024) fired"; font-weight:bold; display:block; text-align:center; background:rgba(255,255,0,0.9); position:absolute; top:0; left:0; right:0; z-index:99; }*/
	ul.nav li.desktop { display:none; }
	ul.nav li.mobile { display:inline-block; }
}

/*-- Phones 
------------------------------------------------------*/
@media only screen and (min-width: 320px) and (max-width: 480px) {
	body { background-image:none; min-height:500px; }
	/*body::before { content: "Phone media query (320 < 480) fired"; font-weight:bold; display:block; text-align:center; background:rgba(255,255,0,0.9); position:absolute; top:0; left:0; right:0; z-index:99; }*/
	#header { min-height:104px; padding-top:5px; overflow:hidden; }
	#header #logo { width:150px; height:73px; background:url(../img/aquadogLogo_small.png) no-repeat; }
	#phoneNav { display:block; float:right; padding:3px 5px 5px; margin-right:5px; border:2px solid #004F02; -moz-border-radius:8px; border-radius:8px;
	background: rgb(180,221,180);
	background: -moz-linear-gradient(top,  rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 46%, rgba(0,84,5,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(46%,rgba(82,177,82,1)), color-stop(100%,rgba(0,84,5,1)));
	background: -webkit-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 46%,rgba(0,84,5,1) 100%);
	background: -o-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 46%,rgba(0,84,5,1) 100%);
	background: -ms-linear-gradient(top,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 46%,rgba(0,84,5,1) 100%);
	background: linear-gradient(to bottom,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 46%,rgba(0,84,5,1) 100%);
	 }
	#phoneNav a { color:#fff; font-size:12px; font-weight:bold; text-decoration:none; }
	.content { width:94%; margin:5px auto; padding:0 8px 10px; }
	.photo { float:none; margin:0 auto; }
	ul#bottomNav { display:block; width:100%; margin-top:100em; min-height:550px; }
	ul#bottomNav li { padding:5px 15px; border-top:1px solid #ccc; }
	ul#bottomNav li:first-child { border-top:none; }
	ul#bottomNav a { display:block; color:#eaeaea; text-decoration:none; font-size:21px; font-size:1.313rem; }
	#footer { font-size:12px; }
	#footer ul { width:215px; margin:0 auto; }
	#footer li { display:block; padding-left:0; background:none; text-align:left;}
	#footer li:first-child { padding-left:0; }

	.content h2 { font-size:1.125rem; margin:8px 0 -4px; }

	#benefits ul { margin:10px 20px; }
	#benefits li { line-height:18px; }

	.scrollable.vertical {  height:890px; }
	.scrollable.vertical .items div { float:none; width:100%; height:auto; }
	ul#nav li { float:none; margin:8px 0 0; padding:0; }

	#about .photo { float:none; margin:0; border:1px solid red; }

	ul.nav, 
	.sidebar, 
	#benefits .photo { display:none; }
	/* Testimonials M */
	ul#mobileNav { }
	p.top { font-size:11px; color:#0082c7; }
}