@charset "utf-8";


/* CSS for Doggiebox 2.0 web site, August 2011. ben@zygoat.ca. */


/* Pull in some free font action. */

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

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 16, 2011 */
@font-face {
	font-family: 'GoodDog';
	src: url('./images/fonts/GoodDog.otf');
/*
	src: url('./images/fonts/gooddp__-webfont.eot');
	src: url('./images/fonts/gooddp__-webfont.eot') format('embedded-opentype'),
		 url('./images/fonts/gooddp__-webfont.woff') format('woff'),
		 url('./images/fonts/gooddp__-webfont.ttf') format('truetype');
*/
	font-weight: normal;
	font-style: normal;
	}


body {
	background: #006587;
	color: #eee;
	font-family: Actor;
	margin: 0;
	}


/****** Body parts *******/

#Body {
	margin-top: -30px;
	padding: 25px;
	}

h1, h2, h3 {
	font-family: "GoodDog", sans-serif;
	font-weight: normal;
	}
h1 {
	font-size: 36px;
	}
h2 {
	font-size: 30px;
	}
h3 {
	font-size: 24px;
	}


p {
	font-size: 16px;
	}

li {
	padding-bottom: 5px;
	}

a:link {
	color: white;
	}

a:visited {
	color: #ddd;
	}

aside#Testimonial {
	background: #128ecc;
	padding: 25px;
	}

footer {
	color: #ccd;
	border-top: 5px solid #f9fc4d;
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 10px;
	line-height: 1.4em;
	clear: both;
	}
footer a:link,
footer a:visited {
	color: #dde;
	}
footer img {
	margin: -4px 0 0 -5px;
	}

span.qm {	
	font-family: times, serif;
	font-size: 24px;
	}

/* For ballsier quotation marks for testimonial citations. */
q:before, q:after {
	font-family: times, serif;
	font-size: 24px;
	position: relative;
	top: 4px;
	}
q:before {
	content: '“';
	}
q:after {
	content: '”';
	}
q {
	line-height: 1.0em;	/* compensate for the wacky line-height resulting from the 24px quotation marks. */
	}


/* Common side padding for various bodily elements. */		

#Body, aside#Testimonial, footer {
	padding-left: 40px;
	padding-right: 40px;
	}


/******** Page header *********/		

header {
	}
	
#HeaderTop {
	background: url(images/BeatBack.jpg) -55px 0;
	height: 96px;
	border-bottom: 5px solid #f9fc4d;
	}

#HeaderBottom {
	height: 30px;
	}

#HeaderContentContainerOuter {
	position: absolute;
	top: 0;
	width: 100%;
	text-align: center;
	}

#HeaderContentContainerInner {
	display: inline-block;
	white-space: nowrap;	/* prevent the logo, etc. from shunting to newline if the window is small. */
	margin: 0 
	}
	
#HeaderContent {
	display: inline-block;
	float: left;
	padding: 20px;
	text-align: center;
	}

img#HeaderTextMark {
	margin: -10px 0 6px 0;
	}
	
img#HeaderLogo {
	position: relative;
	top: 10px;
	}



#HeaderMenu ul {
	margin: 0;
	padding: 0;
	}
#HeaderMenu li {
	list-style-type: none;
	display: inline;
	}

/* Style up the sausage links in the main menu. */
#HeaderMenu a:link,
#HeaderMenu a:visited {
	color: #eee;
	background: #00769B;
	text-decoration: none;
	font-size: 18px;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 6px 9px 6px 9px;
	border: 1px solid #889;
	border-radius: 7px;
	margin: 0 1px 0 1px;
	}

/* Make "download" and "buy" a little more psychologically green. */
#HeaderMenu a:link[href$="download.php"],
#HeaderMenu a:link[href$="buy.php"],
#HeaderMenu a:visited[href$="download.php"],
#HeaderMenu a:visited[href$="buy.php"] {
	background: #9C5066; /*#008d95;*/
	}

a:hover,
#HeaderMenu a:hover,
#HeaderMenu a.current {
	color: #f9fc4d;
	}
#HeaderMenu a:hover {
	text-decoration: underline;
	}


/* Nifty jank for the fadey borders. */

#SchoolLeft, #SchoolRight {
	position: fixed;
	top: 0;
	height: 100%;
	width: 36px;
	z-index: 0;
	}

#SchoolLeft {
	left: 0;
	background: url(./images/FadeSchoolLeft.png) left repeat-y;
	}

#SchoolRight {
	right: 0;
	background: url(./images/FadeSchoolRight.png) right repeat-y;
	}



/* Styling for pop-up screenshot images. */

a.FancyBox img {
	border: 1px solid #093d58;
	}
a.FancyBox:hover img {
	border: 1px solid #f9fc4d;
	}