/*
	Created by Eric Meyer
	Edited by dreame4
*/

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, q, samp,
small, strike, strong, sub, sup,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	text-align: left;
	text-decoration:none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ol, ul {
	list-style: none;
}

q:lang(pl) { quotes: "\201E" "\201D" "\00AB" "\00BB"; }
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

abbr[title], acronym[title] { cursor: help; }

strong { font-weight: bold; }

.clear { clear: both !important; }
.block { display: block !important; }
.right { float: right !important; }
.left { float: left !important; }
.none { display: none !important; }
.no-bg { background: none !important; } 

h1, h2, h3, h4, h5 { font-family: "Calibri", "Trebuchet MS", Helvetica, sans-serif; }

/* =descriptions
************************************************************** */
/*
	dark font color:										#111415;
	
*/

/* =let's go!
************************************************************** */

html {
	color: #3f3f3f;
	font: normal 62.5%/1 "Tahoma", "Arial", sans-serif;
	background-color: #eee;
	}
	
#wrapper {
	width: 980px;
	margin: 20px auto;
	}
	
#top {
	height: 50px;
	}
	
#menu {
	position: relative;
	float: left; 
	}
	
	#menu li {
		position: relative;
		float: left; 
		width: 133px;
		height: 39px;
		margin-right: 8px;
		}
		
		#menu li a {
			position: relative;
			display: block;
			width: 133px;
			height: 39px;
			text-indent: -1000em;
			background-repeat: no-repeat;
			background-position: 0 0;
			}
			
		#menu li a:hover, #menu li a.ac {
			background-position: 0 -39px;
			z-index: 1;
			}
			
		#menu li.new_design a { background-image: url(/i/m_new_design.png); }
		#menu li.load_design a { background-image: url(/i/m_load_design.png); }
		#menu li.save_design a { background-image: url(/i/m_save_design.png); }
		#menu li.upload_image a { background-image: url(/i/m_upload_image.png); }
		
		#menu li.upload_image { position: relative; z-index: 1; }
		
#top h1.dc {
	width: 312px;
	height: 36px;
	background: url(/i/logo_dc.png) no-repeat 0 0;
	float: right;
}

#top h1.dc a {
	display: block;
	width: 312px;
	height: 36px;
	text-indent: -1000em;
}

#top h1.f24 {
	width: 400px;
	height: 57px;
	background: url(/i/logo_f24.png) no-repeat 0 0;
	float: right;
	margin-top: -10px;
	margin-bottom: 6px;
}

#top h1.f24 a {
	display: block;
	width: 312px;
	height: 576px;
	text-indent: -1000em;
}

#top h1.dpc {
	width: 400px;
	height: 57px;
	background: url(/i/logo_dpc.png) no-repeat 0 0;
	float: right;
	margin-top: -10px;
	margin-bottom: 6px;
}

#top h1.dpc a {
	display: block;
	width: 312px;
	height: 576px;
	text-indent: -1000em;
}

		
#tools {
	width: 100%;
	background-color: #fff;
	height: 195px;
	position: relative;
	overflow: hidden;
	margin-bottom: 10px;
	}
	
	#tools .header,
	.layers_box .header {
		height: 34px;
		width: 100%;
		background: url(/i/thead_bg.png) repeat-x 0 0;
		border-bottom: 1px solid #bcbcbc;
		font-size: 1.2em;
		}
		
	#tools .header .title,
	.layers_box .header .title {
		display: block; 
		float: left; 
		background-repeat: no-repeat;
		line-height: 34px;
		background-position: 10px 50%;
		padding-left: 40px;
		}
		
		.header .sep {
			font-size: 1.43em;
			display: block;
			float: left;
			padding: 0 25px;
			line-height: 34px;
			color: #bcbcbc;
			}
	
.clipart_tool, .text_tool, .bg_colors {
	border: 1px solid #bcbcbc;
	border-width: 1px 0 1px 1px;
	width: 554px;
	height: 193px;
	float: left;
	overflow: hidden;
	/* overflow: auto; */
	}
	
.clipart_tool .padding, .text_tool .padding, .bg_colors .padding {
	margin: 10px;
	}
	
	.clipart_tool .header .title { background-image: url(/i/ico_clipart.png); }
	
	.clipart_tool .header form {
		line-height: 34px;
		display: block; 
		float: left; 
		padding-top: 7px;
		}
		
		.clipart_tool .header form label {
			padding-right: 10px;
			}
			
	.clipart_tool .images {
		margin: 10px 14px;
		display: none;
		}
		
	.clipart_tool .cat_0 {
		display: block;
	}
		
		.clipart_tool .images .left_arr,
		.clipart_tool .images .right_arr {
			display: block;
			width: 27px;
			height: 77px;
			float: left;
			padding-top: 53px;
			margin-right: 10px;
			}
			
		.clipart_tool .images .right_arr { float: right; margin-right: 0; margin-left: 10px; }
		
		.clipart_tool .images li {
			float: left;
			margin-right: 6px;
			margin-bottom: 6px;
			width: 35px;
			height: 35px;
			overflow: hidden;
			border: 1px solid #ccc;
			}
		.clipart_tool .images li a {
			display: block;
			width: 35px;
			height: 35px;			
		}
		.clipart_tool div.font-preview {
			display: none;
			width: 100%;
			padding-top: 45px;
			text-align: center;
		}
			
.clipart_tool .images .left_arr a,
.clipart_tool .images .right_arr a {
	display: block;
	width: 27px;
	height: 23px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	text-indent: -1000em;
	background-image: url(/i/arr_left.png);
}
				
.clipart_tool .images .right_arr a {
	background-image: url(/i/arr_right.png);
}
			
.text_tool {
	width: 259px;
}
	
	.text_tool .padding { margin: 8px; }

	.text_tool .header .title { background-image: url(/i/ico_text.png); }
	
	.text_tool .font_family, .text_tool .font_size {
		width: 58px;
		display: block;
		float: left;
		margin-right: 3px;
		}
		
	.text_tool .font_size {
		width: 48px;
		margin-right: 4px;
		}
		
	.text_tool .butt {
		display: block;
		float: left;
		width: 21px;
		height: 18px;
		background-repeat: no-repeat;
		border: 0;
		text-indent: -1000em;
		margin: 0px 1px 1px 0px;
		padding: 0;
		background-image: url(/i/text_tool_buttons.png);
		background-color: #ededed;
		outline: 0;
		}
		
		 .butt {
		display: block;
		float: left;
		width: 21px;
		height: 18px;
		background-repeat: no-repeat;
		border: 0;
		text-indent: -1000em;
		margin: 0px 1px 1px 0px;
		padding: 0;
		background-image: url(/i/text_tool_buttons.png);
		outline: 0;
		}
		
		.text_tool .butt:focus, .text_tool .butt:active { outline: 0 none !important; }
				
		.text_tool .bold { background-position: 0 0; }
		.text_tool .bold:hover { background-position: 0 -18px; }
		.text_tool .bold.ac { background-position: 0 -36px; }
		
		.text_tool .italic { background-position: -21px 0; }
		.text_tool .italic:hover { background-position: -21px -18px; }
		.text_tool .italic.ac { background-position: -21px -36px; }
		
		.text_tool .underline { background-position: -42px 0; }
		.text_tool .underline:hover { background-position: -42px -18px; }
		.text_tool .underline.ac { background-position: -42px -36px; }
		
		.text_tool .vertical { background-position: -63px 0; }
		.text_tool .vertical:hover { background-position: -63px -18px; }
		.text_tool .vertical.ac { background-position: -63px -36px; }
		
		.text_tool .horizontal { background-position: -84px 0; }
		.text_tool .horizontal:hover { background-position: -84px -18px; }
		.text_tool .horizontal.ac { background-position: -84px -36px; }
		
		.text_tool .circle { background-position: -105px 0; }
		.text_tool .circle:hover { background-position: -105px -18px; }
		.text_tool .circle.ac { background-position: -105px -36px; }

		.text_tool .colour { background-position: -126px 0px; }
		.text_tool .colour:hover { background-position: -126px -18px; }
		.text_tool .colour.ac { background-position: -126px 0px; }

		.text_tool .left { background-position: -147px 0; }
		.text_tool .left:hover { background-position: -147px -18px; }
		.text_tool .left.ac { background-position: -147px -36px; }

		.text_tool .center { background-position: -168px 0; }
		.text_tool .center:hover { background-position: -168px -18px; }
		.text_tool .center.ac { background-position: -168px -36px; }
		
		input.aliLeft { background-position: -231px 0; }
		input.aliLeft:hover { background-position: -231px -18px; }
		input.aliLeft.ac { background-position: -231px -36px; }
		
		input.aliCentre { background-position: -252px 0; }
		input.aliCentre:hover { background-position: -252px -18px; }
		input.aliCentre.ac { background-position: -252px -36px; }

		input.aliRight { background-position: -273px 0; }
		input.aliRight:hover { background-position: -273px -18px; }
		input.aliRight.ac { background-position: -273px -36px; }

		input.aliTop { background-position: -294px 0; }
		input.aliTop:hover { background-position: -294px -18px; }
		input.aliTop.ac { background-position: -294px -36px; }

		input.aliMiddle { background-position: -315px 0; }
		input.aliMiddle:hover { background-position: -315px -18px; }
		input.aliMiddle.ac { background-position: -315px -36px; }

		input.aliBottom { background-position: -336px 0; }
		input.aliBottom:hover { background-position: -336px -18px; }
		input.aliBottom.ac { background-position: -336px -36px; }

		#usercolour { background-color: #000000; }

		
	.text_tool textarea {
		width: 241px;
		height: 62px;
		border: 1px solid #bebebe;
		background-color: #eee;
		margin: 5px 0;
		font-size: 1.2em;
		font-family: "Tahoma", "Arial", sans-serif;
		}
		
	.text_tool .submit, .bg_colors .submit {
		display: block; 
		width: 77px;
		height: 23px;
		background: url(/i/button.png) no-repeat 0 0;
		border: 0;
		line-height: 23px;
		padding-bottom: 2px;
		font-size: 11px;
		font-family: "Tahoma", "Arial", sans-serif;
		}
		
	.text_tool .line {
		width: 100%;
		clear: both;
		height: 36px;
	}
	
	.fg_colors {
		position: absolute;
		top: 16px;
		left: 657px;
		width: 82px;
		background: #ffffff;
		padding: 1px;
		border: 1px solid #aaaaaa;
		display: none;
	}

	.fg_colors .fg_color {
		width: 10px;
		height: 10px;
		border: 1px solid black;
		margin-bottom: -1px;
		margin-right: -1px;
		float: left;
	}
	.fg_colors #fg_colour_select_box {
		float: left;
	}
	.fg_colors input.fg_col_sel_input {
		width: 54px;
		height: 13px;
		border: 1px solid black;
		font-size: 12px;
		margin: 2px 1px 1px 0px;
		float: left;
	}
	.fg_colors button#changeColor {
		float: left;
		height: 19px;
		width: 79px;
		font-size: 10px;
	}
	.fg_colors input#foreground-more-show {
		float: left;
		width: 22px;
		height: 19px;
		margin: 1px 0px 0px 0px;
		font-size: 10px;
	}
	.fg_colors input#foreground-more-hide {
		display: none;
		width: 22px;
		height: 19px;
		margin: 1px 0px 0px 0px;
		font-size: 10px;
	}
	.bg_colors {
		width: 163px;
		border-width: 1px;
	}
	
	.bg_colors .header .title { background-image: url(/i/ico_bg.png); }
	
	.pallete { 
		padding-left: 1px;
		padding-top: 1px;
		position: relative;
		overflow: hidden;
		}
	
	.pallete a, .bg_colors .selected a, .bg_colors .selected span {
		display: block;
		float: left;
		width: 10px;
		height: 10px;
		border: 1px solid #000;
		margin-left: -1px;
		margin-top: -1px;
		text-indent: -1000em;
		outline: 0;
		}
		
	.bg_colors .selected {
		clear: both; 
		font-size: 1.2em;
		}
		
	.bg_colors .selected span {
		margin-right: 10px;
		}
		
	.main {
		width: 980px !important;
		background-color: #fff;
		position: relative;
		overflow: hidden;
		border: 1px solid #bcbcbc;
		margin: 0px auto;
	}
	
	.area {
		width: 810px;
		float: left;
	}
	
	.area .tabs {
		position: relative;
		overflow: hidden;
		margin-bottom: 10px;
	}
	
	.area .tabs li {
		display: block;
		float: left;
		width: 135px;
		height: 35px;
		position: relative;
		overflow: hidden;
	}
		
	.area .tabs li.last a {
		border-right: 0;
		width: 135px;
	}
		
	.area .tabs li a {
		display: block;
		border: 1px solid #bcbcbc;
		border-width: 0 1px 1px 0;
		width: 134px;
		height: 34px;
		font-size: 1.1em;
		line-height: 34px;
		text-align: center;
		background: url(/i/bg_tab_big.png) repeat-x  0 0;
		color: #3f3f3f;
		outline: 0;
	}
			
	.area .tabs li a:hover, .area .tabs li a.ac {
		background-image: none;
		background-color: #f3f3f3;
		font-weight: bold;
		border-bottom-color: #f3f3f3;
	}
				
	.area .padding {
		margin: 0 10px 10px;
	}
		
		.area .padding .small_tabs {
			position: realtive;
			overflow: hidden;
			padding-left: 1px;
			height: 18px;
			}
			
			.area .padding .small_tabs li {
				float: left;
				width: 83px;
				height: 18px;
				margin-left: -1px;
				}
				
				.area .padding .small_tabs li a {
					display: block;
					width: 83px;
					height: 18px;
					background: url(/i/tab_small.png) no-repeat -83px 0;
					color: #3F3F3F;
					line-height: 18px;
					text-align: center;
					outline: 0;
					}
					
					.area .padding .small_tabs li a:hover,
					.area .padding .small_tabs li a.ac {
						background-position: 0 0;
						font-weight: bold;
						}
					
.draw_area {
	border: 1px solid #bcbcbc;
	width: 787px;
	height: 500px;
	position: relative;
	overflow: scroll;
	}
	
.layers_box {
	width: 167px;
	float: right; 
	border-left: 1px solid #bcbcbc;
	border-bottom: 1px solid #bcbcbc;
	height: 100%;
	background-color: #cfcfcf;
	}
	
.layers_box .header .titleLayers { background-image: url(/i/ico_layers.png); }
.layers_box .header .titleAlign { background-image: url(/i/ico_align.png); }
.layers_box .header .titleAdjust { background-image: url(/i/ico_adjust.png); }

div.divAlign {
	display: none;
	height: 20px;
	clear: both;
	background: #ffffff;
	padding: 8px 0px 8px 16px;
	border-bottom: 1px solid #bcbcbc;
}

input.aliTop {
	margin-left: 4px;
}

.layers_box .tip {
	display: block;
	padding: 10px;
	font-size: 1.2em;
	line-height: 1.4;
	background-color: #fffebc;
	border-bottom: 1px solid #BCBCBC;
	margin-bottom: -1px;
	}
	
.layers_list li {
	display: block;
	background-color: #dedede;
	border-top: 1px solid #cfcfcf;
	height: 40px;
	font-size: 1.2em;
	position: relative;
	cursor: default;
	}

.layers_list li.ac {
	background-color: #efefef;
	}
.layers_list li.over {
	background-color: #ffffbc;
	}
	
	.layers_list li div {
		display: block;
		float: left; 
		position: absolute;
		line-height: 38px;
		}
		
		.layers_list li .ico-image {
			text-indent: -1000em;
			width: 29px;
			height: 29px;
			background: url(/i/ico_image.png) no-repeat 0 0;
			left: 10px;
			top: 6px;
			}
		
		.layers_list li .ico-image span {
			display: block;
			margin-left: 4px;
			margin-top: 5px;
			width: 25px;
			height: 25px;	
			background: no-repeat 0 0;
			}
		
		.layers_list li .name {
			height: 40px;
			left: 45px;
			}
		
		.layers_list li .close {
			text-indent: -1000em;
			width: 22px;
			height: 22px;
			background: url(/i/ico_del.png) no-repeat 0 0;
			top: 10px;
			right: 10px;
			}
		.layers_list li .close a {
			display: block;
			width: 22px;
			height: 22px;
		}
	
.brightness {
	width: 154px;
	height: 39px;
	background: url(/i/box_brightness.png) no-repeat 0 0;
	margin: 10px auto;
	}
	
	.brightness .slider {
		width: 120px;
		height: 17px;
		display: block;
		position: relative;
		top: 20px;
		margin: 0 auto;
		border: 0;
		background: none; 
		}
		
		.brightness .slider a {
			display: block;
			width: 10px;
			height: 17px;
			background: url(/i/slider_trigger.png) no-repeat 0 0;
			border: 0;
			margin-left: 0;
			top: 0px;
			cursor: pointer;
			}

	.alphaslider .slider {
		width: 120px;
		height: 20px;
		display: block;
		position: relative;
		background: red;
	}
		
	.alphaslider .slider-handle {
		display: block;
		width: 10px;
		height: 20px;
		background: blue;
		position: absolute;
		left: 0px;
		top: 0px;
		cursor: pointer;
	}

	.slidebox {
		display: none;
		float: left;
		width: 167px;
		padding-top: 10px;
	}
	.slidebox .text {
		padding-left: 8px;
		font-weight: bold;
	}
	.slidebox .slider {
		margin: 10px;
		margin-top: 5px;
		margin-left: 15px;
	}
#menutip {
	background-color: #fff;
	border: 1px solid #BCBCBC;
	padding: 6px;
	font-size: 12px;
	display: none;
	position: absolute;
	width: 180px;
	z-index: 20;
	line-height: 1.2;
}

/* Background Overwrite */
div#background-overwrite {
	float: left;
	width: 100px;
	clear: right;
	padding: 0px 0px 3px 10px;
}
div#background-overwrite span#selected-color-view {
	display: block;
	float: left;
	width: 18px;
	height: 18px;
	border: 1px solid #808080;
}
div#background-overwrite input#selected-color {
	float: left;
	width: 70px;
	height: 14px;
	line-height: 14px;
	font-family: "Tahoma", "Arial", sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding: 4px 0px 2px 5px;
	margin: 0px 0px 0px 0px;
	border: 0px none black;
}
div#bg-colors {
	margin-bottom: 3px;
}
div#text-edit {
	float: left;
	width: 300px;
	display: none;
}
div#text-edit input#text-edit-do {
	float: left;
	clear: both;
}
#background-more {
	/*float: left;*/
	/*clear: left;*/
	padding-left: 10px;
}
#background-more-hide {
	display: none;
}
a#background-enter-hex {
	display: block;
	float: left;
	width: auto;
	height: 16px;
	line-height: 16px;
	background: none;
	font-size: 11px;
	font-weight: bold;
	text-indent: 0px;
	border: 0px solid black;
	color: #2217B3;
	padding-left: 3px;
	padding-right: 3px;
}
#background-enter-hex:hover {
	color: #000000;
}
#background-more-show {
	width: 120px;
	height: 23px;
	background: url('/i/button_wide.png') no-repeat 0 0;
}
#background-more-enter {
	width: 120px;
	height: 23px;
	margin-top: 2px;
	background: url('/i/button_wide.png') no-repeat 0 0;
}
#background-hex {
	float: left;
	/*clear: both;*/
	padding-left: 10px;
	padding-top: 5px;
	display: none;
}
#background-hex div {
	float: left;
	clear: both;
}
#background-hex div#background-hex-header {
	font-size: 11px;
	font-weight: bold;
	padding-bottom: 3px;
}
#background-hex input#entered-hex {
	width: 110px;
	padding-left: 3px;
	padding-right: 3px;
}
div#background-hex-action {
	width: 150px;
}
#background-hex div#background-hex-action {
	padding-top: 3px;
}
#background-hex div#background-hex-action div {
	clear: none;
}
a.cancel {
	float: left;
	color: #3366FF;
	padding-left: 8px;
	line-height: 23px;
	font-weight: bold;
}

/* Advanced Font Features */
div#font-list {
	display: none;
	float: left;
	position: absolute;
	padding-top: 3px;
	padding-bottom: 3px;
	border-left: 3px solid #666;
	background-color: #000;
	filter:alpha(opacity=60); /* IE */
	opacity: 0.6; /* CSS3 standard */
	z-index: 6000; /* overlay */
}
div#font-list a {
	display: block;
	float: left;
	clear: both;
	color: #fff;
	font-weight: bold;
	line-height: 14px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 7px;
	padding-right: 13px;
	width: 120px;
}
div#font-list a:hover, div#font-list a.highlight {
	color: #000;
	background-color: #f5ce0f;
}

/* Cookie */
.cdc-box {
    display:none;
    width:610px;
    padding:35px 40px;
    margin-left:-345px;
    background:rgba(255,255,255,0.9);
    border-radius:4px;
    position:fixed;
    bottom:20px;
    left:50%;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.40);
    z-index:5000;
}
.cdc-in {
    position:relative;
}
.cdc-close-x {
    display:block;
    width:20px;
    height:20px;
    background:url("/i/cookie/cdc-close-x.png") bottom center no-repeat;
    position:absolute;
    right:-32px;
    top:-30px;
    border-top-right-radius:4px;
    border-top-left-radius:4px;
}
.cdc-text {
    width:430px;
    float:left;
    line-height:18px;
}
.cdc-buttons {
    width:120px;
    padding:15px 0 0 60px;
    float:right;
}
.cdc-button {
    display:block;
    width:120px;
    border-radius:3px;
    color:#fff;
    font-size:11px;
    text-align:center;
    text-decoration:none;
    height:24px;
    line-height:24px;
}
.cdc-button.cdc-more-button {
    margin-bottom:6px;
    border:1px solid #336bd1;
    border-top-color:#6699ea;
    border-left-color:#6699ea;
    text-shadow:1px 1px 1px #1d4ec2;
    background:#4483e5;
    
}
.cdc-button.cdc-more-button:hover {
    background:#3d74cb;
}
.cdc-button.cdc-close-button {
    border:1px solid #bdbdbd;
    border-top-color:#e7e7e7;
    border-left-color:#e7e7e7;
    text-shadow:1px 1px 1px #a3a3a3;
    background:#dadada;
}
.cdc-button.cdc-close-button:hover {
    background:#c8c8c8;
}
.cdc-first-line {
    padding-bottom:10px;
    font-weight:bold;
    color:#3f79d4;
    line-height:18px;
}
.cdc-second-line {
    color:#2c4d70;
    line-height:18px;
}

.cdc-clearfix:before, .cdc-clearfix:after { content:""; display:table; }
.cdc-clearfix:after { clear:both; }