/*
	               ___                                       
	  ____  ____  / (_)___  ____ _   _____  ____ ___    _____
	 / __ \/ __ \/ / / __ \/ __ `/  / ___/ / __ `__ \  / ___/
	/ /_/ / /_/ / / / / / / /_/ /  / /___ / / / / / / (__  ) 
	\____/ .___/_/_/_/ /_/\__, /   \___(_)_/ /_/ /_(_)____(_)
	    /_/              /____/    
																							
	This is OPLING Content Management System
 	Created by Dmitry Shalnov (c)2012 STUDIO-O.COM
 	All right reserved

*/

* 		{ margin:0; padding:0; border:0 }
html 		{ height:100%; max-height:100%; padding:0; margin:0; border:0; background-color:#333333 }
body 		{ min-width: 480px; font:1em Arial,Helvetica,'MS Sans Serif',sans-serif; height:100%; max-height:100%; padding:0; margin:0; border:0; background-color:#4a4a4a; color:#4d4d4d; }
.body 		{ min-width: 210px; min-height: 268px; height: 268px !important }

td, th, div 	{ }

a 			{ color:#4d4d4d; text-decoration:none; border-bottom: 1px dashed #4d4d4d }
a:hover 		{ color:#eeeeee }
a, a:active, a:focus 	{ outline: none; outline-style: none }
a img 			{ border-style: none }

/*--------------------------------------- appendixes -------------------------------------------------*/

.noborder 	{ border: none !important }
.short 		{ width: 180px !important }
.shorter	{ width: 100px !important }
.long 		{ width: 300px !important }
.tiny 		{ width: 60px }
.line 		{ float: left; margin-right: 7px }
.line.divider	{ margin-top: 19px }

.line.compact		{ display: inline-block; height: 50px; clear: both; float: none; margin: 0; padding: 0; font-size: 12px !important; margin-top: 10px }
.line.compact input 	{ margin: 5px 0 0; font-size: 1em }

input.line 	{ margin-top: 14px }
/* .line.down	{ margin-top: 14px }*/

span.line	{ margin: 14px 7px 0 0; } 
span.right	{ margin: 19px 7px 0; }
span input 	{ margin: 0 10px }
span input.left	{ margin: 0 10px 0 0 }

span.line.nearRadio	{ margin-top: 20px !important; margin-bottom: 0px !important }

.clear		{ clear:both; }
.clr 		{ clear:both; float:none !important; height:1px !important; font-size:1px !important; border:none; margin:0 !important; padding:0 !important; background:transparent !important; visibility:hidden !important }

/*--------------------------------------- header and menu --------------------------------------------*/

#header 	{ display:block; width: 100%; height: auto; background-color: #666666 }
#header #logo	{ background-color: #4a4a4a }
#header #logo a	{ display:block; border:0; height:60px; font-size:0px; color:#808080; width: 160px; background: url('../img/studioologo.png') 15px 12px no-repeat } /*15px 12px */ /* 0px 0px  */

/*
#languages					{ background-color: #555555 }
#languages a 					{ background-color: #555555 }
#languages a:hover, #languages #selected	{ background-color:#666666; color:#bbbbbb; }
*/

#languages			{ padding: 15px !important; }
#languages a 			{ display: inline-block; cursor: pointer; color: #999; border-bottom: none; background: url(../img/radio.png) no-repeat; padding-left: 35px; margin-left: 10px; height: 30px; line-height: 30px; }
#languages a.selected		{ background-position: 0 -68px; }

.box 				{ border-bottom:1px solid #333333; }
.menu				{ height: 30px; border-bottom:1px solid #333333; background-color: #555555;  }
.menu a 			{ float:left; background-color: #555555; border:0; overflow: hidden; color:#aaaaaa; height:30px; border-right:1px solid #333333; border-bottom:1px solid #333333; padding: 0 15px; line-height:28px; white-space:nowrap }
.menu a:hover, .menu #selected	{ background-color:#777777; color:#444444; }

.menu a.smallscreen		{ width: 30px; padding: 0; }

.cont		{ display:block; height:30px; background-color: #4a4a4a; border-bottom:1px solid #333333; }

.js, .textedit	{ display: none }

/*--------------------------------------- accordion / main content -----------------------------------*/

#items 			{ display: block; width: 100%; background-color: #777777; }
#items a.title 		{ display: block; border:0; font-size:1em; color:#bbbbbb; height:30px; border-bottom:1px solid #333333; margin-top:0px; padding-left: 15px; line-height:28px; white-space:nowrap; overflow:hidden }
#items a.title:hover 	{ background-color:#666666; }

#items > div:not(:target) 	{ height: 0; padding: 0; border-bottom: 0 }
#items > div:target 		{ height: auto; border-bottom:1px solid #333333 }

#items div.open 		{ height: auto; border-bottom:1px solid #333333; margin-top: -1px; padding: 1px 15px 15px 15px; }
#items div.open.bottomline 	{ border-bottom:2px solid #333333 }

div.itemin			{ overflow: hidden; background-color:#999999; padding: 0 15px 15px 15px; color: #4d4d4d; border-bottom:1px solid #333333; }
div.itemin p 			{ clear:both; display:block; border:0; margin: 15px 0 0 0; padding: 0; }
div.itemin.opened		{ background-color:#666666; color: #aaaaaa}

div.comment		{ display: block; margin: 0 0 10px 0 }

/*--------------------------------------- centered block ---------------------------------------------- */

#centered 		{ display: block; position: absolute; background: #999999; width: 210px; height: 268px; left: 50%; top: 50%;  margin-left: -105px; margin-top: -134px }
#centered #pad 		{ padding: 14px }
#centered #pad input	{ width: 168px }
#centered #image 	{ width: auto; height: 60px; border-bottom:1px solid #333333; margin: 0; background:  #4a4a4a url('../img/studioologo.png') 15px 12px no-repeat } /*15px 12px*/ /* 0 0 */

/*--------------------------------------- form text inputs --------------------------------------------*/

input, textarea { padding: 0 7px; font:1em Arial,Helvetica,'MS Sans Serif',sans-serif; background: #ececec;  border-top:2px solid #4d4d4d; width: 100%; color:#4d4d4d; margin-top: 15px; border-radius: 14px; }
input, textarea { box-sizing: border-box }

input.protected, textarea.protected	{ background: #ccc url('../img/grid.png'); }

input 		{ height: 28px; }
textarea	{ padding: 7px; border-radius: 14px 14px 0 14px; }

textarea:focus, button:focus, input:focus { outline:none }

p.small		{ font-size: 12px; margin-top: 1px !important }
p.small.subtitle	{ padding-top: 10px !important }

.counter span	{ background: #555; color: #eee; font-size: 11px; vertical-align: middle;  border-radius: 14px; padding: 4px 10px }

.selector	{ background: #aaa; color: #333; font-size: 13px; vertical-align: middle;  border-radius: 12px; padding: 1px 10px 2px; margin: 0 5px 0 1px }

/*--------------------------------------- form submit button ------------------------------------------*/

button 		{ font:1em Arial,Helvetica,'MS Sans Serif',sans-serif; color:#bbbbbb; background: #808080; padding: 0 15px; margin-top: 14px; margin-bottom: 0px; cursor: pointer; height: 28px; border-radius: 14px; box-shadow: 0 2px  #4d4d4d; } 
button.mini	{ font:0.8em Arial,Helvetica,'MS Sans Serif',sans-serif; color:#bbbbbb; background: #707070; padding: 0 10px; margin-top: 14px; margin-bottom: 0px; cursor: pointer; height: 18px; border-radius: 9px; box-shadow: 0 2px  #4d4d4d; } 

button.selected	{ color: #89c800 /*ff6600*/ !important; }

button:hover, button.mini:hover	{ margin-top: 16px; margin-bottom: -2px; box-shadow: none; }
button a	{ border: none; color:#dddddd; white-space: nowrap; }

button:disabled, button[disabled]	{ background: url('../img/grid.png') !important; border: solid 1px #808080; margin-top: 16px; margin-bottom: -2px; box-shadow: none; cursor: default; }

div.itemin.opened button  		{ background: #555555; box-shadow: 0 2px  #404040; }
div.itemin.opened button:hover		{ box-shadow: none; }

/*--------------------------------------- browse button ---------------------------------------------- */

.fakebrowse		{ cursor: default; }
.browse			{}

button.fakebrowse  	{ cursor: pointer; }
input.fakebrowse	{ margin-top: 14px }

/*-------------------------------------- pic thbnails -------------------------------------------------*/

.thbnl 			{ float:left; position: relative; display:block; width:180px; height:210px; padding: 0 15px 15px 0 }
.thbnl.preview		{ height:60px; width:60px; margin: 10px 0 0px }
.thbnl.preview img	{ height:60px !important; width:60px !important; border-radius: 10px; }

.thbnl.preview a, .thbnl a	{ border-bottom: none }

.thbnl img 	{ border-radius: 22px; width:180px; height:180px; margin-bottom: -4px }
.thbnl input 	{ position: absolute; width: 90px; top: 128px; left: 10px; }
.thbnl button	{ position: absolute; top: 127px; right: 20px; background: #777; box-shadow: 0 2px rgba(0,0,0,0.5); }
.thbnl button:hover	{ box-shadow: none; }
.thbnl label 	{ width:140px; height: 30px; padding: 2px 0 0 35px !important; overflow: hidden; display: block; margin: 5px 0 0 0; white-space: nowrap;  }
.thbnl .short	{ width: 180px !important }

/*--------------------------------------- form checkboxes and roundbuttons ----------------------------*/

label		{ padding: 0 14px 0 0; margin: 14px 0 0 0; user-select: none;  }
label input	{ margin: 0 7px 0 0; border: none; width:auto; height:auto; }

.fixedw100	{ width: 100px; overflow: hidden }
.fixedw200	{ width: 200px; overflow: hidden }
.fixedw400	{ width: 400px; overflow: hidden }

.jsswitchers 	{ cursor: pointer; background: url(../img/radio.png) no-repeat; padding-left: 15px; height: 30px; line-height: 30px; }

label.small 	{ font-size: 12px; line-height: 13px; padding-top: 5px !important }

/*--------------------------------------- table ------------------------------------------------------*/

table 		{ width: 100%; border-collapse: collapse; border-left: 0 none; text-align: center; table-layout: fixed; padding: 0; margin: 15px 0 0 0; border-radius: 14px; box-shadow: 0 2px  #4d4d4d; }
th, td.head 	{ color:#ffffff !important; background: #808080; font-size: 0.9em; }
td 		{ background: #ffffff; color:#777777; overflow: hidden; border-left: #aaaaaa 1px solid; white-space: nowrap;  font-size: 0.9em; line-height:30px }	
th		{ border-left: #aaaaaa 1px solid; }
td, tr		{ height: 30px }
.alignleft 	{ text-align: left; padding-left: 15px }
.even td	{ background-color:#eeeeee !important }
.selected td	{ background-color:#ffc65e !important }

td:first-child, th:first-child 	{ border-left: 0 none; }

tr:first-child th:first-child 	{ border-top-left-radius: 14px; }
tr:first-child th:last-child	{ border-top-right-radius: 14px; }
tr:last-child td:first-child 	{ border-bottom-left-radius: 14px; }
tr:last-child td:last-child 	{ border-bottom-right-radius: 14px; }

/*--------------------------------------- interface message ------------------------------------------*/

/* .message { color: #ffff00 } */
.message	{ display: block; color: #4d4d4d; /* padding: 0 0 15px;  border-bottom: #333 1px solid; */}
.message.light	{ display: block; color: #aaaaaa; /* padding: 0 0 15px;  border-bottom: #333 1px solid; */}

.message ierror	{ background: #ff6600 !important }
.message error	{ display: block; background: #ff6600; padding: 2px 6px; color: #fff; border-radius: 10px;  }
.message doterr	{ color: #ff6600 } 

/*
errmark		{ display: inline; background: #ff6600; margin: 0 10px 5px 0; padding: 0 10px 0 9px; color: #fff; border-radius: 10px; box-shadow: 0 2px  #4d4d4d; font-size: 0.9em; vertical-align: middle; line-height: 15px; }
okmark		{ display: inline; background: #aad400; margin: 0 10px 5px 0; padding: 0 10px 0 9px; color: #333; border-radius: 10px; box-shadow: 0 2px  #4d4d4d; font-size: 0.9em ; vertical-align: middle; line-height: 15px;}
nmark		{ display: inline; background: #aaa; margin: 0 10px 5px 0; padding: 0 10px 0 9px; color: #333; border-radius: 10px; box-shadow: 0 2px  #4d4d4d; font-size: 0.9em ; vertical-align: middle; line-height: 15px;}
*/

mark		{ display: inline; max-width: 300px; background: #adadad; margin: 0 10px 5px 0; padding: 0 10px 1px 9px; color: #333; border-radius: 10px; box-shadow: 0 2px  #4d4d4d; font-size: 0.9em ; vertical-align: middle; line-height: 15px; overflow: hidden; }

.grey	{ background: #adadad; color: #333; }
.purple	{ background: #e01f88; color: #fff; }
.violet	{ background: #a033cc; color: #fff; }
.yellow	{ background: #ffa800; color: #333; }
.orange	{ background: #ff6600; color: #fff; }
.green	{ background: #aad400; color: #333; }

popup		{ position: absolute; z-index: 1; display: block; width: 300px; padding: 10px; border-radius: 10px; box-shadow: 0 2px  #4d4d4d; line-height: 15px; }

.title mark:first-child	{ margin-left: 10px }

.select { color: #00ff00 !important }
.alert { color: #ff0000 !important }


