/* ----------------------------
	TYPOGRAPHY
---------------------------- */

body{
	background:#000 url(/nav-o-matic/images/todo.gif) 50px 200px no-repeat;
	}

#intro{
	width:570px;
	margin:120px auto 16px;
	}
#intro p{
	font-size:1.4em;
	font-style:italic;
	padding-bottom:16px;
	}

.next_tab{
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: block;
	height: 44px;
	text-indent: -9999px;
	}
.next_tab:hover{
	background-position: 0 -44px;
	}

.upload{
	display:none;
	width: 99px;
	background: url(/nav-o-matic/images/button_upload.gif) left top no-repeat;
	}
.guides{
	width: 144px;
	background: url(/nav-o-matic/images/button_guides.gif) left top no-repeat;
	}
.code{
	width: 136px;
	background: url(/nav-o-matic/images/button_code.gif) left top no-repeat;
	}

p a{
	display:inline-block;
	color:#1a1a1a;
	padding:0 2px;
	background:#e4e4e4;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	text-decoration:none;
	}
p a:hover{
	color:#FFF;
	background:#1a1a1a;
	}

span.loading{
	position:absolute;
	left:12px;
	bottom:12px;
	display:block;
	width:114px;
	height:44px;
	background:url(/nav-o-matic/images/button_loading.gif) no-repeat;
	z-index:90;
	}


/* ----------------------------
	LAYOUT
---------------------------- */

#nav-o-matic{
	position: relative;
	padding-top: 41px;
	margin:0 auto 100px;
	background: url(/nav-o-matic/images/content_background.gif) center bottom no-repeat;
	text-align:center;
	color:#000;
	}

.nav_step{
	position: relative;
	display:none;
	min-width: 544px;
	padding: 16px 16px 16px;
	margin: auto;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	background: #FFF;
	}
#step_1{
	display: inline-block;
	width: 544px;
	}

.nav_step p{
	display:block;
	margin:0 auto 16px;
	width: 544px;
	text-align: left;
	font-size: 12px;
	}

div.error{
	display: none;
	}
div.toremember p{
	display: block;
	width: 530px;
	padding: 6px;
	border: solid 1px #4f9d1a;
	background: #aede8f;
	color:#3c681f;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}
div.error p{
	display: block;
	width: 530px;
	padding: 6px;
	border: solid 1px #b12020;
	background: #e45757;
	color: #FFF;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}


/* ----------------------------
	TABS
---------------------------- */

#tabs{
	position: absolute;
	top: -16px;
	left: 50%;
	display: block;
	width: 576px;
	height: 57px;
	margin-left: -288px;
	-moz-border-radius-topleft: 16px;
	-moz-border-radius-topright: 16px;
	-webkit-border-top-left-radius: 16px;
	-webkit-border-top-right-radius: 16px;
	background: url(/nav-o-matic/images/tabs_background.gif) left top no-repeat;
	}

#tabs li{
	position: relative;
	display: block;
	float: left;
	height: 57px;
	}

#tabs li:hover,
#tabs li.disabled{
	background-image: url(/nav-o-matic/images/tabs_background.gif);
	}

#tabs li a{
	position: absolute;
	left: -3px;
	top: 0;
	display: block;
	height:57px;
	text-indent:-9999px;
	z-index: 300;
	}

#tabs li.on:hover{
	background: none;
	}
#tabs li.on a{
	background-image: url(/nav-o-matic/images/tabs.gif);
	}
#tabs li.disabled a{
	display: none;
	}

#tabs li.step_1{
	width:151px;
	-moz-border-radius-topleft: 16px;
	-webkit-border-top-left-radius: 16px;
	background-position:0 -57px;
	}
#tabs li.step_1.disabled{
	background-position:0 -114px;
	}
#tabs li.step_1 a{
	left: 0;
	width:154px;
	-moz-border-radius-topleft: 16px;
	-webkit-border-top-left-radius: 16px;
	}

#tabs li.step_2{
	width:141px;
	background-position:-151px -57px;
	}
#tabs li.step_2.disabled{
	background-position:-151px -114px;
	}
#tabs li.step_2 a{
	width:147px;
	background-position: -154px 0;
	}

#tabs li.step_3{
	width:140px;
	background-position:-292px -57px;
	}
#tabs li.step_3.disabled{
	background-position:-292px -114px;
	}
#tabs li.step_3 a{
	width:146px;
	background-position:-301px 0;
	}

#tabs li.step_4{
	width:144px;
	-moz-border-radius-topright: 16px;
	-webkit-border-top-right-radius: 16px;
	background-position:-432px -57px;
	}
#tabs li.step_4.disabled{
	background-position:-432px -114px;
	}
#tabs li.step_4 a{
	width:147px;
	-moz-border-radius-topright: 16px;
	-webkit-border-top-right-radius: 16px;
	background-position: -447px 0;
	}


/* ----------------------------
	STEP 1
---------------------------- */

#step_1{
	text-align:left;
	}

.temp_image{
	display:block;
	position:absolute;
	left:-999999px;
	}

#file_inputUploader{
	position:relative;
	margin:0 0 -4px -4px;
	z-index:100;
	}

.uploadifyQueueItem{
	position:absolute;
	left:50%;
	bottom:16px;
	width:238px;
	margin-left:-130px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	background: #efefef;
	border: solid 1px #e4e4e4;
	padding:8px 34px 8px 8px;
	}
.uploadifyQueueItem .cancel{
	display:block;
	position:absolute;
	right:8px;
	top:8px;
	}
.uploadifyQueueItem .fileName{
	font-size:12px;
	font-weight:bold;
	}
.uploadifyQueueItem .fileName em{
	font-weight:normal;
	font-style:italic;
	color:#666;
	font-size:11px;
	}

/* ----------------------------
	STEP 2
---------------------------- */

.canvas{
	display: inline-block;
	background: #efefef;
	border: solid 1px #e4e4e4;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}
#image_holder{
	position: relative;
	padding: 10px;
	margin-bottom: 16px;
	background: center center no-repeat;
	margin: auto;
	}
#guides{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	z-index: 100;
	overflow: hidden;
	}

#image_holder span{
	display: block;
	position: absolute;
	top: 0;
	width: 3px;
	height: 100%;
	background: url(/nav-o-matic/images/guide_blue.gif) 1px 0 repeat-y;
	cursor: ew-resize;
	z-index: 200;
	}
#image_holder.blue span,
div#settings ul li a.blue{
	background-image: url(/nav-o-matic/images/guide_blue.gif);
	}
#image_holder.red span,
div#settings ul li a.red{
	background-image: url(/nav-o-matic/images/guide_red.gif);
	}
#image_holder.green span,
div#settings ul li a.green{
	background-image: url(/nav-o-matic/images/guide_green.gif);
	}
#image_holder.black span,
div#settings ul li a.black{
	background-image: url(/nav-o-matic/images/guide_black.gif);
	}
#image_holder.white span,
div#settings ul li a.white{
	background-image: url(/nav-o-matic/images/guide_white.gif);
	}

div#settings{
	display:block;
	width:278px;
	padding:8px 0px 8px 8px;
	margin-top:16px;
	border: solid 1px #e4e4e4;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background: #efefef;
	font-size:12px;
	text-align:left;
	}
div#settings a{
	display:inline-block;
	padding:4px;
	border: solid 1px #e4e4e4;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-decoration:none;
	background:#FFF;
	color:#666;
	}

div#settings a#clear_guides{
	display:inline-block;
	margin-right:8px;
	}
div#settings a#clear_guides:hover{
	background:#2b2b2b;
	color:#FFF;
	}

div#settings ul{
	display:inline-block;
	}
div#settings ul li{
	display:inline-block;
	margin-right:4px;
	border: solid 1px #e4e4e4;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background:#FFF;
	}
div#settings ul li a{
	border:solid 2px #FFF;
	padding:2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	text-indent:-9999px;
	width:16px;
	}
div#settings ul li a:hover,
div#settings ul li a.on{
	border:solid 2px #2b2b2b;
	}


/* ----------------------------
	STEP 3
---------------------------- */

#step_3{
	padding-bottom:45px;
	}

#step_3 label{
	display: block;
	padding-bottom: 6px;
	font-weight: bold;
	font-size: 12px;
	text-align: left;
	}
#step_3 label em{
	display: block;
	font-weight: normal;
	font-size: 11px;
	font-style: italic;
	color: #666;
	}
#step_3 input.text{
	display: block;
	width:268px;
	font-size: 12px;
	margin-bottom: 16px;
	color: #666;
	border: solid 1px #c4c4c4;
	padding: 4px;
	}
#btn_total{
	font-weight: bold;
	}

#css_formatting{
	float:right;
	width:239px;
	}
#css_formatting input{
	position:absolute;
	left:-9999999px;
	}

#css_formatting label.image_label{
	display:block;
	padding:2px;
	margin-bottom:5px;
	border:solid 1px #c4c4c4;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	cursor:pointer;
	background:#FFF;
	}
#css_formatting label.image_label:hover,
#css_formatting label.image_label.on{
	background:#2b2b2b;
	border:solid 1px #000;
	}


/* ----------------------------
	STEP 4
---------------------------- */

#demo{
	display: inline-block;
	background: #efefef;
	padding: 10px;
	margin-bottom: 16px;
	border: solid 1px #e4e4e4;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}

#code{
	position:relative;
	width:544px;
	margin:0 auto 16px;
	overflow:auto;
	}

#code .left_col,
#code .right_col{
	float:left;
	width:267px;
	text-align:left;
	}
#code .right_col{
	float:left;
	padding-left:10px;
	}

#code label{
	display: block;
	padding-bottom: 6px;
	font-weight: bold;
	font-size: 12px;
	text-align: left;
	}
#code label em{
	display: block;
	font-weight: normal;
	font-size: 11px;
	font-style: italic;
	color: #666;
	}

#code textarea{
	width: 258px;
	height: 120px;
	font-size: 11px;
	color: #666;
	border: solid 1px #d2d2d2;
	padding: 2px;
	white-space:nowrap;
	}