/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

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

/* EDITOR */
.dialog {
	display: none;
}

#elements {
	display: none;
}

.innerpage_footer {
	margin-top:20px;
}

#inline3 li {
	cursor: pointer;
	opacity: .5;
}

#inline3 li:hover {
	opacity: 1;
}

.step2_icons li {
	cursor: pointer;
}

.step2_options {
	position: absolute;
	left: 565px;
	top: 180px;
	font-size: 12px;
	font-weight: 700;
}

.option_list {
	margin-top: 5px;
}

.prop_vals {
	display: none;
}

.step2_card_name, .step2_cloud_folder {
	margin-left: 10px;
	display: inline-block;
}

.step2_card_name strong, .step2_cloud_folder strong {
	font-weight: 700;
}

.step2_card_name input, .step2_cloud_folder input {
	font-size: 15px;
	margin: 10px 0 0 10px;
	width: 300px;
}

.step2_options .option_value, .step2_options .option {
	display: inline-block;
}

.step2_options .option {
	width: 80px;
}

.step2_options .option_value {
	width: 35px;
}

.step2_options .option_value input {
	text-align: center;
	width: 28px;
	font-size: 12px;
}

.step2_options .grid_size {
	display: none;
}

.step2_shapes .card_select {
	cursor: pointer;
}

.step2_shapes li.card_selected img {
	box-shadow: 0 0 8px #22acec;
}

.step3_content .connector_bg {
	position: absolute;
	top: 0;
	left: 0;
	opacity: .2;
}

.step4_content li {
	padding: 0 0 5px 0;
}

.step4_content div.form_errors {
	display: none;
	color: red;
	font-style: italic;
}

#edit_box {
	overflow: hidden;
	position: relative;
	height: 346px;
	width: 526px;
}

#edit_box .bgimg {
	width: 526px;
	position: absolute;
	z-index: 400;
}

#edit_box .bg_clear {
	width: 526px;
	position: absolute;
	opacity: .3;
	z-index: 500;
}

#edit_box .bgimg img {
	width: 100%;
}

#edit_box #tool_bar {
	position: absolute;
	height: 30px;
	top: -30px;
	left:0;
}

#edit_box #tool_bar .font_icon img {
	vertical-align: middle;
}

#edit_box .elem_area_holder {
	position: absolute;
	display: inline-block;
}

#edit_box .shape_elem .square {
	background-color: rgb(0, 0, 0);
	width: calc(100% - 2px);
	height: calc(100% - 2px)
}

#edit_box .shape_elem .circle {
	background-color: rgb(0, 0, 0);
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	border-radius: 100px / 100px;
}

#edit_box .shape_elem .line_horiz, #edit_box .shape_elem .line_vert {
	background-color: rgb(0, 0, 0);
	width: 100%;
	height: 100%;
}

#edit_box .elem_area_holder .content_area {
	width: 100%;
	height: 100%;
	font-size: 14px;
	font-family: Arial;
	border: 1px solid transparent;
}

#edit_box .elem_area_holder .content_area img, #edit_box .elem_area_holder .content_area .image_value, #edit_box .elem_area_holder .content_area .text_value, #edit_box .elem_area_holder .content_area .shape_value {
	width: 100%;
	height: 100%;
}

#edit_box .elem_area_holder .content_area.selected {
	border: 1px dashed #aaa;
	cursor: move;
}

.ui-resizable-handle {
	display: none;
	background-color: #fff;
	border: 1px solid #000;
}

.rotate_0 {
	-webkit-transform: rotate(0deg);  /* Chrome, Safari 3.1+ */
	-moz-transform: rotate(0deg);  /* Firefox 3.5-15 */
	-ms-transform: rotate(0deg);  /* IE 9 */
	-o-transform: rotate(0deg);  /* Opera 10.50-12.00 */
	transform: rotate(0deg);
}

.rotate_90 {
	-webkit-transform: rotate(90deg);  /* Chrome, Safari 3.1+ */
	-moz-transform: rotate(90deg);  /* Firefox 3.5-15 */
	-ms-transform: rotate(90deg);  /* IE 9 */
	-o-transform: rotate(90deg);  /* Opera 10.50-12.00 */
	transform: rotate(90deg);
}

.rotate_180 {
	-webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
	-moz-transform: rotate(180deg);  /* Firefox 3.5-15 */
	-ms-transform: rotate(180deg);  /* IE 9 */
	-o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
	transform: rotate(180deg);
}

.rotate_270 {
	-webkit-transform: rotate(270deg);  /* Chrome, Safari 3.1+ */
	-moz-transform: rotate(270deg);  /* Firefox 3.5-15 */
	-ms-transform: rotate(270deg);  /* IE 9 */
	-o-transform: rotate(270deg);  /* Opera 10.50-12.00 */
	transform: rotate(270deg);
}

/* TOOL BARS */

.elem_tools {
	position: relative;
	width: 526px;
	height:79px;
	background-color: #fff;
}

.tool_options {
	display: none;
	position: absolute;
	background: #fff;
}

.icons {
	display: none;
}

.sp-replacer {
	display: none;
}

.elem_tools .tool_items {
	height: 30px;
	display: inline-block;
}

.elem_tools .tool_items .font_icon,
#edit_box #tool_bar .font_icon {
	height: 28px;
	width: 28px;
	background-color: #fff;
	border: 1px outset #ddd;
	display: inline-block;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 14px;
}

.elem_tools .tool_items .icon_divider {
	display: inline-block;
	height: 24px;
	line-height: 24px;
	width: 1px;
	background-color: #999;
	margin: 0 2px;
	vertical-align: middle;
}

.elem_tools .tool_items .font_icon:active {
	border: 1px inset #ddd;
}

.elem_tools .tool_items .font_icon:hover {
	background-color: #eee;
}

.elem_tools .tool_items .font_icon.change_color {width: 55px;}
.elem_tools .tool_items .font_icon.size {width: 50px; border-radius: 10px;}
.elem_tools .tool_items .font_icon.family {width: auto; border-radius: 10px;}
.elem_tools .tool_items .font_icon .selected_font_family {padding: 0 5px;}
.font_size_options,
.font_family_options,
.arrange_options,
.line_thickness_options {display: none; overflow-y: auto;}

.font_family_options {height: 250px;top:-250px;}

.font_family_options .font_family {
	height: 28px;
	padding: 0 3px;
	border: 1px outset #ddd;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 14px;
}

.font_size_options .font_size,
.line_thickness_options .thickness {
	height: 28px;
	padding: 0 3px;
	border: 1px outset #ddd;
	display: inline-block;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 14px;
}

.font_size_options {
	width: 500px;
	height: 170px;
	top: -190px;
	padding: 10px;
}

.font_size_options .font_size {
	width: 28px;
	margin: 2px;
}

.font_family_options .font_family {
	padding: 0 5px;
}

.line_thickness_options, .arrange_options {
	width: 500px;
	height: 30px;
	top: -50px;
	padding: 10px;
}

.arrange_options .arrangement {
	height: 28px;
	width: 100px;
	border: 1px outset #ddd;
	display: inline-block;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	border-radius: 3px;
	vertical-align: middle;
	font-size: 14px;
}

.elem_tools .tool_items .font_icon.bold {font-weight: 700;}
.elem_tools .tool_items .font_icon.italic {font-style: italic;}
.elem_tools .tool_items .font_icon.underline {text-decoration: underline;}
.elem_tools .tool_items .font_icon img {vertical-align: middle; margin-bottom: 3px;}

.elem_tools .tool_items .tool_font_family {
	height: 30px;
}

.elem_tools .tool_text_edit textarea {
	margin-top: 4px;
	padding: 5px;
	height: 10px;
	width: 500px;
	font-size: 14px;
	border-radius: 5px;
	overflow: hidden;
}

.new_image {
	display: none;
	position: relative;
	border:1px dashed #202242;
	text-align: center;
	width: 526px;
	height: 76px;
}

.new_image p {
	margin-top: 30px;
	font-size: 14px;
}

.new_image input {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:block!important;
	width: 526px;
	height: 76px;
	opacity:0!important;
	overflow:hidden!important;
	cursor:pointer;
}

/* REGISTRATION / LOGIN */
.link {
	display: inline-block;
	color: #5d6fb4;
	cursor: pointer;
}

.link:hover {
	color: #000;
}

.social_button {
	display: inline-block;
	width: 64px;
	height: 64px;
	cursor: pointer;
	background-size: 100% 100%;
}

.social_button.facebook {
	background-image: url("../images/social_facebook.png");
}

.social_button.twitter {
	background-image: url("../images/social_twitter.png");
}

.social_button.google_plus {
	background-image: url("../images/social_google_plus.png");
}

#forms {
	margin: 20px 0 0 20px;
}

#errors {
	color: red;
	font-weight: 700;
	margin-bottom: 10px;
}

#success {
	color: green;
	font-weight: 700;
	margin-bottom: 10px;
}

#register {
	display: none;
}

#register input {
	height: 30px;
	line-height: 30px;
}

#register select {
	background: white;
	padding: 5px;
	font-size: 16px;
	line-height: 1;
	border: 1;
	border-radius: 0;
	height: 30px;
	-webkit-appearance: none;
	color: #333;
}

#social_registration .header {
	margin: 0 0 20px 0;
}

#card_login {
	display: none;
}

#card_login p {
	margin: 20px 0 5px;
}

#card_login a {
	display: block;
	margin-top: 10px;
	color: #22acec;
	font-style: italic;
}

#card_login a:hover {
	color: #333;
}

#card_login input {
	background: white;
	padding: 5px;
	font-size: 16px;
	line-height: 1;
	border: 1;
	border-radius: 5px;
	height: 20px;
	width: 245px;
	-webkit-appearance: none;
	color: #000;
}

#card_login .login_section {
	display: inline-block;
	width: 262px;
	vertical-align: top;
	padding: 5px;
}

#card_login .login_section:first-of-type {
	border-right: 1px solid #000;
}

#card_login .login_section .social_button {
	display: inline-block;
	width: 32px;
	height: 32px;
}

.upload_file {
	position: relative;
	border: 1px dashed #202242;
	text-align: center;
	width: 100%;
	background: #ccc;
	overflow: hidden;
	padding: 40px 0;
	font-size: 20px;
	margin: 10px auto;
	color: #202242;
	cursor: pointer;
}

.upload_file input {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: block !important;
	width: 99% !important;
	height: 100px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	cursor: pointer;
}

.template_details {
	width: 550px;
	padding: 15px;
	float: left;
	background: #fff;
	display: none;
	top: 20px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.step_popup_main .title {
	padding-top: 0;
}

.step_content .title {
	padding-top: 0;
}