@font-face {
    font-family: 'boowas_handwritingregular';
    src: url('../fonts/boowahandwriting-webfont.eot');
    src: url('../fonts/boowahandwriting-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/boowahandwriting-webfont.woff') format('woff'),
         url('../fonts/boowahandwriting-webfont.ttf') format('truetype'),
         url('../fonts/boowahandwriting-webfont.svg#boowas_handwritingregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'animatedmedium';
    src: url('../fonts/animated-webfont.eot');
    src: url('../fonts/animated-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/animated-webfont.woff') format('woff'),
         url('../fonts/animated-webfont.ttf') format('truetype'),
         url('../fonts/animated-webfont.svg#animatedmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Header */
header
{
	height: 80px;
	position: relative;
	margin-top: 1em;
}

header div#home
{
	position: absolute;
	left: 50px;
	top:0;
}

header div#home , header div#home a
{
	width: 90px;
	height: 80px;
}

header div#home a img
{
	max-width: 100%;
}

header div#home a
{
	display: block;
}

header div#title h1
{

	line-height: 80px;
	font-family: 'boowas_handwritingregular';
	color: #640E0E;
	text-align: center;
	font-size: 2.5em;
}

/* Main body#drawing-body */
*
{
	padding: 0 0;
	margin: 0 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box; 
	border:none;
	-webkit-transition: all 0.5s ease-in-out;
	        transition: all 0.5s ease-in-out;
}

html#drawing-html,body#drawing-body
{
	min-height: 700px;
	height: 100%;
}

body#drawing-body
{	

	position: relative;
	/* the background image does not stick to the bottom. this quick hack removes that space. */
	display: inline-block;
	width: 100%;
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/drawing/drawing_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, #9AD7F6;
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/drawing/drawing_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-gradient(radial, center center, 0, center center, 100%, from(#ffffff), to(#9ad7f6));
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/drawing/drawing_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#9ad7f6));
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/drawing/drawing_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#9ad7f6 100%);
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/drawing/drawing_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-radial-gradient(center, ellipse, #ffffff 0%, #9ad7f6 100%);
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/drawing/drawing_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, radial-gradient(ellipse at center, #ffffff 0%,#9ad7f6 100%);
	-webkit-background-size: auto auto, 100% auto,84px 49px, 56px 36px, 84px 49px,cover;
	        background-size: auto auto, 100% auto,84px 49px, 56px 36px, 84px 49px,cover;
}

/* Footer */
footer 
{
	position: absolute;
	bottom: 120px;
	left: 50px;
	-webkit-backface-visibility: hidden;
}

footer, footer a
{

	width: 80px;
	height: 61px;
}

footer img
{
	max-width: 100%;
}

#message-big-drawing
{
	position: absolute;
	width: 416px;
	height: 466px;
	background:url('../img/galleries/drawing/splash.png') no-repeat center center;
	bottom:90px;
	right: 0;
}

#message-big-drawing p
{
	font-family: 'animatedmedium';
	color: #640E0E;
	line-height: 1.2em;
	font-size: 1.5em;
	width: 200px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -115px;
	top: 100px;
	-webkit-transform: rotate(-5deg);
	    -ms-transform: rotate(-5deg);
	        transform: rotate(-5deg);
}

#message-big-drawing p a
{
	font-size: 0.85em;
}

#message-small-drawing , #message-small-photo
{
	display: none;
}

/* styling the menu items */
section ul#drawing-menu 
{
	width: 800px;
	list-style:none;
	text-align: center;
	margin: 50px auto;
	margin-bottom: 0;
}

section ul#drawing-menu li 
{
	width: 140px;
	height: 50px;

	display: inline-block;
	margin: 0 10px 50px 10px;
}

section ul#drawing-menu li a 
{
	display: block;
	text-decoration: none;
	width: 140px;
	line-height: 50px;
	text-align: center;
	color: #640E0E;
	font-family: 'boowas_handwritingregular';
	font-weight: bold;
	font-size: 1.15em;
	border-radius: 0.5em;
	border: 2px solid black;
}



ul#drawing-menu li#year-2007 a
{
	background-color: #68c8ca;
}

ul#drawing-menu li#year-2008 a
{
	background-color: #98cc66;
}

ul#drawing-menu li#year-2009 a
{
	background-color: #f26721;
}

ul#drawing-menu li#year-2010 a
{
	background-color: #fecd08;
}

ul#drawing-menu li#year-2011 a
{
	background-color: #f89838;
}

ul#drawing-menu li#year-2012 a
{
	background-color: #f06497;
}

ul#drawing-menu li#year-2013 a
{
	background-color: #3299cc;
}

ul#drawing-menu li#year-2014 a
{
	background-color: #9898cb;
}

/* send your drawing message */

/* all styles for the photo gallery page go here */
html#photo-html,body#photo-body
{
	min-height: 900px;
	height: 100%;
}

body#photo-body
{
	position: relative;
	/* the background image does not stick to the bottom. this quick hack removes that space. */
	display: inline-block;
	
	width: 100%;
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/photo/photo_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, #9AD7F6;
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/photo/photo_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-gradient(radial, center center, 0, center center, 100%, from(#ffffff), to(#9ad7f6));
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/photo/photo_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#9ad7f6));
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/photo/photo_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#9ad7f6 100%);
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/photo/photo_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, -webkit-radial-gradient(center, ellipse, #ffffff 0%, #9ad7f6 100%);
	background:  url('../img/sun.png') no-repeat 98% 2.5%, url('../img/galleries/photo/photo_gallery_bg.png') no-repeat bottom center, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 40%, radial-gradient(ellipse at center, #ffffff 0%,#9ad7f6 100%);
	-webkit-background-size: auto auto, 100% auto,84px 49px, 56px 36px, 84px 49px,cover;
	        background-size: auto auto, 100% auto,84px 49px, 56px 36px, 84px 49px,cover;
}

#message-small-photo
{
	margin-top: 2em;
}
#photo-menu
{
	
	margin-top: 50px;
	text-align: center;
	position: relative;
}

#photo-menu li
{
	display: inline-block;
	font-family: 'boowas_handwritingregular';
	font-size: 1.5em;
	position: relative;
	margin-right: -20px;
}

#photo-menu li:last-child
{
	margin-right: 0;
}

#photo-menu li a
{
	display: table-cell;
	width: 185px;
	height: 182px;
	text-decoration: none;
	vertical-align: middle;
}

#photo-menu li#gallery1
{
	background: url("../img/galleries/photo/green.png") no-repeat center center;
	-webkit-background-size: 185px 182px;
	        background-size: 185px 182px;
	-webkit-transform: rotate(-25deg);
	    -ms-transform: rotate(-25deg);
	        transform: rotate(-25deg);
	z-index: 10;
}

#photo-menu li#gallery1 a
{
	color: #98CB67;
}


#photo-menu li#gallery2
{
	background: url("../img/galleries/photo/sky.png") no-repeat center center;
	-webkit-background-size: 185px 182px;
	        background-size: 185px 182px;
	-webkit-transform: rotate(25deg);
	    -ms-transform: rotate(25deg);
	        transform: rotate(25deg);
	z-index: 8;
}

#photo-menu li#gallery2 a
{
	color: #69C8C9;
}

#photo-menu li#gallery3
{
	background: url("../img/galleries/photo/blue.png") no-repeat center center;
	-webkit-background-size: 185px 182px;
	        background-size: 185px 182px;
	-webkit-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	        transform: rotate(30deg);
	z-index: 9;
}

#photo-menu li#gallery3 a
{
	color: #3298CB;
}

#photo-menu li#gallery4
{
	background: url("../img/galleries/photo/red.png") no-repeat center center;
	-webkit-background-size: 185px 182px;
	        background-size: 185px 182px;
	-webkit-transform: rotate(-30deg);
	    -ms-transform: rotate(-30deg);
	        transform: rotate(-30deg);
}

#photo-menu li#gallery4 a
{
	color: #CA2027;
}


#photo-menu li#gallery5
{
	background: url("../img/galleries/photo/purple.png") no-repeat center center;
	-webkit-background-size: 185px 182px;
	        background-size: 185px 182px;
	-webkit-transform: rotate(-30deg);
	    -ms-transform: rotate(-30deg);
	        transform: rotate(-30deg);
	z-index: 11;
}

#photo-menu li#gallery5 a
{
	color: #666698;
}

#photo-menu li#latest-photos
{
	background: url("../img/galleries/photo/yellow.png") no-repeat center center;
	-webkit-background-size: 185px 182px;
	        background-size: 185px 182px;
	-webkit-transform: rotate(30deg);
	    -ms-transform: rotate(30deg);
	        transform: rotate(30deg);
	z-index: 11;
}

#photo-menu li#latest-photos a
{
	color: #F7971D;
}

/* make menu responsive */
/* the send your photo to uptoten message */



@media all and (min-width: 950px) and (max-width: 1349px) {

	#message-big-drawing 
	{
		width: 300px;
		height: 336px;
		-webkit-background-size: 300px 336px;
		        background-size: 300px 336px;
	}

	#message-big-drawing p 
	{
	    width: 140px;
	    line-height: 1.2em;
	    font-size: 1.2em;
	    margin-left: -80px;
	    top: 70px;
	}


}

@media all and (min-width: 550px) and (max-width: 900px) {

	html#drawing-html,body#photo-body
	{
		min-height: 850px;
	}
	section ul#drawing-menu 
	{
		width: 500px;
	}
}

@media all and (min-width: 320px) and (max-width: 550px) {

	html#drawing-html,body#drawing-body
	{
		min-height: 750px;
	}

	section ul#drawing-menu 
	{
		width: 320px;

	}

	section ul#drawing-menu li 
	{
		width: 115px;
	}

	section ul#drawing-menu li a 
	{
		display: block;
		text-decoration: none;
		width: 115px;

		font-size: 1em;

	}

}


@media all and (min-width: 768px) and (max-width: 950px) {
	#message-big-drawing 
	{
		width: 250px;
		height: 280px;
		-webkit-background-size: 250px 280px;
		        background-size: 250px 280px;
	}

	#message-big-drawing p 
	{
	    width: 120px;
	    line-height: 1.2em;
	    font-size: 1em;
	    margin-left: -65px;
	    top: 75px;
	}


}

@media all and (min-width: 320px) and (max-width: 767px) {
	#message-big-drawing , #message
	{
		display: none;
	}
	#message-small-drawing , #message-small-photo
	{
		display: table;
		width: 500px;
		margin: 0 auto;
		text-align: center;
		background-color: rgba(0,0,0,0.5);
		color:white;
		height: 80px;
		
		font-size: 1.2em;
		border-radius: 10px;
		font-family: 'boowas_handwritingregular';
		position: relative;
	}

	#message-small-drawing p , #message-small-photo p
	{
		display: table-cell;
		vertical-align: middle;
	}
	#message-small-drawing a  , #message-small-photo a
	{
		color:white;
		text-decoration: none;
	}
	html#photo-html
	{
		min-height: 740px;
	}


	#photo-menu li
	{
		font-size: 1.5em;
		margin-right: 0;
	}

	#photo-menu li a
	{
		width: 130px;
		height: 128px;
	}

	#photo-menu li#gallery1
	{
		-webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		        transform: rotate(0deg);
	}

	#photo-menu li#gallery2
	{
		-webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		        transform: rotate(0deg);
	}

	#photo-menu li#gallery3
	{
		-webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		        transform: rotate(0deg);
	}

	#photo-menu li#gallery4
	{
		-webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		        transform: rotate(0deg);
	}

	#photo-menu li#gallery5
	{
		-webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		        transform: rotate(0deg);
	}

	#photo-menu li#latest-photos
	{
		-webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		        transform: rotate(0deg);
	}




}

@media all and (min-width: 601px) and (max-width: 767px) {


	header
	{
		margin-top: 0;
	}

	header div#title h1
	{
		font-size: 2em;
	}

}

@media all and (min-width: 320px) and (max-width:600px){

	header
	{
		margin-top: 0;
		height: 50px;
	}

	header div#title h1
	{
		font-size: 1.3em;
		line-height: 50px;
		text-indent: 1em;
		
	}


	/* reduce the size of the icons and the positioning too*/
	header div#home , header div#home a
	{
		width: 50px;
		height: 44px;
	}

	header div#home
	{
		left: 10px;
		top: 50%;
		margin-top: -22px;
	}

}

@media all and (min-width: 320px) and (max-width: 500px) {

	#message-small-drawing
	{
		line-height: 1em;
		width: 300px;
	}

	#message-small-drawing p
	{
		height: 40px;
		position: absolute;
		top:50%;
		margin-top: -20px;
	}

	#message-small-photo
	{
		line-height: 1em;
		width: 300px;
	}

	#message-small-photo p
	{
		height: 40px;
		position: absolute;
		top:50%;
		margin-top: -20px;
	}

	html#photo-html,body#photo-body
	{
		min-height: 635px;
	}
}
@media all and (min-width: 880px) and (max-width: 1100px) {
	html#photo-html,body#photo-body
	{
		min-height: 700px;
	}


	#photo-menu li
	{
		font-size: 1.2em;
	}

	#photo-menu li a
	{
		width: 150px;
		height: 148px;
	}

	#photo-menu li#gallery1
	{
		-webkit-background-size: 150px 148px;
		        background-size: 150px 148px;
	}

	#photo-menu li#gallery2
	{
		-webkit-background-size: 150px 148px;
		        background-size: 150px 148px;
	}

	#photo-menu li#gallery3
	{
		-webkit-background-size: 150px 148px;
		        background-size: 150px 148px;
	}

	#photo-menu li#gallery4
	{
		-webkit-background-size: 150px 148px;
		        background-size: 150px 148px;
	}

	#photo-menu li#gallery5
	{
		-webkit-background-size: 150px 148px;
		        background-size: 150px 148px;
	}

	#photo-menu li#latest-photos
	{
		-webkit-background-size: 150px 148px;
		        background-size: 150px 148px;
	}
	
}

@media all and (min-width: 320px) and (max-width: 880px) {
	
	html#photo-html,body#photo-body
	{
		min-height: 750px;
	}


	#photo-menu li
	{
		font-size: 1em;
	}

	#photo-menu li a
	{
		width: 130px;
		height: 128px;
	}

	#photo-menu li#gallery1
	{
		-webkit-background-size: 130px 128px;
		        background-size: 130px 128px;
	}

	#photo-menu li#gallery2
	{
		-webkit-background-size: 130px 128px;
		        background-size: 130px 128px;
	}

	#photo-menu li#gallery3
	{
		-webkit-background-size: 130px 128px;
		        background-size: 130px 128px;
	}

	#photo-menu li#gallery4
	{
		-webkit-background-size: 130px 128px;
		        background-size: 130px 128px;
	}

	#photo-menu li#gallery5
	{
		-webkit-background-size: 130px 128px;
		        background-size: 130px 128px;
	}

	#photo-menu li#latest-photos
	{
		-webkit-background-size: 130px 128px;
		        background-size: 130px 128px;
	}
	
}
@media all and (min-width: 768px){

	#message
	{
		position: absolute;
		bottom: 100px;
		right: 20px;
		width:315px;
		height: 235px;
		
	}

	#message a
	{
		width:315px;
		height: 235px;
		display: block;
	}

}

@media all and (min-width: 768px) and (max-width: 1000px){
	#message
	{
		width: 200px;
		height: 149px;
		-webkit-background-size: 200px 149px;
		        background-size: 200px 149px;
	}

	#message a
	{
		width: 200px;
		height: 149px;
	}

}

/* resize the sun and the clouds for the photo gallery page */
@media all and (min-width: 320px) and (max-width:600px){
	body#photo-body
	{
		-webkit-background-size: 53px 57px, 100% auto,42px 24px, 28px 18px, 42px 24px,cover;
        background-size: 53px 57px, 100% auto,42px 24px, 28px 18px, 42px 24px,cover;
	}
}


/* styles for the video gallery page */
html#video-html,body#video-body
{
	min-height: 750px;
	height: 100%;
}

body#video-body
{	
	position: relative;
	/* the background image does not stick to the bottom. this quick hack removes that space. */
	display: inline-block;

	width: 100%;
	background:  url('../img/sun.png') no-repeat 95% 1%, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 15%, url('../img/galleries/video/bg_video_gallery.png') no-repeat bottom center, #9AD7F6;
	background:  url('../img/sun.png') no-repeat 95% 1%, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 15%, url('../img/galleries/video/bg_video_gallery.png') no-repeat bottom center, -webkit-gradient(radial, center center, 0, center center, 100%, from(#ffffff), to(#9ad7f6));
	background:  url('../img/sun.png') no-repeat 95% 1%, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 15%, url('../img/galleries/video/bg_video_gallery.png') no-repeat bottom center, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#9ad7f6));
	background:  url('../img/sun.png') no-repeat 95% 1%, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 15%, url('../img/galleries/video/bg_video_gallery.png') no-repeat bottom center, -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#9ad7f6 100%);
	background:  url('../img/sun.png') no-repeat 95% 1%, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 15%, url('../img/galleries/video/bg_video_gallery.png') no-repeat bottom center, -webkit-radial-gradient(center, ellipse, #ffffff 0%, #9ad7f6 100%);
	background:  url('../img/sun.png') no-repeat 95% 1%, url('../img/cloud1.png') no-repeat 5% 35%, url('../img/cloud2.png') no-repeat 95% 45%, url('../img/cloud1.png') no-repeat 50% 15%, url('../img/galleries/video/bg_video_gallery.png') no-repeat bottom center, radial-gradient(ellipse at center, #ffffff 0%,#9ad7f6 100%);
	-webkit-background-size: auto auto, 84px 49px, 56px 36px, 84px 49px, 100% auto,cover;
	        background-size: auto auto, 84px 49px, 56px 36px, 84px 49px, 100% auto,cover;
}

#video-menu-items 
{
	width: 1100px;
	margin: 0 auto;
	text-align: center;
	height: 170px;
	margin-top:1.5em;

}

#video-menu-items li
{
	width: 130px;
	height:170px;
	display: inline-block;
	margin: 0 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#video-menu-items li span.thumb
{
	width: 130px;
	height: 100px;
	border-radius: 50%;
	border: 5px solid #3398cb;
	display: inline-block;
}

#video-menu-items li span.title
{
	height: 70px;
	width: 130px;
	display: inline-block;
	vertical-align: bottom;
	color: #640E0E;
	font-family: 'boowas_handwritingregular';
}

#video-menu-items li a
{
	display: block;
	width: 100%;
	height: 100%;
}

@media all and (min-width: 1001px) and (max-width: 1100px){
	#video-menu-items 
	{
		width: 920px;
	}
}
@media all and (min-width: 901px) and (max-width: 1000px){
	#video-menu-items 
	{
		width: 800px;
	}
}

@media all and (min-width: 700px) and (max-width: 900px){
	#video-menu-items 
	{
		width: 650px;
	}
}

@media all and (min-width: 320px) and (max-width: 700px){
	#video-menu-items 
	{
		width: 300px;
	}

	body#video-body
	{
		background-size:53px 57px,42px 24px, 28px 18px, 42px 24px,100% auto,cover;
	}
}

/* message box */
#message-big-video
	{
		display: table;
		width: 500px;
		margin: 0 auto;
		text-align: center;
		background-color: rgba(0,0,0,0.5);
		color:white;
		height: 80px;
		font-size: 1.2em;
		border-radius: 10px;
		font-family: 'boowas_handwritingregular';
		position: relative;
		margin-top: 4em;
	}

#message-big-video p
{
	display:table-cell;
	vertical-align: middle;
}

#message-big-video a
{
	text-decoration:none;
	color: white;
}

/* resize the message box */
@media all and (min-width: 320px) and (max-width: 550px){
	#message-big-video
	{
		width: 300px;
	}
}

/* global */
/* push the back button up */
@media all and (min-width: 320px) and (max-width: 1023px) {

	footer, footer a 
	{
		width: 50px;
		height: 38px;
	}

	footer
	{
		bottom: 120px;
	}
}