/* COLORS:
 * #777; 	grey 	- logo, text
 * #039; 	blue 	- links / accents
 * #ffae00; orange 	- menu rollover / accent2
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
html		{ width:100%; min-height:100%; height:100%; background:#fff; }
body		{ width:100% ;min-height:100%; height:100%; color:#333; font-size:13px; font-family:'Open Sans',sans-serif; }
table		{ font-size:inherit;}
a			{ margin:0; cursor: pointer; }
a:link,a:visited	{ color:#039; text-decoration:none;}
a:hover,a:active	{ color:#039; text-decoration:underline;}
hr			{ border:0; border-top:1px solid #ddd; display:block; height:1px; margin:1em 0; padding:0;}
h1			{ font-size:19px; padding-top:10px; color:#042A39; font-weight: 600; }
h2			{ font-size:16px; padding:10px 0px ;color:#042A39; }
h3			{ color:#042A39; }
li			{ margin-left:1.2em; font-size:14px;}

/* Buttons */
.btn_dark,.btn_light {	text-align:center; width:auto;	padding:8px 10px; margin-top:6px; text-decoration:none!important; transition: background-color .3 ease-in-out; -moz-transition: background-color .3s ease-in-out; -webkit-transition: background-color .3s ease-in-out; cursor: pointer;     border: solid 1px #d98100; border-top:none!important; border-left:none!important; font-weight:600;	 }
.btn_dark            { color:#fff; border-radius:10px; /*border:solid 1px #022A39;*/ background: #F39205; display:inline-block; min-width: 150px;	}
.btn_dark:hover      { background:#F7A605; border: solid 1px #d98100;}

.btn_light           { color:#022A39; border-radius:10px; /*border:solid 1px #022A39;*/ background:rgba(0,0,0,0.02); display:inline-block; min-width: 150px; border-color:#ddd; }
.btn_light:hover     {  }
.btn_light:hover a   { color:#fff;}
.btn_save_order      { position: fixed; margin: 0px auto; float: none; top: 19%; left: 50%;  padding: 20px 40px; transform: translate(-50%, -50%); }

/* Icons */
.deletable,.delete { cursor:pointer; background-image:url(../img/delete.png); width:36px; height:36px;-webkit-background-size:36px 36px; background-size: 36px 36px;}
.sortable  { cursor:pointer; background-image:url(../img/drag.png); width:36px; height:36px;-webkit-background-size:36px 36px; background-size: 36px 36px;}
.icon_additem { cursor:pointer; width:24px;height:24px; background: url(../img/add.png) no-repeat left; background-size:24px 24px; -webkit-background-size: 24px 24px;}

/* Messages */
.msg         { color:#fff; border-radius:5px; padding:10px; }
.msg.success { background:#090; }
.msg.error   { background:#c00; }
.msg.warning { }

.msg.additionalInfo { color:#000; background-color: rgba(0, 0, 0, 0.2); margin-top:10px; }

/* Frame */
#mainframe 	{ min-height:80%; margin:0 auto; padding:0; }

/* Header */
#header		   { background:none; width:80%; min-width:960px; padding: 0 20px; margin:0 auto; overflow:hidden; height:80px; box-sizing: border-box;-webkit-box-sizing: border-box;}
#logo  		   { float:left; margin:3px 0; padding:0; /* display:none; */ }
#logo_client { float:left; margin:3px 0 3px 10px; padding:0; }
#logo img,
#logo_client img { height:70px; margin:0 0 0 0; }

#logged_in   { float:right; text-align:right; width:350px; line-height:18px; display:block; margin:20px 0 0 0;}
#overlaymenu { background-color: rgba(255, 255, 255, 0.0); display:none; height:900px; max-height:80%; width:100%; max-width:100%; position:absolute; z-index:3; }

/* Navigation */
#nav, #nav li ul {
    background: #042A39; /* Old browsers */
}
#nav    { clear:both;height:38px;margin:0;padding:0;color:#fff; border-top:2px solid #042A39;}
#nav ul	{ list-style:none; margin:0; padding:0px;}
#nav > ul	{ list-style:none; margin:0 auto; padding:0 20px; width:80%;min-width:960px;box-sizing: border-box; -webkit-box-sizing: border-box;}
#nav li { display:block; float:left; height:38px; margin:0; border:none; font-size:15px; padding:0 0;}
#nav a		{  color:#fff; margin:0; text-decoration:none; border:none; border-right: 1px solid rgba(255, 255, 255, 0.2);border-left: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; padding:8px 10px 10px 10px; height:20px; }
#nav > ul > li > a.active{background-color:#f9f7f4; color:#333; font-weight: 600; }
#nav li.pre-menu{ display: none; width:58px; } 
#nav li.pre-menu img { width:58px!important; height: 58px!important; }
#nav li.menu:hover, #nav a:active{background:rgba(255, 255, 255, 0.15); color:#fff!important;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */}
#nav li > ul { visibility: hidden; clear:both; position:absolute; z-index:-1;  transition: all 0.3s ease; opacity: 0;}
#nav li li { /*margin-left: 10px;*/ width:100%; clear:both; display:block; /*border:0px; border-top:1px solid rgba(255, 255, 255, 0.2);*/}
#nav li li a.active { background:rgba(255, 255, 255, 0.2); color:#fff; }
#nav li li a { width:100%; height:20px; }
#nav li.lang-flag { float:right; border:2px solid transparent; border-radius:50%; width:24px; height:24px; margin:3px; }
#nav li.lang-flag img { width:24px; height:24px; cursor:pointer; }
#nav li.lang-flag.active { border:2px solid #f7a600; }
#nav ul > li:hover > ul { visibility: visible; opacity: 1; z-index: 1; transition-delay: 0s, 0s, 0.3s; }

/* Content */
section {background:#f9f7f4; border-bottom:solid #ddd 1px;}
.page { clear:both; min-height:400px;  padding:20px 20px; margin: 0px auto; width:80%;min-width:960px; box-sizing: border-box;-webkit-box-sizing: border-box;  }
.content_header { border-bottom:1px solid #ddd; padding:0 0 20px 0; }
.content_header h1 { float:left; }
.content_header h1 a { padding-left:19px; background-image: url(../img/back.png); background-size: 25px 25px; -webkit-background-size: 25px 25px; background-repeat: no-repeat; background-position: left; }
.content_footer { padding-top:10px; }
.row {min-height:40px; box-sizing: border-box;-webkit-box-sizing: border-box;}

/* Form base + \Pencil\CMS\Editor */
.editProfile { clear:both; }
select,input,textarea{ font-family:'Open Sans',sans-serif; border:1px solid #ddd; background:#fff; box-sizing: border-box;-webkit-box-sizing: border-box; height: 42px; font-size: 13px; margin:10px;}
.page.login .label,
.editProfile .label { clear:both; margin:20px 0 3px 0;  font-size:15px; float:left; }
.editProfile .sublabel { float:left; margin:23px 0 3px 5px; }
.editProfile input.invalid { background-color:#ffebe3; border-color:#ffa391; }

.editor_simpletext  .uneditable,
.editor_selectlist  .uneditable,
.editor_date        .uneditable,
.editor_time        .uneditable,
.editor_datetime    .uneditable { clear: both;  color: #777;  padding: 5px 0px; }

.editor .error { color:#cc0000; clear:both; font-style:italic; display:none; padding-top: 5px; }


/* Footer date*/
#footer		    { background-color:transparent; margin:0; color:#aaa; clear:both; width:100%; height:auto; }
#footercontent  { width:325px; margin:15px auto; height:auto; }
#crtext         { width:250px; margin: 25px auto 0px auto; height:15px; text-align:center; float:none; }
#crlogo         { width: 70px; padding-bottom: 30px; text-align: center;  float: none; margin: 0px auto 0px auto;}
#crlogo img     { width:70px; }



.page .block { margin:40px auto 60px auto; border-radius:10px; padding:20px; width:444px; text-align: center; }
.page .block.editProfile .label.input { clear:both; margin:20px 0 3px 0;  float:left; width:200px; text-align:right; }
.page .block.editProfile input.input { float:left; width:200px; background:#fff;}
.page .block.editProfile input.do { clear:both;display: inline-block;}

/* \Pencil\CMS for mobile screens */
@media all and (max-width: 960px) {
  #header,.page { width:100%;min-width:100%; }
  .page .editProfile       { margin:0px auto 10px auto;  padding:5%; width:90%; }
  .page .editProfile .label { float:none!important; text-align: center!important; width: 100%!important; margin-top: 8px!important}
  .page .editProfile input { float:none!important; width: 100%!important; margin: 2px 0px 8px 0px!important; padding: 5px!important;}
  .page .editProfile .do { margin-top: 15px!important;}
  
  .page .saveSuccessful, .page .unknownToken    { margin:0px;  width:100%; box-sizing: border-box; -webkit-box-sizing: border-box; }
  #userProfile #nav > ul { width:100%;min-width:100%;}
}