@-webkit-keyframes snow {
	 	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	 	100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
	}
	@keyframes snow {
	 	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	 	100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
	}
	
	body {/*background-color: #aaa;*/ 
		background-image: url('/images/leaves-2737088_1280.jpg');
		background-size: cover;
		background-attachment: fixed;
	margin-bottom: 10px;
	margin-top: 10px;
		/*background-color: #6b92b9; background-image: url('images/snow/snow.png'), url('images/snow/snow3.png'), url('images/snow/snow2.png'); animation: snow 20s linear infinite; -webkit-animation: snow 20s linear infinite; background-attachment: fixed;*/ }
	.block {width: 900px; margin: auto; position: relative; /*z-index:-100;*/}
  
	.headers {position: relative; width:900px;}
		.header {height: 120px;background-color: rgba(238, 255, 85, 0.6);padding: 15px;font-family: 'Segoe UI Light';text-align: center;}
		.titleShort {display: none;}
		.logo {background-image: url('/images/s23l.png');width:200px;height:128px;background-size:contain;background-repeat:no-repeat;float:right;margin:15px;}
			.menu {width: 870px;height: 31px;background-color: rgba(160, 255, 153, 0.7);padding: 0px 15px;padding-top:10px;}
				.menu ul {list-style-type:none; margin-top: 0px; padding-left:0px;}
				.menu li {display: block; position: relative; float:left; margin-left: 7px;}
				.menu li ul {display: none; white-space: nowrap; background-color: #77ddff; margin-top: 9px; box-shadow: 2px 2px 5px #777;}
				.menu li:hover ul {position: absolute; z-index: 10; display: block; padding: 5px 0px; }
				.menu a {text-decoration: none; color: #000000;}
				.menu li ul li  { display: block; width:100%; font-family: 'Segoe UI Light'; font-size: 16px; margin-left: 0px;}
				.menu li ul li a {padding: 5px 15px; display: block;}
				.menu li ul li a:hover { border-left: solid 3px #ffa500;}
				.menu li ul li:hover { background-color: #5599ee; margin: 0px;}
				.menu_item {padding: 10px 14px; font-family: 'Segoe UI Light'; font-size: 16px;  } 
				.menu li:hover .menu_item {background-color: #1dac3f; color: #ffffff;}
				.menu_item:hover {background-color: #1dac3f;color: #ffffff;border-top: solid 3px #00d2ff;}
			/***********   MENU ?????   ************/
	  
	.main {position: relative;width:870px;background-color: rgba(223, 255, 170, 0.7);margin-top: 10px;padding: 15px;min-height: 1300px;}
		.info_block {position:absolute; float:right; margin-top: 10px; right: -20px;}
		.gcse {position: absolute; top: -15px; left: 10px; right: 0px;}
			.info {position: relative;  margin-left:auto; margin-top:10px; margin-bottom:10px; font-family: 'Segoe UI Light'}
				.info_head {position:relative;width:250px;padding: 10px;background-color: rgba(85, 255, 144, 0.8);text-align: center;font-size: 18px;}
				.corner {position:relative; margin-bottom: -5px;}
				.info_body {position:relative;width:250px;padding: 10px;background-color: rgba(153, 255, 221, 0.8);text-align: left;font-size: 15px;}
				hr {height: 1px; border: 0px none; color: #0000ff; background-color: #0000ff}
				a.news_link {text-decoration: none;}
				a.news_link:hover {text-decoration: underline; color: green;}
		.main_body {position: relative; width:600px; font-family: 'Segoe UI'; margin: 10px; top: 0px; text-align: justify;}
		.main_body h2 {font-family: 'Segoe UI Light';}
		.main_body p {text-indent:30px;}
		.main_body img {margin: 5px;}
		
	.bfooter {width: 880px;padding: 10px;text-align: center;background-color: #fce246;font-family: 'Segoe UI';}
	
	.article {width: 580px; padding: 0px 10px; margin-bottom: 20px;}
		.article_head {width: 560px; background-color: #aaaaff; padding: 10px; font-family: 'Segoe UI';}
		.article_head a{text-decoration: none; color: #337733;}
		.article_body {width: 560px; background-color: #aaddff; padding: 10px;}
		.article_bfooter {width: 560px; background-color: #55ddaa; padding: 0px 10px;}
			.article_bf_left {float: left}
			.article_bf_right {text-align: right;}
		
	.file_link {width: 300px; height: 58px; background-color: #88bbee; padding: 5px; color: #227744; margin-left: 50px; margin-bottom: 1px;}
	.file_link:hover {background-color: #99ddff;}
	.file_link_icon {width: 48px; height:48px; margin: 5px; margin-right: 15px;}
	
	.comment {margin-left: 25px; margin-top: 10px;}
		.comment_name {position: relative; background-color: #88ddff; padding:5px; margin-right: 20px; z-index: 2; border: dotted 1px;}
		.comment_body {position: relative; background-color: #aaeeff; padding: 10px; padding-top: 20px; margin-top: -10px; margin-left: 20px; border: dashed 1px;}
		.comment_pb {padding-bottom: 20px !important;}
		.admin_comment .comment_name {background-color: #88ff99;}
		.admin_comment .comment_body {background-color: #aaffbb;}
		.comment_replay {position: relative; background-color: #aaffbb; padding: 10px; margin-top: -10px; margin-left: 40px; margin-right: 20px; border: dashed 1px;}
		.comment_re_h {font-size: 10pt; font-weight: bold; margin-left: -8px; margin-top: -8px; margin-bottom: 5px;}
		.comment_form {padding: 10px; margin: 10px; background-color: #99ccff;}
		.comment_form textarea {resize:vertical; max-height:200px; min-height:75px; }
		
		/*** MODULES STYLES ***/
		.students {padding: 10px;background-color: #fdca91;display:inline-block;text-align: center;margin: 5px;font-size: 14px;}
			/*-- COLLECTIVE --*/
		.collective_button {background-color: #99bbff;}
			.collective_button:hover {background-color: #5599ff;}
			.collective_button:hover .collective_teachers {display: block;}
		.collective_teachers {display:none;}
			.collective_teach {background-color: #aaccff; width: 250px; margin: 5px; padding: 10px;}
			.collective_teachers a {text-decoration: none;}
			.collective_teach:hover {background-color: #22ff44; color: #225577}
		
		.collective_user {min-height: 300px; width: 575px;  padding: 10px; background-color: #99eeff; margin-bottom: 10px;  position: relative;}
			.collective_user_photo {height: 250px; float: left; padding: 15px; margin: 10px; background-color: #88ddee}
			.collective_user_title {color: blue; font-size: 28px; text-align: center; padding: 10px; background-color: #88eecc; font-family: 'Segoe UI';}
			.collective_user_type {color: green; font-size: 20px; padding: 5px; background-color: #77ddee; margin-left: 240px; text-align: left}
			.collective_user_other {color: #223399; padding: 10px; margin-left: 240px;}
				.collective_user_problem {color: #880000; padding-left: 20px;}
			.collective_user_other2 {color: #000000; padding-left: 10px;}
			.collective_user_class {position: absolute; top: 10px; right: 15px; color:  #087;}
			/*-- COLLECTIVE END --*/
		
			/*-- PHOTOGALLERY --*/
		.photoalbum {position: relative; padding: 10px; background-color: #99ddff; width: 170px; margin: 5px; text-align: center; float: left;}
		.photoalbum:hover {background-color: #77bbee;}
		.photoalbum a {text-decoration: none;}
		.photo_slides {position: relative; width: 570px; height: 320px; background-color: #99ddaa; padding: 15px; text-align: center;}
		.photo_prev {position: absolute; width: 285px; height: 320px; cursor: pointer; text-align: left;}
		.photo_next{position: absolute; width: 285px; height: 320px; margin-left:285px; cursor: pointer; text-align: right;}
		.photoalbum_date {position: absolute; background-color: #ccffdd; opacity:0.5; font-size: 11pt; right: 10px; font-weight: bold; color: #5500ff; padding: 2px;}
			/*-- PHOTOGALLERY END --*/
			
			/*-- TIMETABLE --*/
		.tt_head  a{text-decoration: none; color: #000000;}
		.tt_type_btn {width: 180px; padding: 10px; margin: 5px; background-color: #55aaff; float: left; text-align: center;}
		.tt_type_btn_time {width: 150px; padding: 10px; margin: 5px; background-color: #8888dd; float: left; text-align: center;}
		.tt_type_btn:hover {background-color: #77ccff;}
		.tt_type_btn_time:hover {background-color: #aaaaff;}
			#tt_students_picker {width: 190px; padding: 10px; height: 32px; background-color: #ffcc44; margin-bottom: 25px;}
			#tt_teachers_picker {width: 190px; padding: 10px; height: 32px; background-color: #ffcc44; margin-bottom: 25px; margin-left: 210px;}
			#tt_time_picker {width: 160px; padding: 10px; height: 32px; background-color: #ffcc44;; margin-bottom: 25px; margin-left: 420px;}
		.tt_back_btn {position: absolute; padding: 10px; top: 50px; background-color: #55ff55; width: 100px; text-align: center; cursor: pointer;}
		.tt_back_btn:hover {background-color: #99ff99;}
		.tt_sel_link {text-decoration: none; color: #0000bb;}
			.tt_class {width: 90px; padding: 10px; margin: 5px; background-color: #55ff88; float: left; text-align: center;}
			.tt_class:hover {background-color: #00dd33; border-radius: 7px;}
			.tt_teacher {width: 165px; display: inline-block; padding: 10px; margin: 5px; background-color: #55ff88; text-align: center; vertical-align:middle;}
			.tt_teacher:hover {background-color: #00dd33; border-radius: 7px;}
		.tt_day {margin:0 auto; width: 300px; text-align: left;}
		.main_schd {width: 60px;background: #ffe999;padding:5px;text-align: center;position: absolute;left: -40px;top: -10px;border: 1px solid #99ee99;font-family: 'Segoe UI Light';}
		.main_schd:hover {background: #fffa59;}
		.main_schd .schd_date {font-size: 9pt; font-weight: bold;}
			/*-- TIMETABLE END --*/
			
		.star {height: 20px; cursor: pointer;}
		
		/*-- LIBRARY --*/
		.cl_block {width: 55px; height: 25px; background-color: #55ffbb; margin: 5px; padding: 5px; float: left; text-align: center; cursor: pointer;}
		.cl_block a {text-decoration: none;}
		.cl_block:hover {background-color: #33ff55;}
		.lib_sel_ct {width: 180px; height: 25px; background-color: #55ffbb; margin: 5px; padding: 5px; float: left; text-align: center; cursor: pointer;}
		.lib_sel_ct a {text-decoration: none;}
		.lib_sel_ct:hover {background-color: #33ff55;}
		.book_cont {width: 290px; margin: 5px; height: 175px; background-color: #77ddff; float: left;}
		.book_cont_large {width: 590px; margin: 5px; height: 175px; background-color: #77ddff; float: left;}
			.book_cover {height: 175px; float: left; margin-right: 5px;}
			.book_info {padding: 5px; height: 140px; }
				.book_autor {color: #0000ff; font-size: 16px; text-align: center;}
				.book_name {color: #bb7700; font-size: 24px; text-align: center;}
				.book_category {text-align: right; color: #aa0055}
				.book_about {display:none;}
				.book_about_visible {width: 295px; height:165px; float: right; font-size: 11pt; position: relative; display:block; overflow-y: scroll; padding:5px;}
				.book_file_info {}
					.book_more_info {float:right; margin-right: 5px; cursor: pointer; position: relative;}
					.book_next_btn {right: -5px; position: absolute;}
					.book_info_btn {right: 10px; position: absolute;}
			/*-- LIBRARY END --*/
			
	/*-- PAGE STYLES --*/
	.page_container {margin-left: 50px;}
	.page_link {text-decoration: none;}
	.page_arrow {display:inline-block; padding: 5px; margin: 3px; background: #00dd99; width: 20px; height: 20px; text-align: center;}
	.page_arrow:hover {background: #55eebb;}
	.page_num {display:inline-block; padding: 5px; margin: 3px; background: #55ff99; width: 20px; height: 20px; text-align: center;}
	.page_num:hover {background: #00ee55;}
	.page_curr {display:inline-block; padding: 5px; margin: 3px; background: #77ddff; width: 20px; height: 20px; text-align: center;}
	
	.download_btn {
		display: inline-block;
		background-image: url('images/download_btn.png');
		text-decoration: none;
		background-size: 100%;
		width: 24px;
		height: 24px;
		padding: 5px;
		vertical-align:middle;
	}
	
	.year_tile, .month_tile {
	    font-size: 14pt;
        text-align: center;
	}
	.year_tile {
        width: 60px;   
        background-color: #008888;
	}
	.month_tile {
        width: 35px;   
	}
	.year_tile.selected, .month_tile.selected {
	    border: solid 3px #000088;
	    transform: scale(1.1);
	}
	.year_tile.all {
	    width: 45px;
	    background-color: #008800;
	}
	.month_tile.all {
	    width: 45px;
	    background-color: white;
	}
	.month_tile.autumn {
	    background-color: orange;
	}
	.month_tile.winter {
	    background-color: #a6a6ff;
	}
	.month_tile.spring {
	    background-color: #46ff46;
	}
	.month_tile.summer {
	    background-color: yellow;
	}
	.year_tile:hover, .month_tile:hover {
	    transform: scale(1.1);
	    box-shadow: 0px 0px 5px #555;
	}
	.year_tile a, .month_tile a {
	    display: block;
	    text-decoration: none;
        padding: 5px 0px;
	}
	.year_tile a {
        color: #ffffff;
	}
	.month_tile a {
	    color: black;
	}