@import url("yui-reset.css");


/* tags */
html,body{height:100%;}
body{background:#f2f3f5;font-family:"Arial"; font-size:12px; color:#333;}
strong{font-weight:bold;}
a{color:#000;}
a:hover{text-decoration:none;}

/* constructions */
div#wrapper{width:97%; margin:20px auto; background:#ebebeb; }
div#top{width:100%; height:40px; clear:both; 
-webkit-box-shadow: 0px 5px 2px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.1); 
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}
div#main-menu{width:80%; float:left; margin-top:15px; padding-left:20px; height:28px;}
div#content{width:97.5%; background:#fff; padding:5px; clear:both; border:1px solid #d6d6d6; border-top:0 none; min-height:400px; float:left; margin:0 0 10px 10px; padding-bottom:20px;}
div#footer{width:100%; height:30px; clear:both; padding:10px 0px;}

.w30{width:30px;}
.w50{width:50px;}

ul#logout{float:right;}
ul#logout li{float:left; display:block; padding:12px; height:16px; border-left:1px solid #eee;}

div#img-all{width:71%; float:left; min-height:600px; padding:10px; padding-top:0;}
div#img-sel{width:25%; float:right; min-height:600px; background:#eee; padding:10px; border:1px solid #ddd;}

div#album-info{background: lightyellow; border:2px solid #ffdddd; box-sizing: border-box; padding:15px; margin-bottom:10px;}

/* headers */
h1{float:left; font-size:24px; padding:5px 10px;}
h1 span{color:#0a4a79;}
h2{font-size:18px; float:right; color:#0a4a79; padding-top:80px; clear:right;}
h3{font-family:Arial; font-size:18px; padding:5px 10px;  margin-bottom:5px;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #c0c0c0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#c0c0c0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#c0c0c0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#c0c0c0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#c0c0c0 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#c0c0c0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c0c0c0',GradientType=0 ); /* IE6-9 */
text-shadow: 1px 1px 0px #eeeeee;
}
h4{font-size:16px; font-weight:bold; padding:5px 0; font-family:Arial;}

/* menus */
ul#menu{height:28px;}
ul#menu li{float:left; height:28px; margin-right:5px; position:relative;}
ul#menu li a{display:block; background:#5b9b06; color:#fff; text-decoration:none; float:left; padding:6px 15px;border:1px solid #5b9b06; border-bottom:0 none; font-weight:bold;-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 5px 5px 0px 0px; opacity:0.4; filter:alpha(opacity=40); }
ul#menu li a.orange{background:#ff5c00; border-color:#ff5c00;}
ul#menu li a.blue{background:#2981e4; border-color:#2981e4;}
ul#menu li a.red{background:#e62727; border-color:#e62727;}
ul#menu li a:hover, ul#menu li a.active{opacity:1; filter:alpha(opacity=100); -moz-transition: all 0.2s;-o-transition: all 0.2s;-webkit-transition: all 0.2s; }



/* tables */
table{font-size:12px; width:950px; background:#ffffff; margin-bottom:5px;}
table.selected{background:#d5e7d4;}
table.selected tr:hover td{}
table th{ text-align:center; padding:5px; font-weight:bold;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top,  #eeeeee 0%, #dedede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #eeeeee 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #eeeeee 0%,#dedede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #eeeeee 0%,#dedede 100%); /* IE10+ */
background: linear-gradient(to bottom,  #eeeeee 0%,#dedede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */

}
table td{text-align:center; padding:5px; background:#f5f5f5; border-bottom:1px solid #f0f0f0;}
table tr:hover td{background:#ddd;}
table tr.pair{}
table tr.pair td{background:#fff;}

table tr.expired td{background:#fed0d0;}

table.pay-card{width:700px; border:1px solid #888;}
table.pay-card tr:hover td{background:none;}
table.pay-card td{background:none; border:0 none; font-size:16px; text-align:left;}


table.payment{width:700px;border:1px solid #888;}
table.payment tr:hover td{background:none;}
table.payment th{border:1px solid #888;}
table.payment td{text-align:center; background:none; border:1px solid #888;}

table.payment table{width:310px;}
table.payment table td{border:0 none;}

div#kp{border:1px solid #ccc; padding:10px; width:700px; float:left;}
div#kp dl{font-size:16px; float:left; clear:both;}
div#kp dl dt{float:left; width:80px;}
div#kp dl dd{float:left; padding-left:10px; font-weight:bold;	}

div.image{width:140px; float:left; margin:10px; height:165px;}
div.image table{width:140px; margin:0; height:160px; border:1px solid #ddd;table-layout:fixed;}
div.image table td{background:#eee; border:0 none;}
div.image img{max-height:90px;}
div.image input{width:20px; text-align:center; font-family:Arial;border:1px solid #cccccc; padding:2px;}
span.ok{display:block; width:24px; height:24px; background:url(../img/icons/accept24.png) 0 0 no-repeat; text-indent:-5000em; margin:0 auto;}

div.image-sel{width:80px; float:left; margin:5px;}
div.image-sel table{width:80px; margin:0; height:80px; border:1px solid #ddd;}
div.image-sel table td{background:#fff; border:0 none;}
div.image-sel img{max-height:50px;}
a.del{display:block; width:16px; height:16px; background:url(../img/icons/delete16.png) 0 0 no-repeat; text-indent:-5000em; float:right;}

/* texts */
#footer p{font-size:11px;}


/* forms */
fieldset{border:1px solid #ddd; padding:10px;}
legend{font-size:18px; margin:0; padding:0 0 5px 0;}
form#login-form{padding:10px;}
form#login-form div{padding-bottom:5px;}
form#login-form label{display:block;}
form#login-form input{border:1px solid #cccccc; font-size:12px; padding:5px 5px; font-family:Arial;}

form#tiny-form label{font-size:11px; display:block; padding-bottom:3px;font-family:Arial;}
form#tiny-form input, form#tiny-form textarea, form#tiny-form select{border:1px solid #cccccc; font-size:12px; padding:5px 5px; margin-bottom:10px;font-family:Arial; font-weight:bold;}

form#tiny-form input:focus, form#tiny-form textarea:focus, form#tiny-form textarea:focus{border-color:#5b9b06; -moz-transition:border-color 0.3s;}

form#tiny-form input#title{width:500px;}

form#tiny-form select{padding:4px 4px;}

form#image-form{padding:0 10px 10px 10px;}
form#image-form input#submit{margin-top:5px;}


input.error, input.invalid, textarea.error{margin-bottom:0 !important; border:1px solid red !important;}
label.error, label.invalid{color:red !important; padding-bottom:10px !important;}

input.active, select.active{border-color:red !important;}
input.date, input.date2{width:90px;}

form#status-form input, form#status-form textarea{border:1px solid #cccccc; font-size:12px; padding:5px 5px; margin-bottom:10px;font-family:Arial; font-weight:bold;}


/* buttons */
.button{background:#5b9b06; color:#fff; padding:5px 12px !important;  -webkit-border-radius: 5px;
border-radius: 5px; cursor:pointer; border:1px solid #5b9b06 !important; font-weight:bold; text-decoration:none; font-size:12px; font-family:Arial; float:left;}
button.button, a.button{padding:5px 12px !important;}


.button-alt{background:#333; color:#fff !important; padding:5px 12px !important;  -webkit-border-radius: 5px;
border-radius: 5px; cursor:pointer; border:1px solid #333; font-weight:bold; text-decoration:none; font-size:12px; font-family:Arial; float:left;}

.button-small{background:#5b9b06; color:#fff; padding:2px 12px !important;  -webkit-border-radius: 5px;
border-radius: 5px; cursor:pointer; border:1px solid #5b9b06; font-weight:normal; text-decoration:none; font-size:11px; font-family:Arial;}

.button:hover, .button-small:hover {background:#467805; color:#fff;border:1px solid #467805; -moz-transition:all 0.3s;-o-transition:all 0.3s;-webkit-transition:all 0.3s; }

.button-alt:hover {background:#000; color:#fff;border:1px solid #000; -moz-transition:all 0.3s;-o-transition:all 0.3s;-webkit-transition:all 0.3s; }


/* links */
div#logout a{float:right; display:block; clear:both; height:16px; background: transparent url('../img/icons/logout.png') 0 0 no-repeat; padding-left:20px;}
a.add{display:block; clear:both; height:16px; background: transparent url('../img/icons/add.png') 0 0 no-repeat; padding-left:20px; margin-top:5px; float:left;}
a.back{display:block; clear:both; height:16px; background: transparent url('../img/icons/back.png') 0 0 no-repeat; padding-left:20px; margin-top:5px; }


div.box-gallery{height:110px; float:left; text-align:center; border:1px solid #ccc; margin:10px; padding:5px; overflow:hidden;}
div.box-gallery img.image{height:73px; padding-bottom:3px; float:left; clear:both;}
div.box-gallery div{width:100%; float:left; clear:both;}
div.box-gallery div a{text-decoration:none;}

div.box-music{width:280px; float:left; text-align:center; border:1px solid #ccc; margin:10px;}
div.box-music a{text-decoration:none;}

div.loader{display:none;}

/* others */
.text-left{text-align:left;} 


/* images */
div.box-image{width:80px; height:80px; padding:5px; background:#eee; float:left; margin-right:5px; text-align:center;}


div.paginationControl{width:100%; float:left; clear:both; margin:10px 0; padding:10px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
div.paginationControl span, div.paginationControl a{display:block; float:left; padding:5px 10px; border:1px solid #ddd; margin-right:5px; border-radius:5px; text-decoration:none;}
div.paginationControl a{background:#333; border:1px solid #5b9b06; color:#fff;}
div.paginationControl a:hover{background:#000;-moz-transition:all 0.3s;-o-transition:all 0.3s;-webkit-transition:all 0.3s;}
div.paginationControl span.current{background:#5b9b06; color:#fff; border:1px solid #5b9b06;}


form#status-form label{display:block; float:left; clear:both; font-family:Arial; margin-bottom:3px;}
form#status-form select{display:block; float:left; clear:both;margin-bottom:10px; font-family:Arial; padding:3px 3px;}
form#status-form textarea{display:block; float:left; clear:both; width:375px; height:50px; margin-bottom:10px; font-family:Arial;}
form#status-form input{display:block; float:left; clear:both; font-family:Arial;}

/********************** submenu *********************/
ul#menu ul {
	position:absolute;
	top: 28px;
	left: 0px;
	display:none;
	width: 150px;
/*	
	border:1px solid #D6D6D6;
	border-top:0 none;
*/	
}

ul#menu li ul li{
	height: 20px;
	float: left;
	background: #fff;
	padding: 10px 10px 0px 10px;
	
/*	
		
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);	
	-moz-opacity:0.9;
	
*/
	
}

ul#menu li ul a{
	float:left;
	width: 120px;
	margin:0px;
	padding:0px 0 0 10px; 
	color: #333;
	text-indent: 0;
	font-size: 11px;
	text-decoration: none;
	background:none;
	height: 20px;
}

ul#menu li ul a:hover{
	color: #808080;
}

ul#menu ul ul{
	top:auto;
}	

ul#menu li ul ul {
	left: 160px;
	margin-left: 10px;
}



ul#menu li:hover a span.mo{
	background-position: 100% 100%;
}

ul#menu li:hover ul ul, ul#menu li:hover ul ul ul, ul#menu li:hover ul ul ul ul{
	display:none;
}
ul#menu li:hover ul, ul#menu li li:hover ul, ul#menu li li li:hover ul, ul#menu li li li li:hover ul{
	display:block;
}



/********************** submenu *********************/