﻿body {
	overflow: hidden; /*disable scroll*/
	margin: 0px;padding: 0px;
	text-align: center;
	background-color: #0e2153;
	background: transparent url(bg_tile.png) repeat;
	z-index: 0 ;
}

h1,h2,h3,div,a,button {color: #AC71FF;}/*{color: #6f94db;}*/
h3{font-size:180%;} /*caption title*/
div{font-size:104%;} /*thumbs font*/
div,a{font-family: Lucida;}
h2,h3,p{font-family:Arizonia;}
h1{font-family:MCrosiva;}
h4{font-family:Tekton Pro; color:#71ABD1;} /*Tekton Pro  Tangerine 180%*/
button {font-family:Arizonia;}

.ctrl_ui{background: transparent url(controlls.png) no-repeat ;} /*center*/

.tilebutton{
	width:2px; height:38px;background-position: 0 0;
	background: url(btn_tile.png) repeat-x #004b93;
	border: 2px solid #173c6c; border-radius: 18px; cursor: pointer;
	font-family: Arizonia; text-shadow: 2px 2px 4px #000000;
	filter: dropshadow(color=#000000, offx=2, offy=2);
}
.tilebutton:hover{
	background-position: 0 -38px;
	border-color:#3a98eb; color: #c7daf4;
	border-bottom-color:#3BC2EB;
}
#top_text{
	text-shadow: 2px 2px 4px #000000;font-size: 180%;
	filter: dropshadow(color=#000000, offx=2, offy=2);
}
/*LAYOUT BEGIN*/
#wrap {
	margin:auto;
	width:100%; height:100%;
	/*background-color: yellow;*/
	z-index: 1 ;*
}
#header_holder {
	position: absolute;top:0;left:20%;
	width:60%;height:20%;
	/*background-color: red;*/
	z-index: 2 ;
}
#leftbox_holder {
	position: absolute;top:0; left:0;
	width:20%;height:90%;
	/*background-color: blue;*/
	float:left;
	z-index: 2 ;
}
#centerbox_holder {
	width:60%;height:70%; /*if not set IE is not visible*/
	position: absolute;top:20%;left:20%;right:20%;bottom:10%;
	/*background-color: brown;*/
	z-index: 2 ;
}
#rightbox_holder {
	position: absolute;top:0; right:0;float:right;
	width:20%;height:90%;
	/*background-color: blue;*/
	z-index: 2 ;
}
#footer_holder {
	position: absolute;bottom:0; left:0;
	height:10%;width: 100%; 
	/*background-color: red;*/
	z-index: 2 ;
}
/*LAYOUT END*/

#header {
	width: 100%;height: 100%;
	-moz-box-sizing: border-box;/*fit elements with border*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*border: 2px solid green;
	background-color: orange;*/
}
#header h2 {
	left:0; bottom:0; position: absolute;
	/*font-size: 200%;*/
}
#mandalky_logos{
width: auto;height: 100%;
}
#leftbox {
	width: 100%;height: auto; position:relative; /*top:8%;*/
	/*background: transparent url(stromikon.png) no-repeat center;*/
	-moz-box-sizing: border-box;/*fit elements with border*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*border: 2px solid green;
	background-color: orange;*/
}
#centerbox_border{
	width: 100%;height: 100%;
	-moz-box-sizing: border-box;/*fit elements with border*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x :hidden;
	/*overflow: -moz-scrollbars-vertical;*/
	-moz-border-image:url(border.png) 80 80 round; /* Firefox */
	-webkit-border-image:url(border.png) 80 80 round; /* Safari */
	-o-border-image:url(border.png) 80 80 round; /* Opera */
	border-image:url(border.png) 80 80 round;
	border-width:40px;
}
#centerbox {
	display: table;
	width: 100%;height: 100%;
	-moz-box-sizing: border-box;/*fit elements with border*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*background-color: #0e2153; thumbs background*/
}
.thumb_cell {
	width: 25%; /*how many boxes is on line*/
	height:auto;
	float: left;
}
.thumb_box {
	margin: 2%; /*distance between boxes*/
	/*padding:0 0 10% 0; offset: top, left, bottom, right*/
	border-radius: 8px;
	background: #41548b;
	border: 1px solid #437988;
	overflow: hidden;
}
.thumb_box h4 {
	font-size: 80%; position:relative; margin:6% 4% 4% 0; width:100%;
	text-shadow:1px 2px 0 rgba(0,0,0,0.2); text-align:center;
	height: auto; /* gradient uses the full height of the element */
	background: url(thumb_gradient.png) 0% 0% repeat-x #41548b;
	border-bottom: 1px solid #437988;
	padding: 4px; /*text offset make width of gradient*/
	/*margin:4%; offset other elements*/
}
.thumb_box img {
	width: 88%;height: auto;
	border: solid 3px #174969;
	cursor: pointer;
}
.buttons
{
	position:relative; top:20%; float:center;width:140px; height:auto; /*width:auto*/
	font-size: 160%; 
}
.buttons_x {
	position:relative; float:right; margin:2%; cursor: pointer;
	text-decoration: none;z-index:10;
	font-size: 100%;/*display:none;*/
	font-family: Lucida; /*thumb x*/
}
.buttons_x:hover{ color: red;}

#admin_buttons{
	position:fixed; z-index:10; top:4px; left:4px;
}
.admin_ctrl {visibility:hidden;}

#rightbox {
	width: 100%;height: auto; position:relative; /*top:8%;*/
	/*background: transparent url(stromika.png) no-repeat center;*/
	-moz-box-sizing: border-box;/*fit elements with border*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*border: 2px solid green;
	background-color: orange;*/
}
#footer {
	width: 100%;height: 100%;
	-moz-box-sizing: border-box; /*fit elements with border*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	/*border: 2px solid green;
	background-color: orange;*/
}

#image_loader
{
	margin-top:-6px; /*negative half size from loader image */
	position: absolute; top: 50%; /* for explorer only*/
	z-index: 100;
	display: none;
}
#image_loader[id] {vertical-align: middle; width: 100%;}
#image_loader_inner {position: relative; top: -50%} /* for explorer only */

#image_mask
{
	position: absolute;top: 0;left: 0;
	width: 100%;height: 100%;
	background: #16384D no-repeat center;
	display: none;
	z-index: 9;
}
#image_form
{
	background: #acbacb no-repeat center;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	display: none;z-index:10 ;
	top:50%;left:50%;
	margin-top:-50px;margin-left:-50px;
	width:100px;height:100px;
	position: absolute;overflow: hidden;
	border: solid 2px white;
}

#image_caption
{
	/*background:url('maskrect.png');*/
	background: rgb(200, 200, 255); /* Fallback for web browsers that doesn't support RGBa */
	background-color: rgba(200,200,255,0.74);  /*rgb, white, with alpha at 0.74 */
	padding:25px; /*inside elements bounding offset*/
	position: absolute; 
	bottom:0; left:0; right:0;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	border-top: 2px solid #F2F1C5;
	z-index:12 ;
	/*visibility:hidden;*/
	display: none;
}
#image_caption h3 {text-align: center; color: #3E21D0;}
#image_caption h4 {text-align: left; font-size:120%; color: #3E21D0;}/*200%*/

#image_canvas
{
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	overflow: hidden;
	cursor:pointer;
	z-index:11 ;
}
#btn_close_image
{
	float:right;background-position: -44px -44px; /*[x, y]*/
}
#btn_delete_image
{
	float:left;background-position: -88px -44px;
}
#btn_question_image{
	float:left;background-position:-44px 0;
}
#btn_edit_caption{
	float:left;background-position: -88px 0;
}
#btn_crop_img{
	float:left;background-position:  0  -88px;
}
#btn_prev_image {
	left: 0; position: absolute; background-position:0 0;
}
#btn_next_image {
	right: 0; position: absolute; background-position:0 -44px;
}

.controls
{
	opacity: 0.5; /* css standard */
    filter: alpha(opacity=50); /* internet explorer */
	/*border: solid 1px white;*/
	width:44px;height:44px;
	position: relative;
	z-index:14;
	top: 50%;
	display: none;
}
.controls:hover 
{
	opacity: 1; /* css standard */
	filter: alpha(opacity=100); /* internet explorer */
}

#login_toggle {
	text-decoration: none; font-size:80%; color:#4664b5;position:relative; float:left;margin:8px; background:#0e2153;
}
#slickbox{display:none; /*;*/ margin:8px;}

#uploadInput{
	width:0; height:0;visibility:hidden; 
}
#uploadbutton{
	width:160px; height:auto; display: none;font-size: 120%; position:relative; float:center; color: #6f94db;
}
#progress_bar {
	position:relative;float:top;
	width:100%;
	border: 1px solid #000;
	font-size: 14px;
	clear: both;
	text-align:center;
	owerflow:hidden;
	display: none;
}
#progress_bar .percent {
	text-align:left; padding-left: 8px;
	background-color: #99ccff;
	height: auto;
	width: 0;
}

#caption_form
{
	width:480px;height:380px;
	position: absolute;top:0;left:0;text-align: left;
	background:none;z-index: 24;display: none;
	position: absolute; top: 50%; left: 50%;
	margin: -210px 0 0 -240px; /*h 0 0 w*/
}
#caption_form_field
{
	text-align:left;
	-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;
	background:#296986;
	z-index: 10;
}

/*Jcrop*/
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
	font-size: 0;
	position: absolute;
	background: white url('Jcrop000.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
	font-size: 1px;
	width: 7px !important;
	height: 7px !important;
	border: 1px #eee solid;
	background-color: #333;
	*width: 9px;
	*height: 9px;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
	background: yellow;
}
.custom .jcrop-handle
{
	border-color: black;
	background-color: #C7BB00;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
/*Jcrop*/

/*
clear: right;
  line-height: 1px;

 */
