/*-------------------------------
|
|	COMMON
|
*/

* {
margin: 0;
padding: 0;
}

body {
background: #fcb708 url(../imgs/style/bg.gif) repeat-x top left;
font-family: arial;
height: 100%;	/*IE fix for popup background wrapper*/
text-align: center;
}

h1 {
display: none;
}


/*-------------------------------
|
|	MAIN TEMPLATE
|
*/

#wrapper {
margin: 0 auto;
padding-top: 64px;
position: relative;
width: 782px;
}

a#language:link,
a#language:visited,
a#language:active {
color: #fcf0d1;
font-size: 12px;
position: absolute;
right: 24px;
text-decoration: none;
top: 50px;
}
a#language:hover {
text-decoration: underline;
}

#content {
background: url(../imgs/style/content-bg.gif) repeat-y;
height: 460px;
position: relative;
width: 100%;
}
#header {
background: url(../imgs/style/header.gif) no-repeat 0 0;
height: 180px;
position: relative;
width: 100%;
}
		#header #intro {
		height: 50px;
		position: absolute;
		left: 236px;
		top: 34px;
		width: 512px;
		}		
		#header #intro .quote {
		background: url(../imgs/style/quotes.gif) no-repeat 0 0;
		height: 18px;
		position: absolute;
		bottom: 0;
		width: 24px;
		}
		#header #intro .quote#first-quote {
		left: 0;
		top: 0;
		}
		#header #intro .quote#end-quote {
		background-position: -24px 0;
		bottom: 0;
		right: 0;
		}
		#header #intro h2 {
		color: #c2c2c2;
		font-size: 17px;
		position: absolute;
		text-align: right;
		top: 4px;
		left: 22px;
		width: 460px;
		}
		#header #steps-intro {
		color: #7aad10;
		font-size: 20px;		
		position: absolute;
		left: 29px;
		bottom: 1px;
		}
		#header #add-fav {
		position: absolute;
		right: 32px;
		bottom: 3px;
		width: 120px;
		height: 16px; 
		}
			#add-fav a {
			background: url(../imgs/style/favs.gif) no-repeat 0 0;
			display: block;
			float: right;
			font-size: 1px; /*IE6 fix*/
			height: 16px;
			margin-left: 7px;
			width: 16px;
			}
			#add-fav a#fav2 {
			background-position: -16px 0;
			}
			#add-fav a#fav3 {
			background-position: -32px 0;
			}
			#add-fav a#fav4 {
			background-position: -48px 0;
			}
			#add-fav a#fav5 {
			background-position: -64px 0;
			}

#main-section {
background: url(../imgs/style/main-section.png) repeat-x 0 -456px;
height: 228px;
position: relative;
margin-bottom: 10px;
width: 100%;
}
		#main-section-le {
		background: url(../imgs/style/main-section.png) no-repeat 0 0;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 17px;
		}
		#main-section-ri {
		background: url(../imgs/style/main-section.png) no-repeat 0 -228px;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		width: 17px;
		}		
		
		div.step-num {
		background: url(../imgs/style/step-num.gif) no-repeat 0 0;
		height: 30px;
		top: 27px;
		position: absolute;		
		}
		div.step-num#num1 {		
		width: 15px;		
		left: 44px;
		}
		div.step-num#num2 {		
		background-position: -21px 0;
		width: 21px;		
		left: 282px;
		}
		div.step-num#num3 {		
		background-position: -48px 0;
		width: 22px;		
		left: 518px;
		}
		
		div.step {
		background: url(../imgs/style/step.gif) no-repeat top right;
		height: 193px;
		width: 171px;
		position: relative;
		}
				div.step .blocked {
				width:	171px;
				height: 193px;
				position: absolute; 
				top: 0;
				left: 0;
				}
				div.step div.title {
				background: url(../imgs/style/step-title-bg.gif) repeat-x top left;
				color: #fff;
				font-size: 21px;
				height: 24px;
				letter-spacing: 2px;
				margin: 12px auto 0;
				width: 167px;
				}
				div.step div.body {
				position: relative;
				height: 150px;
				}
						div.step div.body span.section {
						color: #9a9a9a;
						cursor: default;
						font-size: 14px;
						font-weight: bold;
						}
		
						
		#step1 {
		position: absolute;
		left: 70px;
		top: 15px;
		}
				#step1 #step1-opt1 {
				height: 70px;
				width: 100%;
				}
				#step1 #new-draw {
				background: url(../imgs/style/new-draw.gif) no-repeat right top;
				height: 54px;
				position: absolute;
				left: 20px;
				text-align: left;
				top: 6px;
				width: 132px;
				}
						#step1 #new-draw.active {
						background: url(../imgs/style/new-draw.gif) no-repeat right bottom;
						}
				#step1 #step-separator {
				background: url(../imgs/style/step-separator-dashed.gif) repeat-x; 
				font-size: 1px; /*fix for ie6*/
				height: 3px;
				}
				#step1 #step1-opt2 {
				position: relative;
				height: 80px;
				}
						#step1 #step1-opt2 span.section {						
						position: absolute;
						left: 18px;
						top: 7px;
						}
						#step1 #step1-opt2 #uploadfile-wrapper {						
						background: url(../imgs/style/step-search-btn.gif) no-repeat top left;
						position: relative;
						width: 62px;
						height: 41px;
						overflow: hidden;
						}
						#step1 #step1-opt2 #uploadfile-wrapper.active {
						background: url(../imgs/style/step-search-btn.gif) no-repeat bottom left;
						}
						#step1 #step1-opt2 #uploadfile-wrapper input#uploadfile {
						position: absolute;
						top: 0;
						right: 0px;
						-moz-opacity: 0;
						filter: alpha(opacity: 0);
						opacity: 0;
						text-align: right;
						height: 34px;
						}
				#step1 #upload-search {				
				position: absolute;
				left: 19px;
				top: 26px
				}		
				#step1 #upload-send {
				background: url(../imgs/style/step-upload-btn.gif) no-repeat top left;
				width: 62px;
				height: 41px;
				position: absolute;
				left: 101px;
				top: 26px;
				}
				#step1 #upload-send.active {
				background: url(../imgs/style/step-upload-btn.gif) no-repeat bottom left;
				}				
				#step1 #upload-send div,
				#step1 #upload-search {
				color: #9a9a9a;
				font-size: 10px;				
				}
				#step1 #upload-search #upload-text {
				position: relative;
				bottom: 2px;
				}
				#step1 #upload-send div {
				position: relative;
				top: 39px;
				left: -2px;
				}
				
		
		#step2 {
		position: absolute;
		left: 308px;
		top: 15px;
		}
				#step2 #step-preview {
				background: url(../imgs/style/step-preview.gif) no-repeat top left;
				height: 49px;
				position: absolute;
				top: 27px;
				left: 12px;
				width: 147px;
				text-align: left;
				}
				#step2 #step-preview-icon {
				top: 17px;
				left: 69px;
				position: relative;
				width: 16px;
				height: 16px;
				}
						#step2 #step-preview-icon img {
						position: absolute;
						top: 0;
						left: 0;
						}
						#step2 #step-preview-icon table {
						position: absolute;
						top: 0;
						left: 0;
						width: 16px;
						height: 16px;
						}
						#step2 #step-preview-icon table td {
						height: 1px;
						width: 1px;
						}
				#step2 span.section {
				position: absolute;
				left: 10px;
				top: 103px;
				}
		
				
				
		#step3 {
		position: absolute;
		left: 545px;
		top: 15px;
		}
				#step3 #download {
				background: url(../imgs/style/step-download.gif) no-repeat 0 0;
				height: 119px;
				position: absolute;
				left: 19px;
				top: 20px;
				width: 132px;
				}
				#step3 #download.active {
				background: url(../imgs/style/step-download.gif) no-repeat 0 -119px;
				}
		

				
		#upload-indcator {
		background: url(../imgs/style/upload-indicator.gif) no-repeat 0 0;
		bottom: 32px;
		height: 32px;		
		left: 32px;
		position: absolute;			
		width: 32px;		  
		}
		
		
		
#secundary-section {
background: blue;
position: relative;
width: 100%;
}		
		#ad-h {
		position: absolute;
		left: 30px;
		top: 0;
		height: 15px;
		width: 468px;
		}
		#instructions {
		background: #fff url(../imgs/style/info-bg.gif) no-repeat 0 0;
		color: #9a9a9a;
		height: 180px;
		padding: 15px 0 5px 12px;
		position: absolute;
		left: 30px;
		text-align: left;
		top: 20px;
		width: 454px;		
		}
				#instructions span {				
				font-size: 16px;		
				font-weight: bold;						
				}
				#instructions p {
				font-size: 11px;
				margin-top: 12px;
				}
				#instructions ol {
				margin-top: 10px;
				padding-left: 30px;
				}
						#instructions li {
						font-size: 11px;
						}
		
		#ad {
		height: 60px;
		position: absolute;
		right: 30px;
		top: 0;
		}
		
		#icons {
		border: 1px solid #f2f2f2;
		height: 127px;
		position: absolute;
		right: 30px;
		top: 70px;
		width: 232px;
		}				
				#icons a:link,
				#icons a:visited,				
				#icons a:active {
				border: 1px solid #f2f2f2;
				float: left;
				padding: 1px;
				margin: 1px 0 0 1px;				
				width: 16px;
				height: 16px;
				}				
				#icons a:hover {
				border: 1px solid #cc0000;
				}
						#icons a img {
						border: 0;
						}
						
#copyright {
bottom: 0;
color: #d69c07;
font-size: 10px;
position: absolute;
right: 30px; 
}

#footer {
background: url(../imgs/style/header-footer.gif) no-repeat bottom left;
height: 193px;
height: 75px;
}

/* Warning */
#warning, #warning-wrapper {
height: 255px;
width: 510px;
}
#warning {
background: #fff url(../imgs/style/prompt.gif) repeat-x 0 -343px;
display: none;
position: relative;
margin: 0 auto;
}
		#warning span {
		color: #fff;
		font-size: 24px;
		position: absolute;
		left: 18px;
		top: 18px;
		}
		#warning p {
		color: #9a9a9a;
		font-family: verdana, arial;
		font-size: 14px;
		font-weight: bold;
		position: absolute;
		top: 80px;
		left: 25px;
		text-align: left;
		width: 460px;
		}
		#warning input.btn-std {
		background: #fff url(../imgs/style/prompt.gif) repeat-x 0 -598px;
		border: 1px solid #d1d1d1;
		color: #9a9a9a;
		font-family: verdana;
		font-size: 14px;
		font-weight: bold;
		height: 27px;
		width: 100px;
		}
		#warning input#accept-warning {
		bottom: 13px;
		left: 210px;
		position: absolute;
		}

/*Warning wrapper for popup*/
#bg-warning {
background-color: #000;
cursor: wait;
}
#warning-wrapper {
left: 50%;
top: 30%;
margin-left:-255px; /* half the width, to center*/
}
/*!Main template*/




/*-------------------------------
|
|	GRID-PAINTER
|
*/

#grid-painter, #grid-painter-wrapper {
height: 343px;
width: 510px;
}
#grid-painter {
background: #fff url(../imgs/style/prompt.gif) repeat-x 0 0;
display: none;
position: relative;
margin: 0 auto;
}
		#grid-painter span.title {
		color: #fff;
		font-size: 24px;		
		left:  18px;
		position: absolute;
		top: 18px;
		}
		#grid-painter input.btn-std {
		background: url(../imgs/style/grid.gif) repeat-x 0 -598px;
		border: 1px solid #d1d1d1;
		color: #9a9a9a;
		cursor: pointer;
		font-family: verdana;
		font-size: 14px;
		font-weight: bold;
		height: 27px;
		width: 100px;
		}
		#grid-painter input#cancel {
		bottom: 13px;
		left: 15px;
		position: absolute;
		}
		#grid-painter input#accept {
		bottom: 13px;		
		position: absolute;
		right: 15px;
		}
		#grid-painter #x-cancel {
		border: 1px solid #fff;		
		cursor: pointer;
		height: 22px;
		position: absolute;
		right: 8px;
		text-align: center;				
		top: 19px;		
		width: 24px;
		}
		#grid-painter #x-cancel div {
		color: #fff;
		cursor: pointer;
		font-family: verdana;
		font-size: 16px;
		font-weight: bold;
		margin-top: 2px;
		}
/*grid*/
#grid {
background: url(../imgs/style/grid-transparency.gif);
border-collapse: collapse;
left: 16px;
position: absolute;
top: 68px;
}
		#grid td {
		border: 1px solid #dbdbdb;
		height: 13px;
		width: 12px;
		}

#grid-menu {
height: 213px;
left: 232px;
position: absolute;
top: 67px;
width: 22px;
}
		/*preview*/
		#grid-menu #preview-wrapper {
		border: 1px solid #bfbfbf;
		height: 20px;
		width: 20px;
		}
		#grid-menu #preview {
		height: 16px;
		left: 2px;
		position: relative;
		top: 2px;
		width: 16px;
		}
		#grid-menu #preview-grid {
		left: 0;
		position: absolute;
		top: 0;		
		}
		#grid-menu #preview-grid td {
		height: 1px;
		width: 1px;
		}
#grid-tools {
bottom: 0;
position: absolute;
left: 0;
}
		#grid-tools div {
		margin-bottom: 4px;
		}
		/*grid-tools*/
		#grid-tools #colour {
		border: 1px solid #bbbbbb;
		width: 22px;
		}
		#grid-tools #erase{
		background: url(../imgs/style/grid-tools.gif) no-repeat 0 -40px;
		font-size: 1px; /*IE6 fix*/
		height: 20px;		
		width: 22px;
		}
				#grid-tools #erase.active {
				background-position: 0 -60px;
				}
		#grid-tools #brush{
		background: url(../imgs/style/grid-tools.gif) no-repeat 0 0;
		font-size: 1px; /*IE6 fix*/
		height: 20px;
		width: 22px;
		}
				#grid-tools #brush.active {
				background-position: 0 -20px;
				}
		#grid-tools #restore{
		background: url(../imgs/style/grid-tools.gif) no-repeat 0 -120px;
		font-size: 1px; /*IE6 fix*/
		height: 20px;		
		width: 22px;
		}
				#grid-tools #restore.active {
				background-position: 0 -140px;
				}
		#grid-tools #pick{
		background: url(../imgs/style/grid-tools.gif) no-repeat 0 -80px;
		height: 20px;
		font-size: 1px; /*IE6 fix*/
		width: 22px;
		}
				#grid-tools #pick.active {
				background-position: 0 -100px;
				}
		#grid-tools #previewpicker{
		width: 22px;
		height: 22px;
		}

/*Grid wrapper for popup*/
#bg-grid-painter {
  background-color:#000;
  cursor:wait;
}
#grid-painter-wrapper {
  left: 50%;
  top: 20%;
  margin-left:-255px; /* half the width, to center*/
}


/* farbtastic color picker */
#gridpicker {
height: 195px;
position: absolute;
right: 24px;
top: 75px;
width: 195px;
}

.farbtastic {
position: relative;
}
		.farbtastic * {
		position: absolute;
		cursor: crosshair;
		}
		.farbtastic, .farbtastic .wheel {
		position: relative;
		width: 195px;
		height: 195px;
		}
		.farbtastic .color, .farbtastic .overlay {
		top: 47px;
		left: 47px;
		width: 101px;
		height: 101px;
		}
		.farbtastic .wheel {
		background: url(../imgs/picker/wheel.png) no-repeat;
		width: 195px;
		height: 195px;
		}
		.farbtastic .overlay {
		background: url(../imgs/picker/mask.png) no-repeat;
		}
		.farbtastic .marker {
		width: 17px;
		height: 17px;
		margin: -8px 0 0 -8px;
		overflow: hidden; 
		background: url(../imgs/picker/marker.png) no-repeat;
		}
		

		
/*-------------------------------
|
|	PAGE ERROR
|
*/
		
#header-error {
background: url(../imgs/style/header-footer.gif) no-repeat top left;
height: 5px;
font-size: 1px;	/*IE6 fix*/
margin-top: 100px;
}
#content-error {
background: url(../imgs/style/content-bg.gif) repeat-y;
height: 314px;
position: relative;
text-align: left;
width: 100%;
}
		#content-error * {
		margin: 0 70px; 
		position: absolute;
		}
		#content-error h1 {
		color: #cc0000;
		display: block;
		font-size: 24px;
		top: 44px;
		}
		#content-error p {
		color: #bfc0c0;
		font-size: 16px;
		font-weight: bold;
		top: 104px;
		}
		#content-error a {
		color: #7eb212;
		font-size: 12px;
		top: 212px;
		}
		#content-error #copyright {
		margin: 0; 
		}

#footer-error {
background: url(../imgs/style/header-footer.gif) no-repeat bottom left;
height: 75px;
}