/**
 * CSS for C-WEB: General style
 *
 * @author (c) 2015 Michal Suchan, VESTERON s.r.o.
 */

html, body {
	height: 100%;
	background: transparent;
}

body {
	min-width: 1000px;
 	background-color: #ffffff;
	color: #444444;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 0;
	position: relative;
	}

textarea {
	resize: vertical;
}

b {
	background-color: #fff;
	z-index: 10000;
}

.clr {
	clear: both;
}

.hidden {
	display: none;
}

.required:after {
	color: #ff0000;
	content: " *";
}

.required.required_1:after {
	color: #ff0000;
	content: " *1";
}

.required.required_2:after {
	color: #ff0000;
	content: " *2";
}

footer {
	display: none;
}

body > div#message {
	position: fixed;
	opacity: 0;
  height: 0px;
	line-height: 0px;
	width: calc(100% - 50px);
	left: 0px;
	right: 50px;
	top: 0;
	z-index: 100;
	font-weight: 600;
	font-size: 1.2em;
	color: #ffffff;
	text-align: center;
	animation-name: a_message;
	animation-duration: 10s;
	animation-iteration-count: 1;
}

body > div#message > div{
	padding: 0 10px;
}

body > #message #message div{
	line-height: 50px;
}

div#message > div.error {
	background-color: #c80000;
}

div#message > div.success {
	background-color: #2ad084;
}

div#message > div.warning {
	background-color: #ddb515;
}

div.workspace {
	position: relative;
	min-width: 900px;
}


/******************************************************************************/
/* TABLE - LIST ***************************************************************/
/******************************************************************************/

div.workspace.list > table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.1em;
}

div.workspace.list > table thead th,
div.workspace.list > table td{
	height: 35px;
	padding: 0 8px;
	white-space:nowrap;
	text-align: left;
}

div.workspace.list > table thead {
	background: #dce7f6;
	font-weight: 800;
	border-bottom: 1px solid #c0d4ee ;
}

div.workspace.list > table tbody tr:hover {
	background: #f6f6f6;
}

div.workspace.list > table tbody > tr > td {
	font-weight: 400;
	border-bottom: 1px solid #dce7f6;
	overflow: hidden;
}

div.workspace.list > table tbody > tr > th {
 text-align: left;
}

div.workspace.list > table tbody > tr:last-child > td {
	border-bottom: #333333 solid 1px;
}

div.workspace.list > table tbody > tr > td.icon,
div.workspace.list > table tbody > tr > th.icon {
	padding: 0;
}

div.workspace.list > table tbody > tr > td.icon a{
	display: block;
	padding: 7px 3px 3px 3px;
}

div.workspace.list > table tbody > tr > td.icon a:hover{
	opacity: 0.6;
}

div.workspace.list > table col.icon {
	width: 24px;
}

/******************************************************************************/
/* TABLE - FORM ***************************************************************/
/******************************************************************************/

div.workspace.form table {
	border-collapse: collapse;
	font-size: 1.1em;
	margin-bottom: 50px;
}

div.workspace.form table td{
	height: 40px;
	padding: 0 8px;
	white-space:nowrap;
}

div.workspace.form table tbody > tr > td {
	font-weight: 400;
	overflow: hidden;
}

div.workspace.form input {
	line-height: 25px;
	height: 25px;
	display: inline-block;
	padding: 0 5px;
}

div.workspace.form col.label{
	width: 175px;
}
div.workspace.form table tr > td > button{
	height: 28px;
	line-height: 27px;
	background-color: #efefef;
	border: 1px solid #eaeaea;
	color: #666666;
	cursor: pointer;
	display: inline-block;
	margin: 0 0;
	padding: 0 9px 0 0;
	position: relative;
	text-decoration: none;
}

div.workspace.form i[class^="icon_"]{
 	width: 20px;
	height: 20px;
	display: inline-block;
	margin: 3px 9px;
}

div.workspace.form table tr > td > button:hover{
	background-color: #fcfcfc;
}

/******************************************************************************/
/* ICON ***********************************************************************/
/******************************************************************************/

i[class^="icon_"] {
	width: 20px;
	height: 20px;
	background: transparent url('../img/iconset.png') no-repeat;
	background-position: 0px 0px;
	display: inline-block;
}

i[class^="icon_white_"] {
	background-image: url('../img/iconset_white.png');
}

i.icon_help {
	background-position: -100px 0px;
}

i[class^="icon_"][class$="_create"] {
	background-position: -80px -20px;
}

i[class^="icon_"][class$="_image_"] {
	background-position: -80px -40px;
}

i[class^="icon_"][class$="_video_"] {
	background-position: -100px -40px;
}

i[class^="icon_"][class$="_audio_"] {
	background-position: -60px -80px;
}

i[class^="icon_"][class$="_image_create"] {
	background-position: -80px -80px;
}

i[class^="icon_"][class$="_video_create"] {
	background-position: -100px -80px;
}

i[class^="icon_"][class$="_audio_create"] {
	background-position: 0px -100px;
}

i[class^="icon_"][class$="_gallery"] {
	background-position: 0px -60px;
}

i[class^="icon_"][class$="_general"] {
	background-position: -20px -60px;
}

i[class^="icon_"][class$="_image"] {
	background-position: 0px -60px;
}

i[class^="icon_"][class$="_seo"] {
	background-position: -40px -60px;
}

i[class^="icon_"][class$="_settings"] {
	background-position: -60px -20px;
}

i[class^="icon_"][class$="_edit"] {
	background-position: 0px -40px;
}

i[class^="icon_"][class$="_save"] {
	background-position: -20px -40px;
}

i[class^="icon_"][class$="_close"] {
	background-position: -60px -40px;
}

i[class^="icon_"][class$="_save_close"] {
	background-position: -40px -40px;
}

i[class^="icon_"][class$="_delete"] {
	background-position: -100px -20px;
}

i[class^="icon_"][class$="_content"] {
	background-position: -120px -0px;
}

i[class^="icon_"][class$="_comment"] {
	background-position: -80px -60px;
}

i[class^="icon_"][class$="_category"] {
	background-position: -100px -60px;
}

i[class^="icon_"][class$="_parameter"] {
	background-position: 0px -80px;
}

i[class^="icon_"][class$="_back"] {
	background-position: -20px -80px;
}

i[class^="icon_"][class$="_value"] {
	background-position: -40px -80px;
}

i[class^="icon_"][class$="_password_change"] {
	background-position: -20px -100px;
}

i[class^="icon_"][class$="_address"] {
	background-position: -40px -100px;
}

i[class^="icon_"][class$="_detail"] {
	background-position: -60px -100px;
}

i[class^="icon_"][class$="_show"] {
	background-position: -60px -100px;
}

i[class^="icon_"][class$="_download"] {
	background-position: -80px -100px;
}

i[class^="icon_"][class$="_page_link"] {
	background-position: -100px -100px;
}

/******************************************************************************/
/* HEADER *********************************************************************/
/******************************************************************************/

header {
	width: 100%;
	height: 50px;
	background: #105785;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 14000;
}

header > h1 {
	background: transparent url(../img/c-web_logo.png) no-repeat center left;
	color: #ffffff;
	display: inline-block;
	font-size: 1.4em;
	font-weight: 500;
	line-height: 50px;
	margin: 0 10px;
	padding: 0 15px 0 45px;
}

header > div#headnav {
	height: 50px;
	position: fixed;
	top: 0;
	right: 75px;
	z-index: 1500;
}

div#headnav > a {
	width: 50px;
	height: 50px;
	display: block;
	float: left;
	margin-right: 0px;
}

header i[class^="icon_"] {
	display: block;
	overflow: hiddent;
	margin: 15px;
}

header i.icon_white_web {
	background-position: -20px 0px;
}

header i.icon_white_webmail {
	background-position: -40px 0px;
}

header i.icon_white_profile {
	background-position: -60px 0px;
}

header i.icon_white_logout {
	background-position: -80px 0px;
}

header div#headnav > a:hover {
	background-color: #20749b;
}

header div#headnav > span {
	color: #ffffff;
	line-height: 50px;
	margin-left: 15px;
}

header div#logout{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1500;
}

header div#logout a{
	width: 50px;
	height: 50px;
	background-color: #c80000;
	display: inline-block;
}

header div#logout a:hover{
	background-color: #ff0000;
}

/******************************************************************************/
/* NAVIGATION BAR *************************************************************/
/******************************************************************************/

nav {
	width: 200px;
	height: 100%;
	background: #dce7f6;
	font-size: 1.2em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
}

nav > div.holder {
	width: 200px;
	min-height: 200px;
	z-index: 500;
    height: 100%;
    position: relative;
}

nav > div.holder > ul.main {
	width: 180px;
	border-top: 1px solid #c0d4ee;
	position: fixed;
	bottom: 10px;
	left: 0;
	z-index: 510;
    background-color: #dce7f6;
}

nav ul {
	list-style-type: none;
	padding: 0;
}

nav > div.holder > ul.component {
	width: 100%;
	height: calc(100% - 230px);
    margin: 50px 0 190px 0;
    display: block;
    overflow-y: auto;
}

nav ul > li {
	margin: 0;
}

nav ul > li > a{
	width: 100%;
	line-height: 45px;
	color: #105785;
	display: inline-block;
	padding-left: 0px;
	text-decoration: none;
}

nav ul > li > a > i[class^="icon_"]{
	width: 24px;
	height: 24px;
	background-image: url('../img/iconset_24.png');
	display: block;
	float: left;
	margin: 10px 12px 9px 8px;
}

nav ul > li > a > i.icon_help{
	background-position: -24px 0px !important;
}

nav ul > li > a > i.icon_settings{
	background-position: -48px 0px !important;
}

nav ul > li > a > i.icon_user{
	background-position: -72px 0px !important;
}

nav ul > li > a > i.icon_menu{
	background-position: 0px -24px !important;
}

nav ul > li > a > i.icon_multimedia{
	background-position: -24px -24px !important;
}

nav ul > li > a > i.icon_page{
	background-position: -48px -24px !important;
}

nav ul > li > a > i.icon_article{
	background-position: -72px -24px !important;
}

nav ul > li > a > i.icon_dashboard{
	background-position: -98px -24px !important;
}

nav ul > li > a > i.icon_flat{
	background-position: -72px -72px !important;
}


nav ul > li > a:hover {
	background-color: #c0d4ee;
}

nav ul > li > a.active{
	background-color: #c0d4ee;
}

nav ul > li > a.active:hover {
	background-color: #b3c5dd;
}

/******************************************************************************/
/* PART ***********************************************************************/
/******************************************************************************/

div[id^="part_"] {
	background: #ffffff;
	text-align: justify;
	padding: 75px 50px 30px 250px;
}

/******************************************************************************/
/* PART - HEADER **************************************************************/
/******************************************************************************/

div[id^="part_"] > div.header{
	min-width: 900px;
	height: 40px;
	border-bottom: 1px solid #ededed;
	position: relative;
}

div[id^="part_"] > div.header i.icon_help{
	margin-right: 0 !important;
}

div[id^="part_"] > div.header > h2{
	line-height: 40px;
	background: #ffffff;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-left: 1px solid #ededed;
	display: inline-block;
	color: #666666;
	float: left;
	font-size: 1.5em;
	font-weight: 600;
	margin-top: 0px;
	padding: 0 20px;
}

div[id^="part_"] > div.header > div.menu{
	position: absolute;
	bottom: 5px;
	right: -3px;
}

div[id^="part_"] > div.header > div.menu > ul{
	list-style-type: none;
}

div[id^="part_"] > div.header > div.menu > ul >li{
	float: left;
}

div[id^="part_"] > div.header > div.menu > ul >li > a,
div[id^="part_"] > div.header > div.menu > ul >li > button{
	height: 26px;
	line-height: 26px;
	background: #fcfcfc;
	border: 1px solid #eeeeee;
	color: #666666;
	cursor: pointer;
	display: inline-block;
	margin: 0 3px;
	padding: 0 9px 0 0;
	position: relative;
	text-decoration: none;
}

div[id^="part_"] > div.header > div.menu > ul >li > button{
	line-height: 27px;
	height: 28px;
}

div[id^="part_"] > div.header > div.menu > ul > li > a > i[class^="icon_"],
div[id^="part_"] > div.header > div.menu > ul > li > button > i[class^="icon_"]{
 	width: 20px;
	height: 20px;
	display: inline-block;
	float: left;
	margin: 3px 9px;
}

div[id^="part_"] > div.header > div.menu > ul >li > a:hover,
div[id^="part_"] > div.header > div.menu > ul >li > button:hover{
	background-color: #eeeeee;
}

/******************************************************************************/
/* LANGUAGE *******************************************************************/
/******************************************************************************/

div.language {
 	height: 40px;
	width: 250px;
	float: left;
}

div.language > ul {
	list-style-type: none;
	margin: 11px 0 0 0;
	padding: 0 8px;
}

div.language > ul > li {
	width: 35px;
	height: 28px;
	line-height: 28px;
	background-color: #f6f6f6;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	cursor: pointer;
	display: inline-block;
	float: left;
	margin: 0 4px;
	overflow: hidden;
	padding: 0;
	text-align: center;
}

div.language > ul > li:hover {
	height: 33px;
	line-height: 33px;
	margin-top: -5px;
}

div.language > ul > li.active {
	background: #ffffff;
	border-bottom: 1px solid #ffffff;
	cursor: default;
}

div.language > ul > li.active:hover {
	height: 29px;
	line-height: 29px;
	background: #ffffff;
	margin-top: 0px;
}

div.language > ul > li > img {
	width: 21px;
	height: 15px;
	border: 1px solid #dddddd;
	margin-top: 6px;
}

div.hidden_language {
	display: none;
}

/******************************************************************************/
/* EDITOR *********************************************************************/
/******************************************************************************/

div.workspace.form div.editor {
	width: auto;
	min-width: 500px;
	position: absolute;
	top: 20px;
	right: 400px;
	left: 0;
	z-index: 10000;
}

div.workspace.form div.editor table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.1em;
	margin-bottom: 10px;
	table-layout: fixed;
}

div.workspace.form div.editor table tbody > tr > td {
	width: 100%;
	height: 40px;
	font-weight: 400;
	overflow: visible;
	padding: 0;
	white-space:nowrap;
}

div.workspace.form div.editor table label {
	line-height: 30px;
	border-left: 1px solid #cccccc;
	display: inline-block;
	font-weight: 700;
	margin-top: 15px;
	padding-left: 10px;
}

div.workspace.form div.editor input {
	width: 80%;
	height: 35px;
	line-height: 35px;
	border: 1px solid #cccccc;
	display: inline-block;
	font-size: 1.05em;
	margin-top: -2px;
	padding: 0 10px;
}

div.workspace.form div.editor input[type="text"][readonly] {
	width: 80%;
	height: 35px;
	line-height: 35px;
	background-color: #f6f6f6;
	color: #666666;
	font-size: 0.9em;
	margin-top: -10px;
}

div.workspace.form div.editor select {
	width: 80%;
	height: 35px;
	line-height: 35px;
	border: 1px solid #cccccc;
	display: inline-block;
	font-size: 1.05em;
	margin-top: -4px;
	padding: 0 0 0 10px;
}

div.workspace.form div.editor select[multiple] {
	width: 80%;
	height: 100px;
	line-height: 100px;
	border: 1px solid #cccccc;
	display: inline-block;
	font-size: 1.05em;
	margin-top: 0px;
	padding: 3px 0 3px 10px;
}

div.workspace.form div.editor textarea {
	width: 100%;
	border: 1px solid #cccccc;
}

div.workspace.form div.editor textarea.intro {
	height: 150px;
}

div.workspace.form div.editor textarea.text {
	height: 250px;
}

div.workspace.form div.editor col.label {
	width: 175px;
}

div.workspace.form div.editor table tbody > tr > td > button {
	height: 28px;
	line-height: 27px;
	background-color: #ffffff;
	border: 1px solid #e3e3e3;
	color: #666666;
	cursor: pointer;
	display: inline-block;
	margin: 0 0 20px 0;
	padding: 0 9px 0 0;
	position: relative;
	text-decoration: none;
}

div.workspace.form div.editor table tbody > tr > td > button:hover{
	background-color: #efefef;
	border: 1px solid #eaeaea;
	color: #666666;
}

div.workspace.form i[class^="icon_"] {
 	width: 20px;
	height: 20px;
	display: inline-block;
	float: left;
	margin: 3px 9px;
}

div.workspace.form > button:hover {
	background-color: #fcfcfc;
}

div.workspace.form div.editor div.use_language {
	width: 100%;
	height: 40px;
	border: 1px solid #ededed;
	margin-bottom: 20px;
}

div.workspace.form div.editor div.use_language > label {
	display: block;
	float: left;
	line-height: 40px;
	padding: 0 10px 0 20px;
}

div.workspace.form div.editor div.use_language > input {
	width: 15px;
	height: 15px;
	display: block;
	margin-top: 13px;
}

div.workspace.form div.preferences {
	width: 290px;
	border-left: 1px solid #ededed;
	padding: 0 15px 50px 15px;
	position: absolute;
	top: 20px;
	right: 40px;
}

div.workspace.form div.preferences table {
	width: 290px;
	table-layout: fixed;
}

div.workspace.form div.preferences table tbody > tr > td {
	width: 100%;
	height: 40px;
	font-weight: 400;
	overflow: hidden;
	padding: 0;
	white-space:nowrap;
}

div.workspace.form div.preferences table label {
	border-left: 1px solid #cccccc;
	display: inline-block;
	font-weight: 700;
	line-height: 30px;
	margin-top: 15px;
	padding-left: 10px;
}

div.workspace.form div.preferences table input {
	width: 250px;
	height: 35px;
	line-height: 35px;
	border: 1px solid #cccccc;
	display: inline-block;
	font-size: 1.05em;
	margin-top: -2px;
	padding: 0 10px;
}

div.workspace.form div.preferences table select {
	width: 273px;
	height: 35px;
	line-height: 35px;
	border: 1px solid #cccccc;
	display: inline-block;
	font-size: 1.05em;
	margin-top: -4px;
	padding: 0 0 0 10px;
}

div.workspace.form div.preferences table select[multiple] {
	width: 273px;
	height: 100px;
	line-height: 100px;
	border: 1px solid #cccccc;
	display: inline-block;
	font-size: 1.05em;
	margin-top: 0px;
	padding: 3px 0 3px 10px;
}

div.workspace.form div.bookmark {
	width: 39px;
	height: 80px;
	border-left: 1px solid #ededed;
	padding-bottom: 250px;
	position: absolute;
	top: 20px;
	right: 0;
}

div.workspace.form div.bookmark > ul {
	list-style-type: none;
	margin: 11px 0 0 0;
	padding: 0 0;
}

div.workspace.form div.bookmark > ul > li {
	width: 40px;
	height: 40px;
	line-height: 40px;
	background-color: #f6f6f6;
	border-top: 1px solid #ededed;
	border-right: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	border-left: 1px solid #ededed;
	cursor: pointer;
	display: inline-block;
	margin: 0 0 5px -1px;
	overflow: hidden;
	padding: 0;
	text-align: center;
	position: relative;
}

div.workspace.form div.bookmark > ul > li:hover {
	width: 45px;
}

div.workspace.form div.bookmark > ul > li.active {
	background-color: #ffffff;
	border-left: 1px solid #ffffff;
	cursor: default;
}

div.workspace.form div.bookmark > ul > li.active:hover {
	background: #ffffff;
	width: 40px;
}

div.workspace.form div.bookmark > ul > li > i {
	position: absolute;
	top: 7px;
	right: 2px;
}

div.hidden_preferences {
	display: none;
}

/******************************************************************************/
/* PAGINATION *****************************************************************/
/******************************************************************************/

div.pagination{
	line-height: 20px;
	width: 100%;
	font-size: .95em;
	padding-top: 5px;
}

div.pagination > div.limit {
	display: inline-block;
	margin-right: 10px;
	padding:0 10px 0 7px;
	border-right: #999999 solid 1px;
}

div.pagination > div.limit label {
	line-height: 20px;
	margin-right: 5px;
}

div.pagination > div.limit select {
	height: 20px;
}

div.pagination > div.page {
	display: inline-block;
	margin-right: 10px;
}

div.pagination > div.page > a{
	background: #fcfcfc;
	border: 1px solid #eeeeee;
	line-height: 20px;
	margin-right: 3px;
	font-weight: 500;
	color: #333;
	width: 20px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

div.pagination > div.page > span.active{
	background: #dce7f6;
	border: 1px solid #c0d4ee;
	font-weight: 700;
	color: #105785;
}

div.pagination > div.page > span{
	background: #f2f2f2;
	border: 1px solid #eeeeee;
	line-height: 20px;
	margin-right: 3px;
	width: 20px;
	color: #aaaaaa;
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

div.pagination > div.page > a:hover{
	background: #eeeeee;
}



/******************************************************************************/
/* TABLE - DIALOG *************************************************************/
/******************************************************************************/

div.dialog {
	position: fixed;
	left:50%;
	top:50%;
	width: 600px;
	height: 400px;
	margin:-200px 0 0 -300px;
	background-color: #ffffff;
	z-index: 10000;
	border: 1px solid #105785;
	box-shadow: 0px 0px 15px #aaaaaa;
}

div.dialog > div.header {
	width: 600px;
	height: 40px;
	color: #ffffff;
	font-size: 1.1em;
	font-weight: 700;
	background-color: #105785;
}

div.dialog > div.header > div.title {
	width: 530px;
	padding: 0px 15px;
	line-height: 38px;
	float: left;
}

div.dialog > div.header > div.close {
	width: 40px;
	height: 40px;
	float: left;
}

div.dialog > div.header > div.close > button {
	width: 40px;
	height: 40px;
	background-color: #4e7187;
	border: none;
	cursor: pointer;
	display: inline-block;
	padding: 0px;
}

div.dialog > div.header > div.close > button:hover {
	background-color: #c80000;
}

div.dialog > div.header > div.close i.icon_close {
	background-position: -60px -60px;
	margin-left: 7px;
	margin-right: 7px;
}

div.dialog > div.body {
	width: 600px;
	height: 306px;
	overflow: auto;
}

div.dialog > div.body > div.content {
	color: #000;
	font-weight: 600;
	padding: 15px 15px 15px 15px;
}

div.dialog > div.footer {
	width: 570px;
	height: 28px;
	border-top: 1px solid #ededed;
	background-color: #fff;
	padding: 10px 15px 15px 15px;
}

div.dialog > div.footer > button {
	height: 30px;
	line-height: 30px;
	background-color: #efefef;
	border: 1px solid #eaeaea;
	color: #666666;
	cursor: pointer;
	display: inline-block;
	margin: 0 10px 0 0;
	padding: 0 15px;
	position: relative;
	text-decoration: none;
}

/**/

nav > div.holder > ul > li > a > i.icon_e_product{
	background-position: 0px -48px !important;
}

nav > div.holder > ul > li > a > i.icon_e_currency{
	background-position: -24px -48px !important;
}

nav > div.holder > ul > li > a > i.icon_e_shipment{
	background-position: -48px -48px !important;
}

nav > div.holder > ul > li > a > i.icon_e_payment{
	background-position: -72px -48px !important;
}

nav > div.holder > ul > li > a > i.icon_e_user{
	background-position: -96px -48px !important;
}

nav > div.holder > ul > li > a > i.icon_e_order{
	background-position: -0px -72px !important;
}

nav > div.holder > ul > li > a > i.icon_carousel{
	background-position: -48px -72px !important;
}