@import url(../IndieFlower.ttf);

body { 
  font-family:'Indie Flower', 'Open Sans', Sans;
  color: #666;
  margin-left: 5px;
}
img{border-style: none}
h3 {font-size: xx-large;}
	
/* STRUCTURE */

#pagewrap {
	padding: 5px;
	width: 100%;
	margin: 20px auto;
	height: auto;
	
}
header {
	margin: 0 auto;
	padding: 0 05px;
	height: 160px;
}

header a {
	position: relative;
	text-decoration: none;
}

#top-banner{width: 70%; float: left; margin: 0 20px;}

#left-link { 
   max-width: 11%;
   width: 11%;
   position: relative;
   font-size: 13px;
   margin-left: 15px;
   float: left;
   text-align: center;
}

#left-link img{
	width: 57%;
    margin: 0 auto;
    
	 
	
}

#left-link a{ max-width: 7%; width: 7%; float: left}

#right-link {
   max-width: 11%;
   width: 11%;
   position: relative;
   font-size: 13px;
   float: left;
   margin-right: 15px;
   text-align: center;
}
}
#right-link a{max-width: 7%; width: 7%; left:74%}

#right-link img{
	width: 57%;
    margin: 0 auto;
    /* display: inline-block; */
    padding-left: 20px;
}

img header {
	width: 80%;
	margin: 0 auto;
}
	
#content {
	width: 12%;
	float: left;
	padding: 0;
	clear: both;
}

#middle{
	width: 72%; /* Account for margins + border values */
	float: left;
	padding: 5px 5px;
	margin: 0px 5px 5px 5px;
}


#sidebar {
	width: 8%;
	padding: 0px;
	float: left;
}

li img{width: 40px; position: relative; top: 15px;}

.long-splat  {top: 25px;}

a p { 
	position: relative; /* align text with bigger splat images */
    top: -36px;
    left: 33px;
}
 a:link, a:visited{text-decoration: none; color: #C52243;}
 a:hover, a:active{text-decoration: none; color: #3C2204;}
 
footer {
	display: block;
	clear: both;
	position: relative;
	padding: 10px;
    width: 60%;
    margin: 0 auto;
}

#schoolsSideMenu {
	position: relative;
	left: 90px;
	width:40%; 
	padding-left: 0; 
	margin-left: 0px; 
	color: #B56608; 
	float: right; 
	height: 37em;
	
}

#schoolsSideMenu li a:link, #schoolsSideMenu li a:visited {
  
	color: #3C2204;
    text-decoration: none;
    padding: 2px 5px;
    margin-right: 0;
    line-height: 0px;
    border-radius: .77em;
    border: none;
	font-weight: bold;
	font-size: 20px;
	width: 325px;
}




#page{ height: auto; padding: 50px 20px;}
#page p, #page ul { 
height: auto; 
width: 85%; 
margin: 0 auto; 
font-size: x-large; 
font-weight: 700; 
padding-top: 100px;
padding-left:0;     
clear: both;
}

#page h1 {
width: 70%; 
margin: 0 auto; 
padding-top: 20px; 
font-size:35px;
position: relative; 
top: -80px;
display: inline-block;
 }
#page h1 span{ box-shadow: 2px 2px 2px #ccc; margin-right: 2px; }/* give each letter a border effect */

 
#video-page{ height: 760px; padding: 50px 20px;  }

#video-page p, #video-page ul{ height: auto; width: 70%; margin: 0 auto; font-size: x-large; font-weight: 700} 

 #video-page h1 {
width: 95%; 
margin: 0 auto; 
padding: 20px; 
font-size:38px;
position: relative; 
top: 20px;
display: inline;
 }
 
#video-page h1 span{ box-shadow: 2px 2px 2px #ccc; margin-right: 2px; }/* give each letter a border effect */

#video-page p{padding-top: 40px;}
 /* fade paint splats on menu */
 
li > a img:hover { 
filter:alpha(opacity=50);
-moz-opacity:0.5;
zoom:1;
opacity: 0.5;
}



#slide-page{ 
height: auto; 
width: 70%; 
font-size: x-large; 
font-weight: 700; 
padding-top: 40px;

}

#slide-page h1 {
width: 98%; 
margin: 0 auto; 
font-size:28px;


 }

#slide-page h1 span{ box-shadow: 2px 2px 2px #ccc; margin-right: 2px; }/* give each letter a border effect */
 
#schools-slide-page-SideMenu {
	width: 33%;
    padding-left: 0;
   	margin-top: 150px;
    color: #B56608;
    float: right;
    height: 37em;
}


 
#schools-slide-page-SideMenu li a:link, #schools-slide-page-SideMenu li a:visited {
  
	color: #3C2204;
    display: block;
    text-decoration: none;
    padding: 2px 5px;
    margin-right: 0;
    line-height: 0px;
    border-radius: .77em;
    border: none;
	font-weight: bold;
	font-size:20px;
	width: 325px;
	
}
#schools-slide-page-SideMenu li a:hover, #schools-slide-page-SideMenu li a:active{
  
	color: #3C2204;
    display: block;
    text-decoration: none;
    padding: 2px 5px;
    border-radius: .77em;
    border: none;
	font-weight: bold;
	font-size: 20px;
	width: 325px;
	
}

#schoolsSideMenu ul li a.current{text-decoration: underline;}
#schools-slide-page-SideMenu ul li a.current{text-decoration: underline;}

#lower-SideMenu {
	display:none;
}
.container{
    border-top: solid #ccc 1px;
    border-bottom: solid #ccc 1px;
    width: 96%;
    margin: 0 auto;
    padding-top: 12px;
    padding-bottom: 12px;
}
#feile-page{
	height: auto;
    width: 100%;
    font-size: x-large;
    font-weight: 700;
    padding-top: 40px;
    position: relative;
	margin-left: 30px;
 } 

#feile-page h1 {
width: 697px; 
margin: 0 auto; 
font-size:38px;
position: relative;
margin-bottom: 40px; 
} 

#feile-page h1 span{ box-shadow: 2px 2px 2px #ccc; margin-right: 2px; }/* give each letter a border effect */
 
.container input { border: solid #ccc 2px;   margin: 5px; }
.mejs-mediaelement{BACKGROUND: WHITE;}


.dbl-line {line-height: 25px;}
.feile-list li img{top: 3px;}
.feile-workshop {
	width: 80%;
    font-size: 20px;
	margin-left: 20px;
}
.feile-workshop li p {
    position: relative;
    top: 9px;
    left: 10px;
}
.feile-container {
	height: 400px; 
	border-top: solid #ccc 1px; 
	border-bottom: solid #ccc 1px;  
	
}
	
ul.feile-quicklinks {
float: left;
width: 47%;	
margin-left: 13px;
margin-bottom: 100px;
font-size: 20px;	
}
ul.feile-quicklinks li{
height:70px;
	
}

#bottom-image{ position: relative; width: 73%; margin: 20px auto; top: 30px ;}
#train-holder img{
		width: 80%;
		margin-left:15%;
	}
	
#caption{ position: relative; /*width: 65%; margin: 0 auto; */ top: 430px; font-size:20px;}

/**************************************************************
hidden images to act as anchors for tooltip pop-ups
**************************************************************/
.hide1{
position: absolute;
top:660px;
left:97px;
display: inline-block;
width: 80px;
height:80px;	
opacity: 0;
}
.hide2{
position: absolute;
top:1283px;
left:85px;
display: inline-block;
width: 80px;
height:80px;	
opacity: 0;
}
.hide3{
position: absolute;
top:2136px;
left:105px;
display: inline-block;
width: 80px;
height:80px;	
opacity: 0;
}




 li > img { transition:all 0.5s; }
 li > img:hover { transform: scale(1.3);}
 li > img:hover{ transform: scale(1.3); } 
 
#slider > img { transition:all 0.5s; }

#slider > img:focus { transform: scale(1.3); }

#sitemap{ display: block; width: 10%; margin: 0 auto;}

.nomp{margin: 0; padding:0; font-size: small; width:50%; }

/************************************************************************************
Sprites
*************************************************************************************/
.splat-green-50x100, .splat-pink-50x100, .splat-redx50, .splat-limex50, .splat-yellowx50{
	background: url(../images/sprites/splatsX50.png) no-repeat;
}

.splat-green-50x100{
	background-position: -170px -2px ;
	width: 50px;
	height: 94px;
}

.splat-pink-50x100{
	background-position: -251px -2px ;
	width: 50px;
	height: 98px;
}

.splat-redx50{
	background-position: -99px 0;
	width: 50px;
	height: 50px;
}

.splat-limex50{
	background-position: -49px 0;
	width: 50px;
	height: 50px;
}

.splat-yellowx50{
	background-position: 0 -3px ;
	width: 50px;
	height: 50px;
}




/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1245px or less */
@media screen and (max-width: 1245px) {
	.slider-wrapper, #schoolsSideMenu{
		display: none;
	}
	#page h1{
		width: 100%;
	}
}	




	/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#top-banner{
    width: 100%;
    	
	}
	#top-banner img{
    width: 100%;
    	
	}
	header{
		height: auto;
		text-align: center;
	}
	#hidediv{
		display: none;
	}
	#middle{
	width: 100%;		
	}
	
	#page h1 {
	width: 100%; 
    top: 0;
    display: inline-block;
	}
	
	
	#pagewrap {
		width: 94%;
		
	}
	
	#content, #sidebar {
		display: none;
	}
	
	
	#slide-page{
		width: 100%;
	}	
	
	#schools-slide-page-SideMenu{
	width:100%;
	padding-left: 0;
   	margin-top: 0;
    float: right;
	margin-bottom: 90px;
    }
	
	article #side-page{
	width: 100%;
    }
	
	article #side-page p{
	width: 100%;
    } 
	
	h1{
	width: 98%;
    font-size: large;
 	
	}
	
	
	
	#train-holder{
		width: 80%
		
	}
	
		
	header, footer {
		padding: 1% 4%;
	}
	#left-link,#right-link { 
	display: none;
	}
	
	.slider-wrapper {
		display: none;
		
	}
	
	
}

/* for 760px or less */
@media screen and (max-width: 760px) {

	#page h1{
		font-size:28px;
	}
	#page p, #page ul{
		font-size:large;
	}
	
	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		display: none;
	}
	
	#train-holder img{
		width: 60%;
		
	}
	#lower-SideMenu{
		display: block;
		width: 50%;
		margin: 0 auto;
	}
	
}

/* for 480px or less */
@media screen and (max-width: 480px) {

	header {
		height: auto;
	}
	h1 {
		font-size: 2em;
	}
	#sidebar {
		
	}

}

#content {
	/*background: #f8f8f8;*/
}
#sidebar {
	
/*background:background: #f0efef;*/
}
header, #content, #middle, #sidebar {
	margin-bottom: 5px;
}

#pagewrap, header, #content, #middle, #sidebar, footer {
	border: none;
}
#


aside img{display: none;}