body {
    background: url(../images/bg.gif) 0 0 repeat;
    margin-top: 20px;
    font-family: arial, helvetica, sans-serif;
	color: #333;
}

h1 {
    font-size: 30px;
    font-family: georgia, arial, helvetica, sans-serif;
    margin-bottom: 0.5em;
}
h2 {
    font-size: 20px;
    font-family: georgia, arial, helvetica, sans-serif;
}
h3 {
    font-size: 16px;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    color: #2e63a6;
}

a {
	text-decoration: none;
	color: #FF8700;
}
	a:hover {
		text-decoration: underline;	
	}

.clear {
    clear:both;   
}
.highlight {
	color: green;
}
	.highlight.strong {
		font-weight: bold;
	}

ol {
	margin: 1em 0;
	margin-left: 40px;
	list-style-type: disc;
}
	ol.error {
		color: #FF0000;
	}

#nav {
    width: 100%;
    clear: both;
    height: 35px;
}
    #nav ul.nav {
        width: 960px;
        margin: 0 auto;
    }
    #nav ul.nav li {
        float: left;
        font-size: 12px;
        text-transform: uppercase;
    }
    
        #nav ul.nav li a {
            float:left;
            position:relative;
            padding: 10px 10px 10px 30px;
            text-decoration:none;
            color:#333333;
            background:url(../images/tabs.gif) 5px -54px no-repeat;
            text-align: center;
            font-weight: bold;
            line-height: 15px;
        }
            #nav ul.nav li a span {
                position:absolute;
                top:0;
                left:100%;
                width:10px;
                background:url(../images/tabs.gif) -500px -54px no-repeat;
                padding-top:0px !important;
                height: 35px;
            }
            
            #nav ul.nav li a:hover {
                background-position: 5px -99px;
                position:relative;
            }
                #nav ul.nav li a:hover span {
                    background-position: -500px -99px;
                    height: 35px;
                    position:absolute;
                    top:0; 
                }
            #nav ul.nav li.current a {
                background-position: 5px -144px;
                color: #FFF;
            }
                #nav ul.nav li.current a span {
                    background-position: -500px -144px;
                }
     
#header {
    width: 100%;
    height: 200px; 
    background: #000000 url(../images/headerbg.jpg) 0 0 repeat-x;
    border-bottom: solid 3px #E2E2E2;
    border-top: solid 2px #FF8700;
}
    #header #header-inner {
        width: 960px;
        margin: 0 auto;
        height: 200px;
    }
        #header #header-inner #site {
            float: left;
            width: 470px;
            height: 120px;
            padding: 60px 40px 20px 40px;
            font-family: georgia, arial, helvetica, sans-serif;
            font-size: 38px;
            color: #FFF;
        }
            #header #header-inner #site span {
                font-size: 20px;
            }
        #header #header-inner #logo {
            float: left;
            width: 221px;
            text-align: right;
            padding-top: 15px;
            height: 175px;
            overflow: hidden;
            padding-left: 189px;
        }
        
        header #header-inner #logo #logos {
        	width: 189px;
        	height: 170px;
        	overflow: hidden;
        }

#footer {
    width: 100%;
    height: 80px; 
    background: #000000  url(../images/headerbg.jpg) 0 0 repeat-x;
    border-top: solid 5px #FF8700;
}
    #footer #footer-inner {
        width: 960px;
        margin: 0 auto;
        height: 80px;
    }
        #footer #footer-inner #copyright {
            width: 440px;
            float: left;
            margin: 0 auto;
            height: 30px;
            padding: 20px;
            color: #fff;
            font-size: 12px;
        }
        #footer #footer-inner #gato-logo {
            width: 450px;
            margin: 0 auto;
            height: 70px;
            padding: 5px 15px;
            text-align: right;
            float: left;
        }


#page {
    width: 920px;
    margin: 0 auto;
    background-color: #FFF;
    padding: 20px;
	font-size: 13px;
	clear: both;
}
	#page ul.list {
		list-style-type: disc;
		margin: 1em 40px;
	}
	#page p {
		margin: 1em 0;	
		text-align: justify;
	}
	#page p.crumbs {
		margin-top: 0px;	
	}
	
	#page #left {
		float: left;
		width: 600px;
		margin-right: 25px;
		clear: both;
	}
		#page #left h3 {
			font-family: georgia, arial, helvetica, sans-serif;
			font-size: 16px;
		}
	#page #left img {
		float: left;
		padding: 5px;
		border: solid 1px #d1d1d1;
		margin-right: 10px !important;
		margin-bottom: 10px !important;
	}
	
	
	#page .right {
		float: right;
	}
	
	#page #right {
		width: 295px;
		float: left;
	}
		#page #right h3 {
			font-family: georgia, arial, helvetica, sans-serif;
			font-size: 16px;
			margin: 1em 0 0 0;
            background: url(../images/banner.gif) 0 0 repeat-x;
            line-height: 35px;
            color: #FFF;
            width: 300px;
            padding-left: 25px;
		}
		#page #right ul {
			margin-left: 20px;
			width: 295px;
		}
		#page #right ul li {
			padding-left: 5px;
			border-bottom: dotted 1px #d1d1d1;
			background: url(../images/content-panel-bg.jpg) 0 0 repeat-x;
		}
            #page #right ul li:hover {
                background: url(../images/content-panel-bg-hover.jpg) 0 0 repeat-x;
            }

			#page #right ul li a {
				text-decoration: none;
				color: #333333;
				font-size: 14px;
                display: block;
                font-weight: normal;
                padding: 10px 10px 10px 20px;
				position: relative;
			}
				#page #right ul li a:hover {
					text-decoration: none;	
				}
				
				
/* CONTENT PANEL */
.content-panel {
	float: left;
	width: 920px;
	padding-bottom: 20px;
	padding-top: 20px;
} 
	.content-panel p.subtitle {
		clear: both;
		font-size:  25px;
		color: #4A1C54;
		padding-bottom: 20px;
	}
	.content-panel div.menu {
		width: 360px;
		float: left;
	}
		.content-panel div.menu ul li {
			width: 360px;
			line-height: 48px;
			background: url(../images/content-panel-bg.jpg) 0 0 repeat-x;
			border: solid 1px #d1d1d1;
			border-right: none;
			float: left;
		}	
			.content-panel div.menu ul li:hover, .content-panel div.menu ul li.active  {
				background: url(../images/content-panel-bg-hover.jpg) 0 0 repeat-x;	
			}
			.content-panel div.menu ul li h4 {
				margin: 0px !important;
				padding: 0px 10px;
				color: #4f4f4f;
				float: left;
				cursor: pointer;
				font-weight: bold;
			}
				.content-panel div.menu ul li h4 span {
					width: 330px;
					float: left;
					background: url(../images/content-panel-handle.jpg) right center no-repeat;
				}
		.content-panel div.container {
			width: 558px;
			float: left;
			min-height: 248px;
			position: relative;
		}
			.content-panel div.container ul li {
				display: none;
			}
				.content-panel div.container ul li.active {
					display: block;
				}
		.content-panel div.container div.content-panel-item {
			width: 518px;
			float: left;
			min-height: 208px;
			position: relative;
			padding: 0px 20px;
		}
			.content-panel div.container div.content-panel-item.active {
				display: block;
			}
			.content-panel div.container div.content-panel-item img {
				width: 558px;
				height: 248px;
				float: left;
			}
			.content-panel div.container div.content-panel-item div.overlay {
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 100;
				height: 34px;
				background: url(../images/content-panel-overlay.png) 0 0 repeat-x;
				width: 530px;
				padding: 10px 15px;
			}
				.content-panel div.container div.content-panel-item div.overlay p.more {
					float: right;
				}
				.content-panel div.container div.content-panel-item div.overlay p.main-title {
					float: left;
					width: 450px;
					font-family: arial;
					font-size: 12px;
					color: #2d2d2d;
					font-weight: bold;
					line-height: 16px;
				}
					.content-panel div.container div.content-panel-item div.overlay p.main-title span.sub-title {
						font-size: 11px;
						font-weight: normal;
					}
	
			.border-bottom {
				padding-bottom: 10px;
				border-bottom: dotted 1px #d1d1d1;
			}
			
/* DATE FORMAT STYLES */

.postdate {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 15px;
}
.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url(../images/dates.png);
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}

.m-01{background-position:0 4px}.m-02{background-position:0 -28px}.m-03{background-position:0 -57px}.m-04{background-position:0 -90px}.m-05{background-position:0 -121px}.m-06{background-position:0 -155px}.m-07{background-position:0 -180px}.m-08{background-position:0 -216px}.m-09{background-position:0 -246px}.m-10{background-position:0 -273px}.m-11{background-position:0 -309px}.m-12{background-position:0 -340px}.d-01{background-position: -50px 0}.d-02{background-position: -50px -31px}.d-03{background-position: -50px -62px}.d-04{background-position: -50px -92px}.d-05{background-position: -50px -123px}.d-06{background-position: -50px -154px}.d-07{background-position: -50px -185px}.d-08{background-position: -50px -216px}.d-09{background-position: -50px -248px}.d-10{background-position: -50px -278px}.d-11{background-position: -50px -309px}.d-12{background-position: -50px -340px}.d-13{background-position: -50px -371px}.d-14{background-position: -50px -402px}.d-15{background-position: -50px -434px}.d-16{background-position: -50px -465px}.d-17{background-position: -100px 0}.d-18{background-position: -100px -31px}.d-19{background-position: -100px -62px}.d-20{background-position: -100px -92px}.d-21{background-position: -100px -123px}.d-22{background-position: -100px -154px}.d-23{background-position: -100px -185px}.d-24{background-position: -100px -216px}.d-25{background-position: -100px -248px}.d-26{background-position: -100px -278px}.d-27{background-position: -100px -309px}.d-28{background-position: -100px -340px}.d-29{background-position: -100px -371px}.d-30{background-position: -100px -402px}.d-31{background-position: -100px -434px}.y-2006{background-position: -150px 0}.y-2007{background-position: -150px -50px}.y-2008{background-position: -150px -100px}.y-2009{background-position: -150px -150px}.y-2010{background-position: -150px -200px}.y-2011{background-position: -150px -250px}.y-2012{background-position: -150px -300px}.y-2013{background-position: -150px -350px}.y-2014{background-position: -150px -400px}.y-2015{background-position: -150px -450px}.y-2016{background-position: -150px -500px}


.news-item {
	padding-bottom: 0px;
	border-bottom: dotted 1px #d1d1d1;
	float: left;
	width: 550px;
	margin-top: 10px;
}
	.news-item.short {
		width: 329px;
	}
	.news-item.full {
		width: 578px;
	}
	.news-item div.info {
		float: left;
		width: 435px;
	}
		.news-item.short div.info {
			float: left;
			width: 264px;
		}
	.news-item .info.index img {
		height: 125px !important;
		width: auto !important;
		float: left;
		padding: 5px;
		border: solid 1px #d1d1d1;
		margin-right: 10px !important;
		margin-bottom: 10px !important;
	}
	
	
table th, table td {
	padding: 10px 5px;	
	border-bottom: dotted 1px #d1d1d1;
}

.home {
	float: left;
	width: 571px;
}
.welcome {
	float: left;
	width: 550px;
	padding-bottom: 10px;
	border-right: solid 1px #d1d1d1;
	padding-right: 20px; 
}
.section {
	float: left;
	width: 550px;
	padding: 10px 20px 10px 0px;
	border-right: solid 1px #d1d1d1;
}
.latest-news {
	float: left;
	width: 550px;
	border-right: solid 1px #d1d1d1;
	padding-right: 20px; 
}
.weeks-classes {
	float: left;
	width: 329px;
	margin-left: 20px;
}

/* ACCORDION STYLES */
p.question {
	border: solid 1px #d1d1d1;
	display: block;
	font-weight: bold;
	cursor: pointer;
	padding: 10px;
	background: url(../images/content-panel-bg.jpg) 0 0 repeat-x;
	float: left;
	width: 578px;
	margin: 0px !important;
}
	p.question:hover {
		background-image: url(../images/content-panel-bg-hover.jpg);	
	}

div.answer {
	padding: 10px 20px;	
	border: solid 1px #d1d1d1;
	border-top: none;
	border-bottom: none;
	float: left;
	width: 558px;
	display: none;
}
	div.answer p {
		line-height: 18px;	
	}


/* Teacher Styles */

#left div.teacher {
    float: left;
    width: 578px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: dotted 1px #d1d1d1;
}
    #left div.teacher div.photo {
        width: 196px;
        float: left;
        margin-right: 10px;
    }
        #left div.teacher img.photo {
            border: none !important;
            padding: 0px !important;
            margin-right: 0px !important;   
            margin-bottom: 0px !important; 
        }
    
    #left div.teacher div.profile {
    	float: left;
    	width: 372px;
    }
    #left div.teacher div p.name {
        font-size: 22px;
        font-weight: bold;
        color: #666;
        margin-top: 0px !important;
    }
        #left div.teacher div p.name span {
            font-size: 12px;
        }
        
    .intro {
    	float: left;
    	margin: 1.0em 0px;
    	line-height: 20px;
    }
        
        
 /* Class Styles */
 
 #left.full {
 	float: left;
 	width: 920px !important;
 	padding-top: 20px;
 }
 
 #class-info {
 	float: left;
 	width: 340px;
 	padding-right: 20px;	
 }
 	#class-info h3 {
 		font-size: 16px;
 		font-weight: bold;
 	}
 #map {
 	float: left;
 }
 	#map.small {
 		float: right;
 	}
 	#map.small iframe {
 		width: 340px !important;
 		height: 252px !important;
 	}
 
 /* Contact Styles */
 p.indent20 {
 	padding-left: 20px;
 }
 
 input.contact-field, textarea.contact-field {
 	width: 250px;
 	padding: 5px;
 }
 
 
 /* Photo Slider Styles */
.photo-viewer {
    float: left;
    width: 920px;
    height: 350px;
    
    overflow: hidden;
}
    .photo-viewer .photo-container {
        float: left;
        width: 920px;
        height: 312px;
        overflow: hidden !important;
        position: relative;
    }
        .photo-viewer .photo-container ul {
            width: 999999px;
            margin-left: 0px;
            list-style-type: none;
            position: relative;
        }
            .photo-viewer .photo-container ul li {
                float: left;
                width: 920px;    
            }
                .photo-viewer .photo-container ul li img {
                    float: left;
                    width: 920px;
                    height: 264px;
                }
                .photo-viewer .photo-container ul li div {
                    background-color: #FF8D00;
                    color: #fff;
                    text-align: center;
                    float: left;
                    height: 43px;
                    width: 910px;
                    padding-right: 10px;
                    font-size: 12px;
                    line-height: 16px;
                    padding-top: 5px;
                }
                	.photo-viewer .photo-container ul li div strong {
                		font-size: 14px;
                		line-height: 18px;
                	}
    
    .photo-viewer .controls {
        float: left;
        width: 920px;
        height: 38px;
    }
        .photo-viewer .controls p {
            float: left;
            width: 30px;
            text-align: center;
            line-height: 28px;
            margin-top: 0px !important;
        }
            .photo-viewer .controls p.prev, .photo-viewer .controls p.next {
                padding-top: 12px;
            }
            .photo-viewer .controls p.next {
            	text-align: right !important;
            }
            .photo-viewer .controls p.dots {
                width: 860px;
                line-height:33px;
                text-align: center !important;
            }
                .photo-viewer .controls p.dots a {
                    background-color: #A6A0A0;
                    padding:1px 4px;
                    font-size: 8px;
                    margin-right: 3px;
                }
                .photo-viewer .controls p.dots a.active {
                    background-color: #605F5D;
                }
                
                
 /* Paging Styles */
 #paging {
 	float: left;
 	width: 578px;
 }    
 	#paging table {
 	float: right;
 	}
 	#paging table th, #paging table td {
 		border: none;
 	}



.text-right {
	float: left;
	width: 860px;
	text-align: right !important;
}


/* CLASS LIST STYLES */
.class-list {
	float: left;
	width: 860px;
}
	.class-list .class {
		float: left;
		width: 860px;
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: solid 1px #d1d1d1;
	}
		.class-list .class p {
			float: left;
			width: 480px;
			margin-right: 20px;
			margin-top: 0.5em !important;
			margin-bottom: 0.5em !important;
		}
		.class-list .class h3 {
			margin-bottom: 10px;
		}
		
		
/* ALBUM STYLES */
ul.polaroids { width: 620px; margin: 0 0 18px -20px; }
	ul.polaroids li { display: inline; }
	ul.polaroids a { background: #fff;  border: solid 1px #d1d1d1;display: inline; float: left; margin: 0 0 27px 20px; width: 164px; padding: 10px 10px 15px; text-align: center; letter-spacing:0.8px; font-family: "Marker Felt","Courier New", Verdana, sans-serif; text-decoration: none; color: #333; font-size: 14px; font-weight:bold; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(1deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(1deg); }
	ul.polaroids img { display: block; width: 165px; height:150px; margin-bottom: 12px; float:none !important; padding:0px !important; border:none !important; }
	/*ul.polaroids a:after { content: attr(title); }*/
	
	/*ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
	ul.polaroids li:nth-child(3n) a { -webkit-transform: roate(-2deg); position: relative; top: -5px;  -moz-transform: rotate(-2deg); }
	ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(2deg); position: relative; right: 5px;  -moz-transform: rotate(2deg); }
	ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
	ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
	
	ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); }*/
	


/* STATUS MESSAGES */
.status, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.status {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../images/icons/info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('../images/icons/success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('../images/icons/warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('../images/icons/error.png');
}