/****************************** MAIN STYLES - background,dividers ******************************/

/* Main Container */
img, embed, object, video 
{
	max-width: 100%
}
body
{
	margin-top: 180px;
	margin-bottom: 80px;
}
/* Dividers */
div.blankSeparator 
{
	height: 1px;
	padding-top: 0px;
	margin: 0px 0;
	display: block;
}
/****************************** HOME - Content Part - Logo&Menu ******************************/
/* Header - Logo & Menu */
#top_header 
{
	width: 100%;
	margin-top: 0px;
	position: fixed;
	top: 0; 
	z-index: 999;
}
#header 
{
	width: 100%;
	background-color: #000000;
	margin-top: 0px;
}
.week_no
{
	font-family: 'Indie Flower', cursive;
	font-size: 50px;
	text-align: center;
	padding: 10px 0px 10px 0px;
}
#day_panel
{
	background-color: #fffeea;
	margin-top: 0px;
	padding: 10px 0px 10px 0px;
}
#day_panel .button a
{
	font-size: 32px;
	color: #000000;
}
#day_panel .button a:hover
{
	color: #4682b4;
}
#calendar_dates_panel
{
	background-color: #7fff00;
	margin-top: 0px;
	padding: 10px 0px 10px 0px;
	text-align: center;
	color: #000000;
}
.button
{
	float: left;
	width: 32px;
	height: 32px;
	padding: 5px 0px 5px 0px;
}
.return_button_container
{
	height: 32px;
	padding: 5px 0px 5px 0px;
}
.return_button a
{
	line-height: 32px;
	display: flex;
	align-items:center;
}
.return_button img
{
	margin-right: 10px;
}
.date
{
	float: left;
	width: 896px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 20px;
	text-align: center;
	padding: 0px 0px 0px 0px;
	color: #000000;
}
.date span
{
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
	color: #b22222;
}
.date a
{
	color: #b22222;
	text-decoration: none;
}
.date a:hover
{
	text-decoration: underline;
}

#list_school_holidays, #list_calendar_dates
{
	background-color: #4682b4;
	color: #ffffff;
	padding: 10px 10px 10px 10px;
	border-radius: 4px;
	margin-top: 10px;
}
#list_calendar_dates
{
	background-color: #b5b046;
}
#list_school_holidays h2, #list_calendar_dates h2
{
	color: #ffffff;
}
#list_school_holidays ul
{
	
}
#list_school_holidays ul li, #list_calendar_dates ul li
{
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	padding: 3px 2px 3px 2px;
	font-size: 14px;
	line-height: 17px;
}
#list_school_holidays ul li.month, #list_calendar_dates ul li.month
{
	margin-top: 4px;
	width: 100%;
	background-color: #ffffff;
	color: #4682b4;
	text-transform: uppercase;
	font-weight: 700;
}
#list_calendar_dates ul li.month
{
	color: #b5b046;
}
#menus
{
	font-family: 'Indie Flower', cursive;
	font-size: 40px;
	line-height: 50px;
	text-align: center;
	padding: 0px 0px 0px 0px;
}
#menus th 
{
	border: 2px solid #000000;
	font-family: 'Indie Flower', cursive;
	font-size: 25px;
	line-height: 25px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 70px;
	width: 20px;
	text-align: center;
	vertical-align: middle;
}
#menus th > div {
  transform: 
    /* Magic Numbers */
    translate(0px, 0px)
    /* 45 is really 360 - 45 */
    rotate(90deg);
	width: 80px;
 }
#menus td
{
	text-align: center;
	vertical-align: middle;
}
.menu_red, .menu_grey, .menu_blue, .menu_green, .menu_yellow, .menu_sides, .menu_dessert
{
	border: 2px solid #000000;
	padding: 20px 0px 20px 0px;
}
.menu_red
{
	background-color: #e20000;
	color: #ffffff;
}
.menu_grey
{
	background-color: #bbbbb4;
	color: #ffffff;
}
.menu_blue
{
	border-top: 0px;
	background-color: #0000c0;
	color: #ffffff;
}
.menu_green
{
	border-top: 0px;
	background-color: #00b050;
	color: #ffffff;
}
.menu_yellow
{
	border-top: 0px;
	background-color: #eafc00;
	color: #000000;
}
.menu_sides
{
	border-top: 0px;
	background-color: #ffffff;
	color: #000000;
}
.menu_dessert
{
	border-top: 0px;
	background-color: #ffffff;
	color: #000000;
}
#announcement_container
{
	width: 100%;
}
#announcement
{
	width: 50%;
	margin: 0 auto;
	background-color: #ffe4b5;
	border-radius: 8px;
	color: #000000;
	font-family: 'Indie Flower', cursive;
	font-size: 25px;
	line-height: 45px;
	padding: 10px 10px 10px 10px;
	text-align: center;
}

/* ------------ FOOTER ---------------------------                             
*/
#footerx
{
	position: fixed;
	bottom: 0px;
	background-color: #000000;
	width: 100%;
	height: auto;
	text-align: center;
}
.footerx
{
	padding: 10px 10px 10px 10px;
	width: 80%;
}
#footerx ul
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
#footerx li
{
	display: inline;
	margin: 0px 10px 0px 10px;
	padding: 0px 0px 0px 0px;
}
#footerx a
{
	text-decoration: underline;
	color: #ffffff;
	font-size: 28px;
	line-height: 30px;
}
#footerx a:hover
{
	color: #eafc00;
}

/* ------------ INFO PANEL ---------------------------
*/
#info_panel
{
	position: fixed;
	display: none;
	width: 40%;
	box-sizing: border-box;
	box-shadow: -4px 4px 8px 0px #9a9a9a;
	border-radius: 8px 0px 0px 8px;
	border-top: 5px solid #ffffff;
	border-left: 5px solid #ffffff;
	border-bottom: 5px solid #ffffff;
	margin: 30px 0px 20px 20px;
	padding: 10px 10px 10px 10px;
	top: 50px;
	right: 0px;
	color: #ffffff;
	background-color: #4682b4;
	z-index: 9999;
}
#info_panel h2
{
	color: #f0f819;
}
#info_panel a
{
	color: #e2c54d;
	text-decoration: none;
}
#info_panel a:hover
{
	text-decoration: underline;
}
#info_panel .info_panel_buttons
{
	text-align: right;
	margin-right: 10px;
}
#info_panel .info_panel_buttons a
{
	font-size: 30px;
	color: #ffffff;
}
@media only screen and (max-width: 700px) {

	#info_panel
	{
		width: 90%;
	}
}


/* #Page Styles
================================================== */
.content 
{
	padding-top: 20px;
}
.content.right {
	float: right;
}
.cal_button_container
{
	margin-top: 40px;
	text-align: center;
}
.cal_button
{
	width: 80%;
	margin: 0px auto;
	max-width: 300px;
	background-color: #4682b4;
	color: #ffffff;
	border-radius: 4px;
	padding: 10px 0px 10px 0px;
	box-shadow: 5px 5px 20px #414141;
}
.cal_button a
{
	color: #f3f3f3;
	font-size: 32px;
	line-height: 40px;
}
.cal_button a:hover
{
	color: #ffffff;
}

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.date
	{
		width: 704px;
	}
	#menus
	{
		font-size: 24px;
		line-height: 26px;
	}
	#menus th 
	{
		font-size: 20px;
		line-height: 20px;
		height: 50px;
		width: 20px;
	}
	#menus th > div 
	{
		width: 60px;
 	}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers - 420 layout) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.date
	{
		width: 356px;
	}
	#menus
	{
		font-size: 24px;
		line-height: 26px;
	}
	#menus th 
	{
		font-size: 20px;
		line-height: 20px;
		height: 50px;
		width: 20px;
	}
	#menus th > div 
	{
		width: 60px;
 	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers - 300 layout) */
@media only screen and (max-width: 479px) {
	.date
	{
		width: 236px;
	}
	#menus
	{
		font-size: 24px;
		line-height: 26px;
	}
	#menus th 
	{
		font-size: 20px;
		line-height: 20px;
		height: 50px;
		width: 20px;
	}
	#menus th > div 
	{
		width: 60px;
 	}
}

