/* --- Styling creating by Shane Ferguson --- */
/* --- Be used only with the misshelen.com website --- */

/* -------------------- Resets --------------------- */ 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, p,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

ol, ul {
	list-style: none;
}

html { 
    font: 14px Verdana, sans-serif;
	color:#555; 
	background-color:#e6efff;
} 
body {
	background-image: url(../img/b.jpg);
	background-repeat: repeat-x;
	background-position:top;
    text-align: center; 
    min-width: 971px; 
} 

#wrapper{
	margin: 0 auto;
	width:971px;
	text-align:left;
	background-color: #fff;
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	
}

#shadow{
	background-image: url('../img/layout/dropsha.png');
	background-repeat: repeat-y;
	background-position:center center;

}

#header{
	height: 200px;
	border-top: 4px solid #243467;
	background-position: center 5%;
	background-image: url(../img/layout/navshadow.jpg);
    background-repeat: repeat-x;
    background-position:bottom;
}

.logo{
	margin: 15px 0px 0px 18px;
	font-size: 18px;
	float:left;
}

h1 {
  margin: 149px 90px 0px 0px;
  text-align:right;
  font: 12px Verdana, sans-serif;
  font-style:italic;
  font-weight:bold;
  color:#666; 
 
}

#headLink{
  float:right;
  font-size: 11px;
  background-color:#364471;
  height: 20px;
  width: 140px;
  padding-top: 3px;	
}

#headLink li{
  display: inline;
  list-style-type: none;
}

#headLink a {
  color: #FCE616;
  padding: 13px;
  
}

#headLink a:hover {
  color: #ccc; 
}


#navcontainer{ 
    margin-bottom:25px;
    padding:0; 
    width:100%; 
    text-align: center; 
    background-color: #293A6F;
    height: 35px;
    border-top: 1px solid #506194;
    border-bottom:2px solid #246756;
    background-image: url(../img/layout/nav.jpg);
    background-repeat: repeat-x;	
	  
} 

#nav {
  background-image: url(../img/layout/nav.jpg);
  background-repeat: repeat-x;	
  font: bold 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-weight:bold; 
  border-left: 2px solid #666; 
  border-right: 2px solid #666; 
  margin:0; 
  padding:0; 
  
  list-style-type: none; 
  width: 798px;    
  display:inline-block;    
  position:relative;

} 
#nav li { 
  margin: 0; 
  padding: 0; 
  float: left;
  width:9.5em;
  position:relative;
  display:inline; 
   
}
#nav li ul{
  background:#8F8450;
}

#nav a { 
  display:block;
  color: #FCE616; 
  text-decoration: none; 
  line-height: 2.5em; 
  border-right: 1px solid #666; 
} 
#nav #nav_con a {
  margin: 0;
  padding:0;	
  border: none; 
} 

#nav a:hover { 
  background: #506194;
} 


/* used for fix drop down in IE7 */
#nav li:hover{
	visibility:visible;
}

.curly_quotes {
    position: relative;    /* base for the absolute positioning, also show mark with negative margin in IE6 */
    margin-top: -1.0em;    /* adjust for the extended top leading set by the first quote mark's font-size */
    padding-top: 1px;      /* avoid collapsing top margin in good browsers */
    font: 100%/1.2 Verdana, Arial;
    margin-bottom: 10px;
    
}
.curly_quotes i,
.curly_quotes em {
    color: #6B82BF;
    font: 235% "Trebuchet MS", Arial; /* also resetting the italic for these elements */
}

.curly_quotes i{
	bottom: -0.3em;
	padding-right: 3px; 
}

.curly_quotes em {
    bottom: -0.2em;
    padding-left: 6px;
}
.curly_quotes i {
    position: relative;
    vertical-align: 0.02em; /* push first line down referring to this element's baseline (here the baseline/leading differs in IE) */
}
.curly_quotes em {
    position: absolute;
    margin-left: -0.1em;    /* use margin because left position must be the default auto (auto position also differs a little in IE) */   
}


#mainImg{
	background-image: url(../img/layout/mainIm.png);
	background-repeat: no-repeat;
	margin: 0 auto;
	height: 293px;
	width: 931px;
	text-align:center;
    
}

.smallImgright{
	float:right;
	margin: 0 0 .3em .5em;
	
}

.smallImgleft{
	float:left;
	margin: 0 .5em .1em 0;
	
}

#caption{
	color: #364580;
	font-size: 1.1em;
	font-style:italic;
	float:right;
	clear: right; 
	text-align:left;
	line-height: 27px;
	margin: 60px 35px 0px 0px;
	width: 380px;
}

.quoteauthor{
	position: relative;    /* base for the absolute positioning, also show mark with negative margin in IE6 */
    padding-top: 1px;      /* avoid collapsing top margin in good browsers */
    margin-bottom: 10px;
    color: #333;
	font-size:0.8em;
	font-style:italic;
	float:right;
	clear: right; 
	text-align:left;
	margin: 10px 35px 0px 0px;
	width: 380px;
}


.grade{
	margin: 28px 1px 0px 2px;
	border: 1px solid #aaa;
	border-bottom-color: #bbb;
	border-left-color:#bbb;
	border-right-color:#999;
	padding:  4px 4px 10px 4px;
	background-color: #ccc;
    
}

#kinderImg{
	float:left;
	margin-left: 15px;
}

#contactImg{
	margin-top: 35px;
	margin-right:4px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #999;
	border-left:1px solid #ccc;
	border-right:1px solid #bbb;
}

#contentcontain{
	font-family: Arial, sans-serif;
	margin: 10px;
	width:95%;
	
}

#mainContent{
	margin: 35px 0px 30px 13px;
	border-top: 1px solid #CFDCFF;
	float:left;
	width: 73%;
	
}

#mainContent h2{
  padding: 15px 15px 15px 7px;	
  font: 1.9em "Trebuchet MS", Verdana, sans-serif;
  color:#207D68;	
}

#mainContent h4{
  padding-bottom: 8px;
  margin-top: 12px;
  margin-bottom: 5px;
  margin-left: 9px;
  font: 1.4em "Trebuchet MS", Verdana, sans-serif;
  color:#506194;
  border-bottom: 1px dashed #ccc;
  	
}

#mainContent h5{
  margin-top: 15px;
  margin-bottom: 4px;
  margin-left: 15px;
  font: 1.2em "Trebuchet MS", Verdana, sans-serif;
  color:#666;
  	
}

blockquote{
	margin-left: 10px;
	margin-right: 25px;
	
}


.sunshineIcon {
	background:url(../img/icon/sunshine.png) no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: 19% -2px;
}

.cloverIcon {
	background:url(../img/icon/clover.png) no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: 17% -1px;
}

.rainbowIcon {
	background:url(../img/icon/rainbow.png) no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: 26% -2px;
}

.summerIcon {
	background:url(../img/icon/summer.png) no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: 24% -2px;
}



.facebook {
	margin-left: 4px;
	font-size: 14px;
	
}

.facebook {
	color:#627AAD;
	font-size: 13px;
}

#mainContent p{
	padding: 5px 15px 5px 12px;
	line-height: 1.6em;
}


#feature {
	background:#E0E4EF url(../img/corner/bottomLeft.gif) no-repeat bottom left; 
	background-color:#E0E4EF;
	width: 645px;
  	margin: 0 auto;
  	font: 1.1em Tahoma;
	}
#feature strong{
	font-size:1.1em;
	color:#777;
	
}
	
#feature dl {
	background:url(../img/corner/topLeft.gif) no-repeat;
	}
	
#feature dt {
	background:url(../img/corner/topRight.gif) no-repeat top right; 
	color:#E0E4EF;
	line-height:1;
	}
#feature dd {
	background:url(../img/corner/bottomRight.gif) no-repeat bottom right;
	padding:0.1em 0 0.4em 0.9em;
	margin: 0 auto;  
	line-height:1em;
	color:#364471;
	font-size: 1em;
	}


#sideContent{
	margin: 35px 12px 20px 5px;
	border-top: 1px solid #CFDCFF;
	float:right;
	width: 22%;
	
}

#sideContent h3{
  margin: 19px 15px 10px 0px;	
  font: 1.6em "Trebuchet MS", Verdana, sans-serif;
  color:#207D68;
 
}


.booksIcon {
	background:url(../img/icon/books.jpg) no-repeat;
	background-color: transparent;
	background-attachment: scroll;
	background-position: top right;
	padding-bottom: 20px;
	
}
#sideContent p{
	padding: 7px 0px 10px 0px;
	font-size:85%;
	color:#6B8ABF;
	line-height: 1.9em;
	font-family: Verdana, Arial;
}

#sideContent strong{
	color:#2E3B70;
	font-size: 1em;

}

.contact{
	font-weight:bold;
	color:#777;
	border:1px solid #bbb;
	background:#DDE0E7;
	padding: 4px;
	margin:0px 2px 25px 2px;
	font-size: 0.9em;
}

/* url color */
p a{
	color:#4C67AF;
}
p a:hover{
	color:#238F76;
}



#footer {
	clear: both;
	background: url(../img/layout/footer.jpg) repeat-x;
	background-position:bottom;
	background-color: #263367;
	text-align: left;
	height: 65px;
	border-top:4px solid #246756;
	color: #FCE616;
	padding:  20px;
	font-size: 0.9em;

}

#footer ul{
  margin-top:2px;
}


#footer li{
  display: inline;
  list-style-type: none;
}

#footer a {
  color: #ccc;
  padding: 3px;  
}

#footer a:hover {
  color: #999; 
}


#footerNav{
	float:right;
	text-align: right;
	margin-top: 14px;
	
}

.valid {
	float:right;
	text-align:right;
	font-size: 90%;

}

.error{
	color:#C00000;
	padding:15px;
	text-align:center;
	font-size: 1.3em;
	
}

.anchor a{
	color:#506194;
}

.anchor a:hover{
	color:#506194;
}


