@charset "utf-8";
/* CSS Document */

body{ font-family:Verdana, Geneva, sans-serif; font-size:15px; text-align:center; margin:0px; background:#f6f6f6 url(images/white_bg.png); color:#322921; }

 
@font-face {font-family: typewriter;  src: url(fonts/typewriter.otf); } 
.font_typewriter{	font-family: typewriter;  font-size:26px; color:#327500; } 

@font-face {font-family: notepad;  src: url(fonts/notepad.ttf); } 
.font_notepad{	font-family: notepad;  font-size:26px; color:#327500; } 

@font-face {font-family:universal;  src: url(fonts/universal-regular.otf); } 
.font_universal{	font-family: universal; font-weight:normal; }

@font-face {font-family:universal-medium;  src: url(fonts/universal-medium.ttf); } 
.font_universal_medium{	font-family: universal-medium; font-weight:normal; }





 
a{ font-weight:normal; color:#293d08; text-decoration:none;  }
a:hover{  color:#4a6f10; text-decoration:none;  }
a img{ border:none; }

img{ vertical-align:text-bottom; border:none; }

ul{ margin:0px; padding:0px 0px 0px 40px;  }
li{ list-style:circle; }
 
h1{ color:#293d08; font-weight:bold; margin:0px; font-size:35px; font-family:universal; padding:0px 0px 0px 100px;text-align:left; }
h2{ color:#322921; font-size:16px; font-family:universal; font-weight:bold; padding:5px 0px 0px 100px; margin:0px; text-align:left;  }
h3{ color:#293d08; font-weight:normal; margin:0px; padding:0px; font-size:25px; font-family:typewriter;   text-align:left; }

hr{ margin:0px; padding:0px; }



.clear{ clear:both; }

.white{ color:#fff; }
.green{ color:#4a6f10; }
.dark_green{ color:#1a340e; }
.red{ color:#b51211; }
.dark_red{ color:#6d0a05; }
.light_brown{ color:#AA9884; }
.brown{ color:#322921; }
.brown2{ color:#5A4838; }
.beige{color:#f4e2c2;}
.grey{ color:#666; }

.black_line{ width:100%; height:5px; background:#000; }

.text_block{ font-family:universal; text-align:justify; font-size:18px; word-spacing:1px; line-height:190%; font-weight:normal; color:#323021; }
.text_block_header{ padding:10px 0px 10px 0px;  }
.text_block_footer{ text-align:left;   font-family:universal; font-size:20px;  padding:20px 0px 0px 40px; } 
 
 
.flex{ display: flex; }
.flex-1{ flex:1 1 auto; }
.flex-2{ flex:2 1 auto; }

.center-vertical{ display: flex; flex-direction: column; justify-content: center; }

.space-top{ margin-top:0.5em; }
.space-top-1{ margin-top:1em; }
 
.online-lessons{}
.online-lessons-icon{ margin: 0em 1em 0em 0em; }
.online-lessons-icon img{ height: 2em; }
.online-lessons-text{ text-align: left; }

.info-message{ background: #fff;  box-shadow: 0px 0px 5px #e0e0e0; border-radius: 4px; overflow: hidden; 
margin: 0em 0em 1em 0em; }
.info-message-icon{ margin: 0em 1em 0em 0em; }
.info-message-icon img{ height: 4em; }
.info-message-text{  text-align: left;
    font-family: universal-medium;
    color: #626262;
    font-size: 1.2em;
 }
 
.article{   padding:15px; margin:5px 0px 15px 0px;
  }
.article_special_blue{ background:#CEE1FD;  padding:15px; box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc; margin:5px 0px 15px 0px; text-align:left;} 
.article_special_blue img{ vertical-align:middle; } 
.article_special_brown{ background:#DEDED8;  padding:15px; box-shadow: 0px 0px 5px #ccc;  -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc; margin:5px 0px 15px 0px; }
.article_special_green{ background:#E3FFCA;  padding:15px; box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc; margin:5px 0px 15px 0px; text-align:left; font-family:universal; font-size:18px;}
.article_special_green ul li{ padding:10px 0px 0px 0px;}


.article_image{ float:left; padding:5px 0px 0px 0px; }
.anouncement{ background:url(images/anouncement_bg.png);  box-shadow: 0px 0px 5px #ccc; margin:10px 0px 10px 0px;   padding:20px; text-align:left;   line-height:25px; overflow:auto; } 
.anouncement_title{ font-weight:bold; font-size:18px; color:#333; }
.anouncement_text{ color:#333; }
.anouncement_footer{ font-size:12px; text-align:right; color:#777; } 
 
#wrapper{ min-width:1200px;}

#banner_wrapper{ text-align:center;  background:url(images/banner_bg.png) repeat-x;    }
#banner{ width:1200px; height:650px; margin:0px auto 0px auto; background:url(images/banner.png) no-repeat;   }
#banner h1{   font-weight:normal; margin:0px; padding:0px; font-size:48px; font-family:typewriter;   text-align:center; }




 
#circle{ position:absolute; width:187px; height:187px;  top:440px;  z-index:11;  
transition: all 0.5s linear;
-moz-transition:all 0.5s linear;; /* Firefox 4 */
-webkit-transition:all 0.5s linear;; /* Safari and Chrome */
-o-transition:all 0.5s linear;; /* Opera */   
}
.circle_hover{ width:100%; height:1px; }

#menu_wrapper{ text-align:center; position:relative;  }
#menu{   position:relative; padding:500px 0px 0px 0px;  z-index:10;    }
#menu a{ color:#fff; text-decoration:none; font-weight:normal; }
#menu a:hover{ color:#9C0; }

.menu_item{ position:relative; float:left; color:#f6f6f6; font-family:typewriter; font-size:24px; text-align:left; margin-left:100px; z-index:12; }



#content_wrapper{ text-align:center; padding:0px 0px 100px 0px; }
#content{width:1200px;   margin:0px auto 0px auto;    }

#slider{ width:880px; height:250px; background:url(images/slider.png) no-repeat; }

#left{ float:left; width:900px;}

#right{ float: left; width:300px; }


#photo_gallery_panel{ text-align:left; padding:5px; background:#6d0a05; border-radius:15px; margin-bottom:10px;  } 
#photo_gallery_panel_ovelay{ background:#f6f6f6; border-radius:15px;   }
#photo_gallery_panel_text{ font-weight:bold; font-size:35px; font-family:typewriter; padding:30px 0px 20px 0px;} 
 
#latest_news{ text-align:left; padding:5px; background:#1a340e; border-radius:15px;  } 
#latest_news_ovelay{ background:#f6f6f6; border-radius:15px;  }
.list_element{ font-family:universal; font-size:18px; margin:10px; padding:10px; border-radius:5px; }
.list_element:hover{ background:#CAFEA7; }
#latest_news img{ vertical-align:text-bottom; }

#latest_news_header{ padding:0px 10px 0px 10px;  font-weight:bold;   font-size:25px; font-family:typewriter;   text-align:center; }
#latest_news_footer{ text-align:right; padding:10px 30px 15px 0px; font-family:typewriter; font-size:18px;    }
 
#footer_wrapper{ text-align:center; background:url(images/footer_bg.png) repeat-x ; margin:0px;  }
#footer{ width:1200px; height:450px; margin:0px auto 0px auto;  background:url(images/footer.png) no-repeat; }

#footer_text{  padding:370px 0px 0px 35px; color:#f6f6f6; text-align:left; }
#footer_text a{ font-size:18px;  color:#f6f6f6; font-family:universal;   }
#footer_text a:hover{ font-size:18px;  color:#ccc;   }

#spectre_logo_div_container{ position:relative; z-index:2;  }
#spectre_logo_div{ position:absolute; top:355px; left:320px; z-index:3;   }

#spectre_logo{ border-radius:10px;   
transition: all 0.5s linear;
-moz-transition:all 0.5s linear;; /* Firefox 4 */
-webkit-transition:all 0.5s linear;; /* Safari and Chrome */
-o-transition:all 0.5s linear;; /* Opera */
}

#spectre_logo:hover{ box-shadow: 0px 0px 15px #348002; -moz-box-shadow: 0px 0px 15px #348002; -webkit-box-shadow: 0px 0px 15px #348002; }



#index{   padding:20px 50px 40px 20px;   }


/********************************** CONTACT.php ****************************************/

#contact{}

#contact_details{   }

#contact_details h1{ color:#293d08; font-weight:bold; margin:0px; font-size:35px; font-family:universal; padding:0px 0px 0px 0px;text-align:left; }

#contact_form_div h1{ color:#293d08; font-weight:bold; margin:0px; font-size:35px; font-family:universal; padding:0px 0px 0px 0px;text-align:left; }

#contact_form_div table{}
#contact_form_div td{ padding:5px 10px 5px 10px;}
#contact_form_div th{}
#contact_form_div input{ padding:10px; border:1px solid #999; border-radius:5px; }
#contact_form_div input:focus{ box-shadow: 0px 0px 5px #87C80F; -moz-box-shadow: 0px 0px 5px #87C80F;  -webkit-box-shadow: 0px 0px 5px  #87C80F;}
#contact_form_div textarea{ padding:10px; border:1px solid #999; border-radius:5px; }
#contact_form_div textarea:focus{ box-shadow: 0px 0px 5px #87C80F; -moz-box-shadow: 0px 0px 5px #87C80F;  -webkit-box-shadow: 0px 0px 5px  #87C80F;}

#contact_map{}
#contact_map h1{ color:#293d08; font-weight:bold; margin:0px; font-size:35px; font-family:universal; padding:0px 0px 0px 30px;text-align:left; }


/*************************************  PHOTO GALLERIES  *****************************************/

.photo_gallery{ background:#f6f6f6;  padding:15px;  box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc; margin:5px 0px 15px 0px; width:200px; height:240px; overflow:hidden; float:left; margin:0px 20px 20px 0px;  }
.photo_gallery img{  box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc; border:5px solid #f0f0f0; }
.photo_gallery a{   color:#333; font-family:Universal; font-size:18px; letter-spacing:0px; word-spacing:0px;   }
.photo_gallery a:hover{ color:#060; }
.photo_gallery_img_container{ margin-bottom:10px;}

/*************************************  PHOTOS  ****************************************************/
#gallery_title{ font-family:notepad; font-weight:bold; font-size:25px; margin:0px 0px 20px 0px; }
.photo{background:#f6f6f6;  padding:20px; box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc; 
margin:5px 0px 25px 0px;   float:left; margin:0px 20px 0px 0px; }

/*************************************  VIDEO GALLERY  ****************************************************/

.video_gallery{background:#f6f6f6;  padding:15px; box-shadow: 0px 0px 5px #ccc;  -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc; margin:5px 0px 15px 0px; width:200px; height:180px; float:left; margin:0px 20px 0px 0px;}
.video_gallery img{  margin:0px 0px 10px 0px; }
.video_gallery a{   color:#333; font-family:notepad; font-size:16px; font-weight:bold; }
.video_gallery a:hover{ color:#060; }

/*************************************  VIDEO    ****************************************************/
.video{ background:#f6f6f6;  box-shadow: 0px 0px 5px #ccc;  -moz-box-shadow: 0px 0px 5px #ccc;  -webkit-box-shadow: 0px 0px 5px #ccc;  padding:10px; margin:10px 0px 20px 0px;}
.video_content{ float:left; width:320px; text-align:left; margin-left:10px; }
.video_title{}
.video_text{}
.youtube_video{  margin:10px; float:left;    } 

/*************************************  GAMES   ****************************************************/

#text2speech_flash{ padding:50px 0px 50px 0px; }

#word_puzzle{ text-align:center;  }
#word_puzzle_game{ padding:20px 0px 50px 0px; }