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

}

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

}

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

}

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

}

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

}

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

}

html {
	height:100%;
}

body {
	height: 100%;
	background: url(/img/bespoke/millfordschool/header.png) #333333 center top no-repeat;
}

#wrapper {
	width: 951px;
	margin-left: auto;
	margin-right: auto;
        position:relative;
        padding-top:0px;
}

#header {
	padding-top: 0px;
        padding-left: 0px;
	height: 157px;
        width:951px;
	position:relative;
        text-align:right;
}

#header h1 {
	line-height: 54px;
	margin-top: 0px;
        padding-top:20px;
	font-size: 4.5em;
	color: #fff;
	font-family: 'SansationBold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

 #search {
		position: absolute;
		top: 154px;
		right: 0px;
		height: 28px;
		padding: 7px 8px;
		background: #333333;
	}
        
        .page-home #search {
                top: 610px;
        }

         #search form {
            padding: 0;
            margin: 0;
        }
        
         #search table th, 
         #search table td {
            padding:0;
         }

		 #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;
		}

		 #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;
                        color: #FFFFFF;
                        font-weight: bold;
                        background: #92BB45;
		}

#header p {
	margin-top: 7px;
	font-size: 2.0em;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
        position:absolute;
        bottom:5px;
        right:0px;
	font-family: 'SansationItalic', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/********fadein slideshow********/
.fadein { 
position:relative; 
width:951px; 
height:414px; 
margin:0 auto;
}
.fadein img { 
position:absolute; 
left:0; 
top:0; 
}

#frontpic {
        width:951px;
        height:414px;
        margin:0 auto;
        margin-top:30px;
        display:none;
}

.page-home #frontpic {
        display:block;
}

/*  Nav
    ===  */
#nav {
	position: relative;
	width: 960px;
	margin: 47px auto 0;
	height: 133px;
	z-index: 3;

}

.page-home #nav {
        margin-top:90px;
}

.nav-display-block {
        display:block !important;
        visibility:visible !important;
}

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

		#nav ul li {
			position: relative;
			float: left;
			height: 100%;
			line-height: 58px;
			display: block;
			color: #fff;
			font-size: 17px;
			
			font-weight: bold;
			background: url(/img/bespoke/millfordschool/seperator.png) right repeat-y;
			z-index: 4;
		}

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

			#nav ul li a {
				text-decoration: none;
				color: inherit;
				*color: #fff;
				display: block;
				padding: 0 15px;
				z-index: 4;
				position: relative;
			}
                        
                        #nav ul li a:hover {
                                
                        }
                        
                        #nav > ul > li {
                                width: 133px;
                        }
                        
                        #nav > ul > li > a {
                                height: 75px;
                                line-height: 20px;
                                padding-top: 50px;
                                text-align: center;
                                font-size: 15px;
                                text-shadow: 1px 1px 0 #111,
                                             1px -1px 0 #111,
                                             -1px 1px 0 #111,
                                             -1px -1px 0 #111;
                                filter: grow(color:#111, strength=4);
                        }

                        #nav ul li.item1 {
                                background: url(/img/bespoke/millfordschool/menu/1.png) no-repeat center bottom;
                        }
                        
                        #nav ul li.item2 {
                                background: url(/img/bespoke/millfordschool/menu/2.png) no-repeat center center;
                        }
                        
                        #nav ul li.item3 {
                                background: url(/img/bespoke/millfordschool/menu/3.png) no-repeat center bottom;
                        }
                        
                        #nav ul li.item4 {
                                background: url(/img/bespoke/millfordschool/menu/4.png) no-repeat center top;
                        }
                        
                        #nav ul li.item5 {
                                background: url(/img/bespoke/millfordschool/menu/5.png) no-repeat center bottom;
                        }
                        
                        #nav ul li.item6 {
                                background: url(/img/bespoke/millfordschool/menu/6.png) no-repeat center center;
                        }
                        
                        #nav ul li.item7,
                        #nav ul li.extra {
                                background: url(/img/bespoke/millfordschool/menu/1.png) no-repeat center bottom;
                        }
                        
                        
                        #nav > ul > li.item1 > a {
                                height: 50px;
                                padding-bottom: 5px;
                                padding-top: 70px;
                        }
                        
                        #nav > ul > li.item2 > a {
                        
                        }
                        
                        #nav > ul > li.item3 > a {
                                height: 50px;
                                padding-bottom: 5px;
                                padding-top: 70px;
                        }
                        
                        #nav > ul > li.item4 > a {
                                padding-bottom: 15px;
                                padding-top: 35px;
                        }
                        
                        #nav > ul > li.item5 > a {
                                
                        }
                        
                        #nav > ul > li.item6 > a {
                        
                        }
                        
                        #nav > ul > li.item7 > a,
                        #nav > ul > li.extra > a {
                                height: 50px;
                                padding-bottom: 5px;
                                padding-top: 70px;
                        }
                        
                        #nav > ul.dropdown > li.item1.more > span {
                                top:51px
                        }
                        
                        #nav > ul.dropdown > li.item2.more > span {
                                
                        }
                        
                        #nav > ul.dropdown > li.item3.more > span {
                                top:51px;
                        }
                        
                        #nav > ul.dropdown > li.item4.more > span {
                                top:20px;
                        }
                        
                        #nav > ul.dropdown > li.item5.more > span {
                                top: 45px;
                        }
                        
                        #nav > ul.dropdown > li.item6.more > span {
                        
                        }
                        
                        #nav > ul.dropdown > li.item7.more > span,
                        #nav > ul.dropdown > li.extra.more > span {
                                top:51px;
                        }
                        
				#nav ul.dropdown ul {
					position:absolute;
					width: 175px;
					display: none;
					height: auto;
					margin:0;
					background-image: none;
					background-color: #eeeeee;
					border: 1px solid #333333;
					margin-top: -1px;
                                        
                                        border-radius: 15px;
                                        -moz-border-radius: 15px;
                                        -webkit-border-radius: 15px;
				}
                                
                                #nav > ul > li.item1 ul {
                                        background: #DAEFAE;
                                }

                                #nav > ul > li.item2 ul {
                                        background: #E8C4F7;
                                }

                                #nav > ul > li.item3 ul {
                                        background: #C6DA9C;
                                }

                                #nav > ul > li.item4 ul {
                                        background: #C7AAD3;
                                }

                                #nav > ul > li.item5 ul {
                                        background: #C8E48B;
                                }

                                #nav > ul > li.item6 ul {
                                        background: #D89FF1;
                                }

                                #nav > ul > li.item7 ul,
                                #nav > ul > li.extra ul {
                                        background: #D1E5A4;
                                }

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


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

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

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

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

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

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

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

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

}

#nav ul.dropdown li li a {
	font-weight: normal;
        padding: 0 10px;
		font-size:11px;
		text-align:center;
}

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

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

												}

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

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

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

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

												#nav .extra {
													cursor: pointer;
												}

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

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


#content {
	width:930px;
	padding:15px 15px;
	background: #92BB45;
        min-height:250px;
        margin-top:10px;
        margin-bottom:10px;
        border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
}

.parent-home #content {
        background:#92BB45;
}

.parent-home .sj_element_newsletter {
color: white;
}
.parent-home .sj_element_newsletter h3 {
color: white;
}
.parent-about-us #content {
        background:#D488F0;
}

.parent-curriculum #content {
        background:#8CA94E;
}

.parent-pupils #content {
        background:#B597C2;
}

.parent-parents #content {
        background:#A2D73E;
}

.parent-friends-of-mill-ford #content{
        background:#BA43E6;
}

.parent-governors #content {
        background:#92BB45;
}

#content .element-events {
        background: none repeat scroll 0 0 #eee;
        margin-top: 10px;
        overflow: visible;
        padding: 0 8px 12px;
}

#content .gallery {
        background: none repeat scroll 0 0 #eee;
        margin-top: 10px;
        overflow: visible;
        padding: 0 8px 12px;
}

#content .gallery:before {
        height:35px;
        content:"Gallery";
        color:#fff;
        text-align:center;
        font-size:18px;
        width:290px;
        font-weight:bold;
        display:block;
        background:#92BB45;
        line-height:35px;
        position: relative;
        top: -10px;
        left: -8px;
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
}

#content .element-events:before {
        height:35px;
        content:"Upcoming Events";
        color:#fff;
        text-align:center;
        font-size:18px;
        width:290px;
        font-weight:bold;
        display:block;
        background:#92BB45;
        line-height:35px;
        position: relative;
        top: -10px;
        left: -8px;
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
}

#content .element-news {
        background: none repeat scroll 0 0 #eee;
        margin-top: 10px;
        overflow: visible;
        padding: 0 8px 12px;
}

#content .element-news:before {
        height:35px;
        content:"Latest News";
        color:#fff;
        text-align:center;
        font-size:18px;
        width:290px;
        font-weight:bold;
        display:block;
        background:#92BB45;
        line-height:35px;
        position: relative;
        top: -10px;
        left: -8px;
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
}


/*****home events*****/

#content .element-scroll {
        background: url("/img/bespoke/millfordschool/scroll-tile.png") repeat-y scroll 0 0 transparent;
		margin-bottom: 160px;
		margin-top: 70px;
		min-height: 450px;
		overflow: visible;
		padding: 0 22px 12px;
		position: relative;
		text-align: left;
}

#content .element-scroll .element {
	 left: 54px;
    margin: 0 0 0;
    position: relative;
    width: 703px;
}

#content .element-scroll:before {
        background: url("/img/bespoke/millfordschool/scroll-top.png") no-repeat scroll center top transparent;
		color: #FFFFFF;
		content: "";
		display: block;
		font-size: 18px;
		font-weight: bold;
		left: 0;
		line-height: 35px;
		margin-top: 20px;
		min-height: 45px;
		padding-top: 220px;
		position: absolute;
		text-align: center;
		text-shadow: 0 0 5px black;
		top: -90px;
		width: 930px;
}

#content .element-scroll:after {
     
        background: url("/img/bespoke/millfordschool/scroll-bot.png") no-repeat scroll center bottom transparent;
		bottom: -179px;
		color: #FFFFFF;
		content: "";
		display: block;
		font-size: 18px;
		font-weight: bold;
		left: 0;
		line-height: 35px;
		min-height: 0;
		padding-top: 180px;
		position: absolute;
		text-align: center;
		width: 930px;
	
}


#footer {
	color: #f2f2f2;
	padding: 20px 0;
	font-size: 12px;
	text-align: center;
        width:100%;
        background: url(/img/bespoke/millfordschool/footerbg.png) repeat-x;
}

#footer small {
        font-size:12px;
}

#footer a {
	color: inherit;
}

@media (max-width: 767px) {

        body {
                background-size: 170% auto;
        }

	#wrapper, #header, #content, #footer, #nav {
		width: auto;
	}

	#wrapper {
		margin: 10px;
	}

	#header {
		padding-top: 0px;
		padding-bottom: 45px;
		height: auto;
	}

        #frontpic {
		height: auto;
                margin: 0;
                padding-top: 75px;
                width: 100%;
	}

        .fadein {
                height: 322px;
                width: 100%;
        }
        
        .fadein img {
                width: 100%;
        }
        
	#search {
		top: -10px;
                display:none;
	}

	#header h1 {
		margin: 0;
	}

        #header p {
		margin: 0;
	}

        #nav > ul.dropdown > li.item7.more > span, #nav > ul.dropdown > li.extra.more > span {
                top: 0;
        }
        
	#nav {
		height: auto;
                margin-top:0;
	}
        
        #nav ul {
                background: #ddd;
        }

	#nav ul.dropdown li {
		margin-right: 0;
                background: #ddd;
	}
        
        #nav ul.dropdown li.extra {
                background-image: none;
        }
        
        #nav ul.dropdown li.more span {
                top:0;
        }

	#nav ul.dropdown, #nav ul.dropdown ul {

		height: auto;
		position: relative;
		width: auto;
	}

	#nav ul.dropdown ul {
		padding: 0;
                border:none;
	}

	#nav ul.dropdown ul li {
		background: none;
		border-top: 1px solid #333;
	}

	#nav ul.dropdown li {
		height: auto;
		display: block;
	}

        #content .column {
                width: auto;
        }
        
	html {
		background: #A2CD5E;
	}
}


@media (max-width: 480px) {
        #frontpic {
                padding-top: 25px;
	}

        .fadein {
                height: 198px;
                width: 100%;
        }
        
        .fadein img {
                width: 100%;
        }
}