* {
	margin:0px;
	padding:0px;
}

body {
	font:13px/20px 'Roboto', sans-serif;
	background-image:url("/images/sidenav.png");
	background-position:left top;
	background-repeat:repeat-y;
	background-color:#ececec;
}
body.login {
	background-image:none;
	background-color:#F9F9F9;
}

a, .lnk {
	color:#00bdff;
	cursor:pointer;
}
a img {
	border:0px;
}
.addline, .addline2 {
	color:#00bdff;
	text-decoration:underline;
	cursor:pointer;
}
hr {
	border:0px;
	border-bottom:1px dashed #ccc;
}
h1 {
	font:normal 26px/32px 'Roboto', sans-serif;
	color:#2b353f;
	margin:0px 0px 20px 0px;
	border-bottom:1px solid #2b353f;
}
h1 a {
	float:right;
	display:inline;
}
.overflow {
	display:block;
	overflow:hidden;
}
#loginform {
	margin:100px auto 0px auto;
	border:1px solid #ccc;
	padding:30px;
	overflow:hidden;
	width:300px;
	background-color:#fff;
}
#loginform .btn1 {
	float:left;
	margin:0px 0px 0px 6px;
}
#loginform h1 {
	float:right;
	display:inline;
	line-height:30px;
	width:auto;
	margin:0px;
	padding:0px;
	color:#272223;
	font-size:16px;
	border:0px;
}
#loginform p {
	margin:20px 0px 0px 0px;
	width:100%;
}
#loginform a {
	float:left;
	margin:20px 0px 0px 0px;
}

.code {
	position:absolute;
	z-index:100000;
	top:0px;
	left:50%;
	margin:0px 0px 0px -250px;
	width:500px;
	text-align:center;
}
.code500 {
	background-color:#FFF0F0;
	padding:10px 20px;
	border:2px solid #900;
	border-top:0px;
	color:#900;
}
.code200 {
	background-color:#EBFFEA;
	padding:10px 20px;
	border:2px solid #090;
	border-top:0px;
	color:#090;
}

#header {
	background-image:url("/images/headerbg.png");
	height:49px;
}
#nav {
	float:left;
	display:inline;
	background-image:url("/images/sidenav.png");
	width:220px;
	padding:0px 0px 50px 0px;
	margin:0px 30px 0px 0px;
	overflow-y:auto;
	overflow-x:hidden;
}
#currentsite {
	display:none;
	color:#A8A8A8;
	height:39px;
	border-bottom:1px solid #000;
	font:14px/39px Arial, Helvetica, sans-serif;
	padding:0px 20px 0px 50px;
	margin:0px 0px 30px 0px;
	background-image:url("/images/domain.png");
	background-position:20px 8px;
	background-repeat:no-repeat;
}
#nav ul {
	margin:50px 0px 0px 0px;
	list-style:none;
}
#nav ul li a {
	font:14px/20px Arial, Helvetica, sans-serif;
	color:#a8a8a8;
	text-decoration:none;
	display:block;
	padding:8px 20px;
	width:180px;
}
#nav ul li.active a {
	color:#fff;
}

#nav ul li a:hover {
	text-decoration:underline;
}
#nav ul li ul {
	list-style:none;
	margin:0px 0px 0px 20px;
}
#nav ul li ul li a {
	font:12px/18px Arial, Helvetica, sans-serif;
	color:#a8a8a8;
	text-decoration:none;
	display:block;
	padding:4px 20px;
}



#content {
	float:left;
	display:inline;
	min-width:790px;
	padding:50px;
/*	width:790px;*/
}
h1 {
	background-color:#fff;
	margin:-50px 0px 30px -50px;
	padding:10px 50px 2px 50px;
	border:0px;
	width:100%;
	font-size:26px;
	line-height:38px;
}


table tr th {
	text-align:left;
}
table.tablelist tr td, table.tablelist tr th {
	border-bottom:1px solid #ccc;
	padding:3px 0px;
}
table.tablelist tr td img {
	vertical-align:middle;
	margin:0px 0px 0px 3px;
}

.sitelist {
	position:relative;
}
.sitelist .siteusers {
	display:none;
	border:1px solid #ccc;
	background-color:#fff;
	padding:10px;
	position:absolute;
	min-width:150px;
	top:20px;
	left:0px;
	z-index:1000;
}
.sitelist:hover .siteusers {
	display:block;
}

ul.menus {
	list-style:none;
	font-size:15px;
}
ul.menus li {
	font-weight:bold;
	margin:0px 0px 15px 0px;
	padding:5px 0px;
}
ul.menus > li > div {
	padding:5px 10px;
	color:#fff;
	background-color:#000;
}
ul.menus li strong {
	display:block;
	padding:5px 10px;
	color:#fff;
	background-color:#000;

}
ul.menus li a {
	color:#000;
	text-decoration:none;
}
ul.menus li .none {
	display:inline-block;
	cursor:pointer;
	margin:0px 0px -3px 0px;
	width:1px;
	height:16px;
}
ul.menus li .less {
	display:inline-block;
	cursor:pointer;
	margin:0px 0px -3px 0px;
	background-image:url(/images/liopen.png);
	width:16px;
	height:16px;
}
ul.menus li .more {
	display:inline-block;
	cursor:pointer;
	margin:0px 0px -3px 0px;
	background-image:url(/images/liclose.png);
	width:16px;
	height:16px;
}

ul.menus li ol {
    background-color: #fff;
    margin: 0 0 20px;
    padding: 6px 20px 0 30px;
}

ul.menus li ol li ol {
	padding:0px 0px 0px 30px;
	margin:6px 0px 0px 0px;
}
ul.menus li ol li {
	font-weight:normal;
	margin:0px 0px 0px 0px;
	padding:0px 0px 5px 0px;
}
ul.menus li ol li:last-child {
	border-bottom:0px;
}
ul.menus li ol li div.loadtools {
	width:100%;
	display:block;
	overflow:hidden;
    border-bottom: 1px solid #ccc;
    padding: 0 0 4px;
}
ul.menus li ol li div.loadtools:hover {
	background-color:#F7F7F7;
}
ul.menus div.tools {
	float:right;
	height:18px;
	overflow:hidden;
}
ul.menus div.visible div.tools {
	display:block!important;
}

ul.menus div.tools img {
	margin:0px 0px 3px 8px;
	vertical-align:middle;
}

div.module {
	width:500px;
	cursor:pointer;
	margin:20px 0px 20px 0px;
	border-bottom:1px solid #999;
	overflow:hidden;
}
div.module img {
	display:inline-block;
	vertical-align:middle;
    margin: 0 30px 10px 0;
	float:right;
}
div.module.active {
	padding:10px;
	border:0px;
	box-shadow:0px 0px 1px 2px #666;
}
.mce-floatpanel .mce-container-body {

	overflow:auto;
}
.imagecontainer {
	float:left;
	overflow:hidden;
}
.imagecontainer input, .imagecontainer span {
	float:left;
	clear:left;
}
.imagecontainer img {
	float:left;
	margin:0px 0px 0px 10px;
}
.imagecontainer span {
	color:#00bdff;
	cursor:pointer;
	margin:-8px 0px 8px 0px;
}
.deactivate {
	float:left;
	width:15px;
	height:15px;
	margin:3px 0px 0px 0px;
	background-color:#060;
}
.activate {
	float:left;
	width:15px;
	height:15px;
	margin:3px 0px 0px 0px;
	background-color:#900;
}
#whereami {
	background-color:#474544;
	width:100%;
	height:40px;
}



.newtbl th {
	border:1px solid #404040;
	background-color:#404040;
	padding:4px 5px;
	color:#fff;
}
.newtbl th input {
	padding:0px 7px;
	margin:0px 20px 0px 0px;
}
.newtbl th a {
	float:right;
}
.newtbl th a img {
	display:block;
}
.newtbl thead td {
	background-image:url("/images/theadtdbg.png");
	background-position:left bottom;
	background-repeat:repeat-x;
	color:#666;
}
.newtbl tr td:first-child {
	border-left:1px solid #ccc;
}
.newtbl td {
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background-color:#FFF;
	padding:2px 5px;
	color:#333;
	vertical-align:top;
}

ul.tabs{
	overflow:hidden;
	list-style:none;
	background-color:#404040;
}
ul.tabs li {
	float:left;
	border-left:1px solid #404040;
	border-top:1px solid #404040;
	display:inline;
}
ul.tabs li:last-child {
	border-right:1px solid #404040;
}
ul.tabs li a {
	display:block;
	padding:5px 10px;
	background-color:#4c4c4c;
	color:#fff;
	text-decoration:none;
}
ul.tabs li.active a {
	background-color:#FFF;
	color:#2B353F;
}
.tabcontainer {
	border:1px solid #404040;
	background-color:#fff;
	border-top:0px;
	padding:20px;
	overflow:hidden;
}
.senditem td {
	background-color:#E0FFD7;
}
.optionbox {
	overflow:hidden;
	padding:10px 0px;
}
.setIvvOrder {
	cursor:pointer;
}
.logout {
	float:right;
	font-size:17px;
	line-height:20px;
	color:#fff;
	margin:33px 30px 0 0;
	text-decoration:none;
	border-left:2px solid #fff;
	padding:0px 00px 0px 30px;
}
.loginas {
	background-image:url('/images/user.png');
	background-position:left middle;
	background-repeat:no-repeat;
	float:right;
	font-size:17px;
	line-height:30px;
	height:30px;
	color:#fff;
	padding:0px 0px 0px 35px;
	margin:28px 30px 0 0;
	text-decoration:none;
}
.smallinput input {
	width:120px!important;
}


.fotogrid {
	list-style:none;
	margin:20px 0px 0px 0px;
	padding:0px;
	overflow:hidden;
}
.fotogrid li {
	width:200px;
	float:left;
	margin:0px 10px 10px 0px;
	background-color:#fff;
	border:1px solid #ccc;
}
.fotogrid li img {
	width:200px;
}
.fotogrid li a {
	color:#000;
	text-decoration:none;
}
.fotogrid li a strong {
	display:block;
	padding:5px 10px 0px 10px;
}
.fotogrid li a i {
	display:block;
	padding:0px 10px 10px 10px;
}

.ghost {
	display:none;
}
.dropzone .tools {
	position:absolute;
	top:10px;
	right:10px;
}

.ieoverlay {
	position:fixed;
	z-index:100000000;
	background-color:#000;
	opacity:0.3;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.iepopup {
	position:fixed;
	z-index:100000001;
	max-width:60%;
	min-width:150px;
	padding:50px;
	background-color:#fff;
	left:50%;
	top: 50%;
}

span.news_active, span.sj_active {
	background-color:#060;
	display:inline-block;
	cursor:pointer;
	width:20px;
	height:20px;
}
span.news_inactive, span.sj_inactive {
	background-color:#900;
	display:inline-block;
	cursor:pointer;
	width:20px;
	height:20px;
}
.fm {
	list-style:none;
}
.fm li {
	padding:2px 0px;
	border-bottom:1px solid #ccc;
}
.fm li:last-child {
	border:0px;
}
.fm li a:first-child {
	display:inline-block;
	width:300px;
}
.fm li ul {
	border-top:1px solid #ccc;
}
.fm li ul li {
	padding:2px 0px 2px 20px;
}
.fm li ul li a:first-child {
	width:280px;
}

.ui-datepicker-trigger {
	display:none;
}
.morecat {
	cursor:pointer;
	color:#00bdff;
	text-decoration:none;
	float:left;
	margin:-5px 0px 10px 0px;
}
tr.nopayment td {
	background-color:#FFD2D2;
}
.sjfotos {
	list-style:none;
	text-align:center;
}
.sjfotos li {
	display:inline-block;
	margin:5px;
	cursor:pointer;
	border:2px solid #fff;
}
.sjfotos li.selected {
	border:2px solid #090;
}
.sjfotos li img {
	width:80px;
	display:block;
}
.sjaddClub {
	float:left;
	clear:both;
	cursor:pointer;
}
#fotouploader {
	position:absolute;
	height:317px;
	width:276px;
	z-index:9999999999999999;
	left:50%;
	margin:0px 0px 0px -138px;
}
#overlay {
    background-color: #000;
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000000000;
}
#imgform .dropzone {
	width:276px;
	height:317px;
}

#imgs {
	margin:10px 0px 0px 0px;
}
#imgs img {
    float: left!important;
    margin: 0 10px 10px 0!important;
}

.addrlist {
	list-style:none;
	margin:0px;
	padding:0px;
	float:left; 
	width:100%;
	clear:both;
}
.addrlist li {
	background-color:#fff;
	padding:10px;
	cursor:pointer;
	border:1px solid #ccc;
	overflow:hidden;
	margin:0px 0px 10px 0px;
}
.editinvoice {
	display:none;
	float:left;
	clear:both;
	margin:20px 0px 0px 0px;
}
.addrlist li.open .editinvoice {
	display:block;
}
.addrlist li.open .showinvoice {
	display:none;
}
.addInvline, .addDelline {
	float:left;
	clear:both;
	cursor:pointer;
	color:#1656B7;
}
.iconbox {
	float:left;
	width:100%;
}
.iconbox div {
	width:calc(20% - 6px);
	float:left;
	border-right:1px solid #ccc;
	padding:0px 0px 0px 5px;
}
.iconbox div i {
	margin:0px 10px;
}
div.mce-fullscreen {
	z-index: 99999999999;
}

.fa {
	font-family: FontAwesome
}


.tab {
	float: left;
	clear: both;
}
.tab > li {
	float: left;
	display: inline;
	margin: 0px 3px 0px 0px;
	background-color: #F7F7F7;
	padding: 5px 10px;
	border-top:10px solid #ececec;
	font-weight: bold;
	cursor: pointer;
}
.tab > li.active {
	border-top:10px solid #fff;
	background-color: #fff;
	padding: 5px 15px;
}

.tabs {
	float: left;
	clear: both;
	width: 90%;
	padding: 20px;
	background-color: #fff;
}
.tabs > .tab {
	display: none;
}
.tabs > .tab.active {
	display: block;
}

.comgenre {
	list-style: none;
	border-top: 1px solid #ccc;
}
.comgenre li {
	padding: 3px 0px 0px 0px;
	border-bottom: 1px solid #ccc;
}



.catheader {
	list-style: none; 
	width: 450px;
}
.catheader li {
	background-color: #404040; 
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.catheader li:nth-child(2) {
	background-image: url(/images/theadtdbg.png); 
	background-position: left bottom; 
	background-repeat: repeat-x;
	background-size: 100% 100%;
}
.catheader li:first-child span {
	border: 0px!important;
}



.catlist {
	width: 448px!important;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	list-style: none;
}
.catlist .catlist {
	width: 448px!important;
	border: 0px!important;
}
.catheader li .name, .catlist li .name {
	display: inline-block; 
	width: 306px; 
	padding: 4px 5px;
	vertical-align: top;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.catheader li .active, .catlist li .active {
	display: inline-block; 
	vertical-align: top; 
	text-align: center;
	width: 50px;
	padding: 4px 5px;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.catheader li .options, .catlist li .options {
	width: 60px;
	display: inline-block;
	text-align: right; 
	padding: 4px 5px;
	border-bottom:1px solid #ccc;
}
.catheader li .options img, .catlist li .options img {
	display: inline-block;
}
.catlist li .options {
	text-align: left;
}
.catlist li span {
	height: 20px;
}


	<ul class="catlist sort" style="list-style: none; width: 400px; background-color: #fff;">
		<?php
		  $i=1;
		  foreach($cdb->queryarray("SELECT c.id, c.active, ci.name FROM shop_category c, shop_categoryinfo ci WHERE c.root=0 AND ci.category=c.id AND ci.lang=? ORDER BY c.position ASC", array($_SESSION['editlang'])) as $cat){ ?>
		<li>
			<span class="name" style="display: inline-block; width: 250px; vertical-align: top;"><?php echo $i.". ".$cat['name']; ?></span>
			<span class="active" style="display: inline-block; width: 80px; vertical-align: top;"><?php echo ($cat['active']==1?'X':""); ?></span>
			<span class="options">
				<a href="/user/webshop/category/edit/<?php echo $cat['id']; ?>.html" title="<?php echo EDIT; ?>"><img src="/images/icons/edit.png" alt="<?php echo EDIT; ?>" /></a>
				<a href="/user/webshop/category/delete/<?php echo $cat['id']; ?>.html" title="<?php echo DELETE; ?>"><img src="/images/icons/delete.png" alt="<?php echo DELETE; ?>" /></a>			
			</span>
			 <?php $ws_cat->showsubcatlist2($cat['id']); ?>
		</li>
		<?php } ?>