@charset "UTF-8";
/* CSS Document */

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, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 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 {
	line-height: 1;
	font-family: 'Open Sans', sans-serif !important;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


.general {background-color:#a6843b;}
.ks2 {background-color:#eb453b;}
.ks3 {background-color:#c6ebfd;}
.ks4 {background-color:#e4ab26;}
.ks2-50 {background-color:#ff7a6c;}
.ks3-50 {background-color:#ddf4ff;}
.ks4-50 {background-color:#f8d87a;}

h1 {font-size:28px; font-weight: 700; padding:20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; margin:10px; }
h2 {font-size:24px; font-weight: 700; padding:20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; margin:10px; }
h3 {font-size:20px; font-weight: 700; padding:20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; }

.clearMe {clear:both;}


a {text-decoration:none;}


p {font-size:14px; margin:20px;}
p a {color:#eb453b; font-weight:400;}

.w1200 {max-width:1200px; height:auto; margin:0px auto 0px auto;}


.bgDarkGrey {background-color:#2b2b2b;}
.bgLightGrey {background-color:#cccccc;}
.bgWhite {background-color:#FFF;}
.white {color:#FFF;}
.grey {color:#999;}
.credit {font-size:11px !important;}
.fleft {float:left;}
.two-thirds {width:59%;}
.one-third {width:29%;}
.one-half {width:50%;}
.poemCont {width:68%;}
.noBorder {border:none !important;}
.topCorners { 

-moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; -khtml-border-radius: 10px 10px 0px 0px;
}

strong {font-weight:400 !important;}

.bigButton {background-color:#CCC; margin:20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; box-shadow: 2px 2px 0px #888888;}


#header {height:auto;}
#header img{margin:20px; float:left; width:50%;}
#level {float:right; margin:20px; width:8%; padding:5px 0px 0px 0px;}
#level img {width:100%; height:auto; margin:0px; padding:0px;}

#toolbar {padding:0px 10px 0px 10px; height:auto;}
#toolbar ul {}
#toolbar li {float:left; margin:0px 10px 0px 10px; padding:0px;}
#toolbar img {width:50px; height:50px; padding:10px 0px 10px 0px; margin:0px; }

.toolBt {background-color:#2b2b2b; width:15%; text-align:center; display:inline-block; float:right;  margin:0px 0px 0px 0px; padding:52px 20px 52px 20px; color:#FFF; font-size:28px; font-weight:normal;}
.toolBt a {color:#fff; display:block;}

.tooltip {
	display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#2b2b2b;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px;
}


#dylanPhoto {width:10% !important; float:right; padding:0px 30px 0px 20px;}
#dylanPhoto img {width:100%; height:auto;}

#content {padding:10px 0px 20px 0px;}

.iconBox {text-align:center; font-weight:700; width:100%; margin:30px 0px 30px 0px;list-style-type:none; text-align:center; } 
.iconBox li {max-width:15%; display:inline-block; margin:20px; vertical-align:top;}
.iconBox img {margin:0px 0px 20px 0px; width:100%; height:auto;}
.iconBox.four li {max-width:20%; margin:15px;}

.ksBox { font-weight:700; padding:20px 0px 20px 0px; width:100%; font-size:20px; }
.ksBox ul {list-style-type:none; text-align:center;}
.ksBox li {width:20%; display:inline-block; margin:20px; vertical-align:top;}
.ksBox img {margin:0px 0px 20px 0px; width:100%; height:auto;}

.itemBox {width:47%; margin:10px; display:inline-block; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; background-color:#ebebeb; text-align:left; vertical-align:top; }
.itemBox img {float:left; margin:20px; width:100px; height:auto;}
.itemBox h3 {font-size:22px; margin:0px; padding:28px 20px 20px 0px;}
.itemBox a {color:#eb453b;}
.itemBox li {display:inline-block; margin:0px 10px 0px 0px;}
.itemBox p {margin:0px; padding:0px 20px 20px 0px;}
.lastBox {float:left;}

#poem {background-color:#f2e2be; margin:10px; padding:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px; font-family: 'Vollkorn', serif;}
#poem p {font-size:22px; line-height:26px;}

#sidebar { -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; border-radius: 0px 0px 10px 10px; -khtml-border-radius: 0px 0px 10px 10px; background-color:#ebebeb; margin:0px 10px 10px 10px; padding:10px;}
#sidebar .itemBox {width:94%; border-bottom:1px dotted #999;  -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -khtml-border-radius: 0px; padding:0px 0px 10px 0px; margin:10px 10px 0px 10px;}
#sidebar h3 {font-size:18px; margin:0px; padding:0px 0px 10px 0px;}
#sidebar p {margin:0px 0px 10px 0px; padding:0px;}
#sidebar a {font-size:14px;}
#sidebarHead {margin:10px 10px 0px 10px;}

#footer {padding:20px 0px 20px 0px;}
#footer p {font-size:11px; color:#CCC; margin:0px 20px 20px 20px; line-height:18px;}
#footer h2 {font-size:14px; color:#CCC; background:none; padding:0px 20px 10px 20px; margin:0px;}
#footer h3 {font-size:13px; color:#CCC; background:none; padding:0px 20px 10px 20px;}
#footer ul {padding:10px 0px 20px 30px; list-style-type:disc;}
#footer li {color:#CCC; font-size:11px;}
#footer strong {font-weight:bold;}
#footer img {width:40%; height:auto; margin:10px 10px 20px 10px;}
#footer .one-third{margin:10px;}
#footer .dt100 {width:50%;}

#footer ul.footerLogos {list-style-type:none; margin:0px; padding:0px;}
#footer ul.footerLogos li {float:left; width:30%; margin:0px 20px 0px 0px;}
#footer ul.footerLogos img {width:100%; height:auto;}

.txtCenter {text-align:center;}

.popup-gallery img {width:20%; border:5px #CCC solid; margin:10px;}

.videoWrapper {width:46%; margin:10px 10px 40px 10px; float:left; padding:0px;}
.videoWrapper h2 {margin:0px 0px 10px 0px; padding:0px;}

.youTubeWrapper {width:33.3%; margin:10px 0px 40px 0px; float:left; padding:0px;}
.youTubeWrapper h2 {margin:0px 0px 10px 0px; padding:0px; font-size:14px;}

.youTubeBox {margin:15px;}
.youTubeBox img {width:100%; height:auto;}

#guidance ul {margin:20px; list-style-type:disc; line-height:24px; font-size:14px;}
#guidance li {margin:0px 0px 10px 20px;}
#guidance p {line-height:24px;}

#app {margin:0px; padding:0px; height:auto; text-align:center}
#app h2 {margin:0px; padding:20px 20px 20px 20px; border-bottom:1px dotted #999;}
#app h3 {margin:0px; padding:0px; font-size:14px;}
#app p, #app ul {margin:0px; padding:0px; font-size:12px;}
#app a {color:#333;}
#app a:hover {text-decoration:underline; color:#999;}
.appBox {width:15%; padding:20px;  display:inline-block; vertical-align:middle;}
.appBox img {max-width:50px; height:auto; margin:20px;}


.appBoxLarge {width:15%; padding:10px;  display:inline-block; vertical-align:middle;}
.appBoxLarge img {max-width:100px; height:auto; margin:20px;}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px)  { 

.itemBox {width:46%;}
.itemBox img {width:80px;}
.itemBox h3 {font-size:20px;}

.youTubeWrapper h2 {font-size:12px;}


}

@media only screen 
and (max-device-width : 600px)  { 

.itemBox {width:90%;}
}


/* MOBILE */

@media only screen and (max-device-width : 480px) {


	
	
h1 {-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -khtml-border-radius: 0px; margin:0px; font-size:38px; }
h2 {-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -khtml-border-radius: 0px; font-size:36px; }
h3 {-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; -khtml-border-radius: 0px; font-size:32px; }
p {font-size:24px;}

.one-half {width:100%;}

#header img {width:90%; margin:10px; padding:0px;}
#level {display:none;}

.itemBox img {width:40px; float:right;}
.itemBox h3 {font-size:28px; margin:0px; padding:28px 20px 20px 20px;}
.itemBox p {font-size:24px; padding:0px 0px 0px 20px;}
.itemBox ul {margin:20px;}

.lastBox {float:none;}

.iconBox li, .ksBox li {width:60%; max-width:none; height:auto; font-size:30px;}

.poemCont {width:100%;}
#sidebar {padding:0px;}
#sidebar .itemBox {padding:0px;}

.appBox, .appBoxLarge {width:88%;}
.appBoxLarge img, .appBox img {max-width:88%;}

.two-thirds {width:100%; margin:0px; padding:0px;}
.one-third {width:100%; margin:0px; padding:0px;}

#footer h3 {margin:0px; padding:20px;}
#footer p {margin:0px; padding:20px; width:88%;}
#footer .one-third {margin:0px; padding:0px;}

.popup-gallery img {width:88%;}
.videoWrapper {width:100%; float:none; display:inline-block; margin:0px; padding:10px 0px 0px 0px;}

.youTubeWrapper {width:100%;}


}

.timelineWrap h1 {text-align:left !important; font-family: 'Open Sans', sans-serif;}
.timelineWrap #footer h3 {font-family: 'Open Sans', sans-serif !important;}
.timelineWrap #footer .one-third{text-align:left !important;}



#audioPlayerHunch, #audioPlayerRefusal, #audioPlayerGentle, #audioPlayerLonged, #audioPlayerPortrait, #audioPlayerUMW, #audioPlayerFern, #audioPlayerXmas, #audioPlayerFernCym { width:100%;  top:0px; left:0px; display:block; z-index:1000; background-color:#666; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;}
#audioPlayerHunch p, #audioPlayerRefusal p,  #audioPlayerGentle p,  #audioPlayerLonged p,  #audioPlayerPortrait p, #audioPlayerUMW p, #audioPlayerFern p, #audioPlayerXmas p,  #audioPlayerFernCym p  {color:#ffffff; float:left; font-size:18px; margin:25px 20px 20px 15px;}
audio { width: 100%; display: block; padding:20px 0px 20px 0px; background-color:#e6e6e6; z-index:500; }

#playBt, #playBtRefusal, #playBtGentle, #playBtLonged, #playBtPortrait, #playBtUMW, #playBtFern, #playBtXmas, #playBtFernCym {width:50px; height:50px; background-color:#2b2b2b; float:left; margin:10px 0px 10px 10px; color:#FFF; display:block; background-image:url(img/playBt.png);}