@font-face {
    font-family: 'PlaytimeWithHotToddiesRegular';
    src: url('/fonts/bespoke/stbarnabascofe/playtime-webfont.eot');
    src: url('/fonts/bespoke/stbarnabascofe/playtime-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bespoke/stbarnabascofe/playtime-webfont.woff') format('woff'),
         url('/fonts/bespoke/stbarnabascofe/playtime-webfont.ttf') format('truetype'),
         url('/fonts/bespoke/stbarnabascofe/playtime-webfont.svg#PlaytimeWithHotToddiesRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PlaytimeWithHotToddiesObliqRg';
    src: url('/fonts/bespoke/stbarnabascofe/PlaytimeOblique-webfont.eot');
    src: url('/fonts/bespoke/stbarnabascofe/PlaytimeOblique-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bespoke/stbarnabascofe/PlaytimeOblique-webfont.woff') format('woff'),
         url('/fonts/bespoke/stbarnabascofe/PlaytimeOblique-webfont.ttf') format('truetype'),
         url('/fonts/bespoke/stbarnabascofe/PlaytimeOblique-webfont.svg#PlaytimeWithHotToddiesObliqRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'PlaytimeWithHotToddies3DRg';
    src: url('/fonts/bespoke/stbarnabascofe/PlaytimeWithHotToddies3D-webfont.eot');
    src: url('/fonts/bespoke/stbarnabascofe/PlaytimeWithHotToddies3D-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bespoke/stbarnabascofe/PlaytimeWithHotToddies3D-webfont.woff') format('woff'),
         url('/fonts/bespoke/stbarnabascofe/PlaytimeWithHotToddies3D-webfont.ttf') format('truetype'),
         url('/fonts/bespoke/stbarnabascofe/PlaytimeWithHotToddies3D-webfont.svg#PlaytimeWithHotToddies3DRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
	height: 100%;
}

html {
	
}

body {
	background:#ebf3ff;
	width: 100%;
    display: table;
}

#wrapper {
	width: 1007px;
	margin-left: auto;
	margin-right: auto;
        margin-top:10px;
	height: 100%;
}


/*  Header
    ======  */
#header {
	width: 1007px;
	padding:0px 0 0 0;
	height: 197px;
	background: url(/img/bespoke/stbarnabascofe/header.jpg) no-repeat 0 0;
	position: relative;
}

	#header h1 {
		position: relative;
		top: 40px;
		color:#932798;
		font-family: 'PlaytimeWithHotToddiesRegular';
		font-size:2.8em;
        margin-bottom: 6px;
	}

	#header p {
		position: relative;
		top: 46px;
		color:#932798;
		font-size: 1.4em;
	}

	#header #search {
		position: absolute;
		top: 0;
		right: 0px;
		height: 28px;
		padding: 7px 8px;
		background: #e0dede;
		line-height: 28px;
	}

        #header #search form {
            padding: 0;
            margin: 0;
        }

		#header #search input {
			-webkit-border-top-right-radius: 0;
			-webkit-border-radius-topright: 0;
			border-top-right-radius: 0;
			-webkit-border-bottom-right-radius: 0;
			-webkit-border-radius-bottomright: 0;
			border-bottom-right-radius: 0;
			-webkit-border-top-left-radius: 5px;
			-webkit-border-radius-topleft: 5px;
			border-top-left-radius: 5px;
			-webkit-border-bottom-left-radius: 5px;
			-webkit-border-radius-bottomleft: 5px;
			border-bottom-left-radius: 5px;
		}

		#header #search .btn {
			padding-left: 15px;
			padding-right: 15px;
			-webkit-border-top-left-radius: 0;
			-webkit-border-radius-topleft: 0;
			border-top-left-radius: 0;
			-webkit-border-bottom-left-radius: 0;
			-webkit-border-radius-bottomleft: 0;
			border-bottom-left-radius: 0;
			-webkit-border-top-right-radius: 5px;
			-webkit-border-radius-topright: 5px;
			border-top-right-radius: 5px;
			-webkit-border-bottom-right-radius: 5px;
			-webkit-border-radius-bottomright: 5px;
			border-bottom-right-radius: 5px;
            height: 28px;
            margin: 0;
		}

/*  Nav
    ===  */
#nav {
width: 201px;
height:auto !important;
float:left;
padding-top:20px;
padding-left: 20px;
position:relative;
z-index:99;
}

	#nav ul {
		position: relative;
		height: auto !important;
		margin: 0;
		margin-bottom: 17px;
		list-style: none;
                width:200px;
                float:left;
	}



		#nav ul.dropdown ul {
                    
                        top:0;
		position:relative;
			display:none;
                        width: 170px;

			height: auto;
			margin:0;
			background-image: none;

		}

#nav ul.dropdown > li.current-item-root ul {
	display:block;
	
}

#nav > ul > li > ul{
		padding-bottom:20px;
}

			#nav ul.dropdown ul li {
				display: block;
				float: none;
                  
				margin: 0;
				border: none;
				background-image: none;
				background-color: #cfedf4;
			}

     

		#nav ul li {
			margin: -1px 8px -1px -1px;
			display: block;
			
			height: auto;
			line-height: 50px;
		}

			#nav ul li a {
				display: block;
				height: 50px;
				line-height: 40px;
				width:200px;
				padding: 0;
				max-height:50px;
				overflow:hidden;
					text-align:center;
				font-size: 1.2em;
                                color:#222;
                                text-align:left;
                                font-weight:bold;
                                font-family: arial;
			}





#nav ul.dropdown li {
	display: inline-block;
	line-height:50px;
	position: relative;

}


#nav ul.dropdown ul li {
        background: url(/img/bespoke/stbarnabascofe/m1.png) no-repeat;
}

#nav ul ul li > a {
background:none !important;
color:#222 !important;
text-align:left;
line-height:25px;
height:auto;
}

#nav ul.dropdown ul li a {
    padding: 0 3px;
	line-height:20px;
	font-size:13px;
text-align:left;
	max-height:100%;
	width:auto;
}

                #nav ul li.item1 a,
		#nav ul li.item8 a,
		#nav ul li.item15 a,
		#nav ul li.item22 a,
		#nav ul li.item29 a {
			background: url(/img/bespoke/stbarnabascofe/m1.png) no-repeat;
		
		}

                #nav ul li.item2 a,
		#nav ul li.item9 a,
		#nav ul li.item16 a,
		#nav ul li.item23 a,
		#nav ul li.item30 a {
			background: url(/img/bespoke/stbarnabascofe/m2.png) no-repeat;
		
		}

		#nav ul li.item3 a,
		#nav ul li.item10 a,
		#nav ul li.item17 a,
		#nav ul li.item24 a,
		#nav ul li.item31 a {
			background: url(/img/bespoke/stbarnabascofe/m3.png) no-repeat;
		}

		#nav ul li.item4 a,
		#nav ul li.item11 a,
		#nav ul li.item18 a,
		#nav ul li.item25 a,
		#nav ul li.item32 a {
			background: url(/img/bespoke/stbarnabascofe/m4.png) no-repeat;
		}

		#nav ul li.item5 a,
		#nav ul li.item12 a,
		#nav ul li.item19 a,
		#nav ul li.item26 a,
		#nav ul li.item33 a {
			background: url(/img/bespoke/stbarnabascofe/m5.png) no-repeat;
		}

		#nav ul li.item6 a,
		#nav ul li.item13 a,
		#nav ul li.item20 a,
		#nav ul li.item27 a,
		#nav ul li.item34 a {
			background: url(/img/bespoke/stbarnabascofe/m6.png) no-repeat;
		}
                
                #nav ul li.item7 a,
		#nav ul li.item14 a,
		#nav ul li.item21 a,
		#nav ul li.item28 a,
		#nav ul li.item35 a {
			background: url(/img/bespoke/stbarnabascofe/m7.png) no-repeat;
		}


#nav ul.dropdown li li {
	clear: both;
	display: block;
        background:none;
	border-bottom:1px solid gray;
        height:auto;

}

#nav ul.dropdown li a {
display:block;
padding:0px;
	width:170px;
text-align:center;
}

#nav ul.dropdown li li li a{
padding-left:15px;
}

#nav ul.dropdown li li li li a{
padding-left:25px;
}


#nav-mobile {
position: relative;
width: auto;
margin: 0 auto;
height: 69px;
z-index: 3;
display:none;
background: blue;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border: solid 1px #fff;
box-shadow: inset 0px 0px 25px black; }

#nav-mobile #nav-more{
font-size: 18px;
color: #ffffff;
width:auto;
height:50px;
padding:0 20px;
line-height:50px;
text-align:left;
cursor:pointer;
background: url(/img/bespoke/wykehamprimary/dropdown-white.png) no-repeat top right; }


#nav-mobile ul {
margin: 0;
list-style: none;
height: auto;
position: relative;
z-index: 4;
padding: 0px;
}


#nav-mobile ul li {
position: relative;
float: left;
height: 100%;
line-height: 58px;
display: block;
color: #ffffff;
font-size: 15px;
text-shadow: 1px 1px 0 #222;
font-weight: bold;
z-index: 4;

}

#nav-mobile ul li:last-child {
background: none;
}

#nav-mobile ul li a {
text-decoration: none;
color:#ffffff !important;
display: block;
padding: 0 22px;
z-index: 4;
position: relative;
font-family: 'sf_slapstick_comicregular';
}

#nav-mobile > ul > li > a {
height: 60px;
}

#nav-mobile ul.dropdown ul {
position:absolute;
width: 175px;
display: none;
height: auto;
margin:0;
background-image: none;
background-color: #533EA6;
border: 1px solid #B28939;
margin-top: -1px;
padding:0;
}

#nav-mobile ul.dropdown li.extra.more ul {
margin-left:-90px;
}

#nav-mobile ul.dropdown ul li {
display: block;
float: none;
margin: 0;
border: none;
background-image: none;

}

#nav-mobile ul.dropdown ul ul {
left: 100%;
top: 0;
}

#nav-mobile ul.dropdown ul ul.left, #nav-mobile ul.dropdown ul ul.left ul {
left: -100%;
}

#nav-mobile ul.dropdown li {
display: inline-block;
line-height:56px;
position: relative;
}

#nav-mobile ul.dropdown li.more {
padding-right: 36px;
}

#nav-mobile ul.dropdown li.more span {
display: block;
padding-top: 46px;
height: 0;
width: 56px;
position: absolute;
right: 0;
top: 0;
overflow: hidden;
cursor: pointer;
background: url(/img/bespoke/wykehamprimary/dropdown-white.png) no-repeat 15px 0;
}

#nav-mobile ul.dropdown li li.more span {
background-position: 15px -66px;
}

#nav-mobile ul.dropdown li li {
clear: both;
display: block;
line-height: 40px;
}

#nav-mobile ul.dropdown li a {
display:block;
padding: 0 10px;

}

#nav-mobile ul.dropdown li li a {
font-weight: normal;

}

@media (max-width: 767px) {
#nav-mobile ul.dropdown, #nav-mobile ul.dropdown ul {
width:100%;
position: relative;
}
#nav-mobile ul.dropdown li {
width: 100%;
padding-right: 0 !important;
position: relative;

}

#nav-mobile ul.dropdown ul {
left: 0 !important;
text-indent: 14px;
}

#nav-mobile ul.dropdown ul { text-indent:20px; }
#nav-mobile ul.dropdown ul ul { text-indent:40px; }


#nav-mobile ul.dropdown ul ul ul { text-indent:60px; }
#nav-mobile ul.dropdown ul ul ul ul { text-indent:80px; }

#nav-mobile ul.dropdown ul li.more span {
background-position: 4px -64px !important;
width:45px;
padding-top: 40px;
z-index: 5;
border-left: 1px solid #B28939;
}

#nav-mobile ul.dropdown ul li.down > span {
background-position: 4px -8px !important;
}

#nav-mobile .extra {
cursor: pointer;
}
#nav-mobile .extra > a {
display:none !important;
}

#nav-mobile .extra:before {
content: 'Menu';
padding-left:10px;
}
} 

.column-2col-1, .column-2col-2 {
width:340px;
}

.column-1col {
width:710px;
}

.column-3col-1, .column-3col-2, .column-3col-3 {
width:210px;
}

.column-left2col-1 {
width:340px;
}

.column-left2col-1 {
width:340px;
}

.column-right2col-2 {
width:420px;
}

.column-right2col-1 {
width:260px;
}

											@media (max-width: 767px) {
												ul.dropdown, ul.dropdown ul {
													width:100%;
													position: relative;
												}

												ul.dropdown li {
													width: 100%;
													padding-right: 0 !important;
													position: relative;

												}

												ul.dropdown ul {
													left: 0 !important;
													text-indent: 14px;
												}

												ul.dropdown ul { text-indent:20px; }
												ul.dropdown ul ul { text-indent:40px; }
												ul.dropdown ul ul ul { text-indent:60px; }
												ul.dropdown ul ul ul ul { text-indent:80CFEDF4px; }

												ul.dropdown ul li.more span {
													background-position: left -36px !important;
												}

												ul.dropdown ul li.down > span {
													background-position: left top !important;
												}

												.extra {
													cursor: pointer;
												}

												.extra > a {
													display:none !important;
												}

												.extra:before {
													content: 'Menu';
													padding-left:10px;
												}
											}

#contentwrapper {
    width:1007px;
    background: url(/img/bespoke/stbarnabascofe/tile.gif) repeat-y 0 0;
}
                                                                                       
#content {
	padding: 14px;
	min-height: 500px;
	position:relative;
	padding-bottom: 70px;
        float:left;
		width:750px;
}

#footer {
	color: #fff;
	padding:0;
	font-size: 1.2em;
	text-align: center;
        background: url(/img/bespoke/stbarnabascofe/footer.gif) no-repeat 0 0;
        width:1007px;
        height:52px;
        margin:0 auto;
}

#footer a {
	color: inherit;
}


@media (max-width: 767px) {
	body {
		background-image: none;
	}

	#wrapper, #header, #nav, #content, #footer {
		width: auto;
	}
#contentwrapper{
	width:100%;
	background-size:100%;
}
	#wrapper {
		padding: 0 10px 10px 10px;
		background: url(/img/bespoke/stbarnabascofe/back2.png) no-repeat -250px 37px;
	}

	#header {
		padding: 0;
		width:100%;
		height:0px;
		background-size:100%;
		padding-top: 17.7%;
		padding-bottom: 9px;
	}

 #nav{
display:none;
}
#nav-mobile {

display:block;
}

#nav-mobile {
height: auto;
}

#nav-mobile > ul {
display:none;
width: auto;
float: none;
height: auto;
position: relative;
padding:0;

}

#nav-mobile ul ul {
position: relative;
width: auto;
margin: 0 !important;
border-top:0;
}

#nav-mobile ul ul ul {
border: none;

}

#nav-mobile ul li {
display:block;
width: auto;
float: none;
height: auto;
margin:0;
background:none;
}

#nav-mobile > ul > li {

}

#nav-mobile ul ul li {
text-indent:20px;
color:#FEDD7A;
}

#nav-mobile ul ul ul li {
text-indent:40px;
}

#nav-mobile ul ul ul ul li {
text-indent:60px;
} 

 #content {
width: 100% ;
padding: 0px;
margin: 0px;
min-height: 200px;
}
.element{
padding:10px;
margin:10px;
}

#content .column {
width: 100%;
}
.sj_element_slideshow ul.roundabout, .sj_element_slideshow ul.roundabout2 {
width:100% !important;
}

.sj_element_slideshow ul.roundabout li.roundabout-in-focus {
left:0% !important;
width:100% !important;
height:auto;
}

#content .sj_element_slideshow , #content .sj_element_slideshow img {
width:100% !important;
height:auto !important;
}
#content .sj_element_slideshow div.cycle div {
width: 100% !important;
text-align: center;

}
#content .element-text table td{
padding:0px;
}
#content .element-text table tr td {
display:block;
width: 100% !important;
}
#content .element-text table {
width:100% !important;
}
#content .element-slideshow .slideshow img {
width:100% !important;
height:auto !important;
}
#content .element-slideshow {
width:90% !important;
padding:10px;
}
#content .element-slideshow .slideshow {
width:90% !important;
}

#content .element-image img{
width:90% !important;
height:auto;
}

#content .element object {
width: 100% !important;
}

#content .element object embed {
width: 100% !important;
}
#content .element .form {
width: 100% !important;
}

#content .media-grid li.small {
width: auto;
}

#content .media-grid img {
width: auto;
}

#content .media-grid li.small div {
width:auto;
}

#content .element-media {
width:auto;
}
#content .element-media {
width:auto;
}
#content .sj_div_center {
width:auto !important;
}
#content .mejs-container, #content .mejs-video{
width:100% !important;
} 

	#footer{
		background:blue;
		height:auto;
		margin:0px;
	}
	
}