@charset "utf-8";
/* CSS Document */
/* Original Author: Gharet, Joy
   Edited by Janos
   August of 2008
   Notes:
   
   Each container means that it is actually a big box
   used to place all the necessary elements in the page,
   all border (elements) are used for testing EXCEPT for the main
   container border which at all times must NOT be removed
   Codes are placed within the page they are used
   example: preview_container is used in the preview page

*/

/* CONSTANT */

#main_container	{
	position: relative;
	width: 730px;
	/*dapat ang minimum height ng page na ito ay at least 530 hindi 
	tested na sa IE5, mozilla firefox 3*/
	/*min-height: 400px;
	/*overflow: visible;*/
	/*padding: 50px;*/
	margin: 35px 35px;
	border: #00AEF0 solid 8px;
	background: #FFF url(../img/base/content_bg.gif) top repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#center_content	{
	position: relative; 
	/*border: #CCC solid 1px;  /*for testing */
	padding: 7px;
	margin: 15px 5px;
	font: Verdana, Arial, Helvetica, sans-serif 10px;
	font-size: 12px;
	text-align: center;
}

#center_content div.grey_content	{
	position: relative;
	padding: 15px 5px 15px 5px;/* iniba ko rin ito, original 'padding: 0 30px 0 15px;', ang taas kasi*/
	color: #FFF; /* iniba ko rin to ng onti, original #FFF */
	text-align: center;
	overflow: visible;
	width: 95%;
}
#main_container_bottom {
position: relative;
width: 745px;
height: 20px;
margin:-35px 0 0 36px;
background: #FFF url(../img/base/content_bottom.gif) no-repeat;
}
/*END of CONSTANT */



/* PROPERTIES OF STEP1 */
/* janos be the desperate*/
#center_content div.gray_layer1, div.gray_layer2 {
	width: 450px;	
	position: relative;
	background: #FFF;
}
#center_content #gray_box, #gray_box2	{
	position: relative;
	background: #CCC;
	color: #FFF;
	width: 450px;
	/*height:
	margin: auto auto;
	/*overflow: inherit;*/
}

#select_options {
	color: #FFF;
	font: Verdana, Arial, Helvetica, sans-serif 10px;
	font-size: 12px;
	
}

/*END OF STEP3PROPERTIES*/

/* PC UPLOAD PROPERTIES (step2) */


#center_content #layer_1 {
	position: relative;
	background: #666;
	width: 700px;
	height: 400px;
	top: 35px;
	bottom: 5px;
	left: -10px;
	/*overflow: inherit;*/	
}

#center_content #layer_1 #upload-form-left{
	float: left;
	height: 280px;
	width: 320px; 
	margin-left: 30px;
}
div.form-block {
	float: left;
	
}

#center_content #layer_1 #upload-form-right{
	float: left;
	height: 280px;
	width: 320px;
}

#center_content #mix-with-gallery {
	color: #EF0288;
	float: left;

}
#center_content #layer_1 #progress-bar {
	color: #FFF;
	float: left;
	margin-top: 15px;
	height: 3px;
	width: 100%;
}

#center_content #layer_1 div.blank-space {
	height: 60px;
	width:100%;
	float: left;
}
 
#center_content #flickr-content {
	color: #000;
	text-align: left;
	margin-top: 20px;
}

#center_content #type1 ul .ul_type1 {
	width: 600px;
	height: 280px;
	padding-left: 0px;
	padding-right: 100px;	
}

/* GALLERY */
#center_content  #type_2 {
	position: relative;
	height: 270px;
	background: #666; 
	width: 580px;
	top: 35px;
	margin: auto auto;
	color: #FFFFFF;
	/*overflow: inherit;*/
	/*ginawa ko ng isa isa kasi nakakainis na */
}

#center_content  #type_2 #form-container{
	position: absolute;
	margin-top: 50px;
	margin-left: 250px;
	
}

#center_content #type_2 #gallery_category {
	color: #FFFFFF;
	width: auto;
	height: 280px;
	margin: 10px 0px;
}

#center_content #type_2 #gallery_category a.hover, a.active, a.hover {
	width: auto;
	height: 130px;
	margin: 10px 0px;
}

#center_content #type_2 #gallery_category div.box{
	float: left;
	text-align:center;
	width: 90px;
	height: 90px;
	margin: 5px 15px 5px 11px;
	/*border: #FFFFFF 1px solid; */
}

/* end gallery */

/* FLICKR ALBUM */
#center_content  #layer_3 {
	position: relative;
	color: #FFFFFF;
	background: #666; 
	width: 420px;
	top: 35px;
	height: 130px;
	margin: auto auto;
	/*overflow: inherit;*/
}

/* PHOTOBUCKET */
#center_content  #type_4 {
	position: relative;
	color: #FFF;
	background: #666; 
	width: 420px;
	height: 100px;
	top: 35px;
	margin: auto auto;
	/*overflow: inherit;*/
}
#center_content #album_container{
	width: auto;
	height: 200px;
	margin: 10px 0px;
}
#center_content #album_container div.box {
	float: left;
	text-align:center;
	width: 90px;
	height: 90px;
	margin: 5px 8px;
	border: #FFFFFF 1px solid;
}

/* END of PROPERTIES STEP3*/

/* PROPERTIES OF STEP4 */
#center_content #grey_left {
	float: left;
	background: #666;
	width: 160px;
	height: 444.5px;
	color: #FFF;
	text-align: left;
	font-size: 12px;
	padding: 10px;
	top: 10px;
	bottom: 15px;
}

#center_content .flash-plug {
    background: #FFF url(../img/base/flash_plug_bg.gif) top repeat-x;
    width: 650px;
    height: 50px;
    font-size: 12px;
}

#center_content .flash-plug a {
    color:#EC008D;
    font-weight: bold;
}

#center_content .flash-plug-note {
    color: #CCC;
    width: 650px;
    height: 20px;
    font-size: 10px;
}

#center_content #uploader-instructions {
    margin: 0px 0px 0px 0px;
    width: 600px;
    height: 90px;
    font: Verdana;
    font-size: 11.3px;
    float: right;
}
#center_content #uploader-note {
    width: 680px;
    height: 90px;
    float: right;
}

#center_content #uploader-note a{
    color:#EC008D;
    font-weight: bold;
}

#grey_left p {
	margin: 5px;
}

#title_message {
	text-align: center;
	top: 90px;
	bottom: 15px;
	padding: 0px 15px 0px 15px;
}


.preview_container {
	width: 670px;
	height: 400px;
	/*border: 1px solid #CCC; */
}

.preview_container #preview {
	position: relative;
	/*border: 1px solid #000; */
	width: 450px;
	height: 350px;
}

#center_content div.grey_right {
	padding-top: 4px;
	height: 335px;
}

#center_content div.grey_note	{
	color: #9AE3FF;
	/*color: #000; */
}

#custom_preview_container {
	float: right;
	width: 500px;
	height: 430px;
	/*border: #CCC 1px solid; */
}

#custom_preview_container #custom_preview{
	width: 500px;
	height: 375px;
	/*border: #000 1px solid; */
}
.preview_boxes{
	padding-top: 3px;
	width: 155px;
	height: 128px;
}
/* END */


/* PREVIEW page Properties */
#center_content div.finished_container {
	position: relative;
	float: left;
	/*border: 1px solid #CCC; */
	width: 480px;
	height: 400px;
	margin-bottom: 10px;
}

#center_content div.image_btn {
	text-align: left;
	float: left;
	margin-top: 10px;
}

#center_content div.options_container {
	text-align: left;
	float: right;
	width: 180px;
	height: 420px;
	/* border: 1px solid #CCC; */
}

#options_container div.options_box {
	float: left;
	width: 160px;
	height: 65px;
	margin-left: 15px;
	margin-right: 15px;
}

/* ->adjust settings.ctp css codes na naging myspace.ctp */


#center_content div.pre_containment{
	position: relative;
	float: right;
	/*border: 1px solid #CCC; */
	width: 430px;
	height: 500px;
	
}

.pre_containment #preview_container {
	position: relative;
	float: right;
	border: 1px solid #CCC;
	width: 420px;
	height: 400px;
	margin-bottom: 15px;
}


#preview_container div.box_left {
	float: left;
	width: 220px;
	height: 390px;
	margin-left: 12px;
	margin-top: 15px;
	
}
#preview_container div.box_right {
	float: right;
	width: 220px;
	height: 390px;
	margin-right: 5px;
	margin-top: 15px;
}

div.settings_container{
	height: 480px;
	width: 240px;
	margin-left: -10px;
}

#center_content #settings_background {
	float: left;
	background: #666;
	width: 180px;
	height: 120px;
	color: #FFF;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 30px;
	
}

#center_content #settings_background #settings_background_content{
	height: 120px;
	width: 160px;
	margin: 5px 10px;
}
#center_content #settings_background #settings_background_content .left-side{
	height: 90px;
	width: 50px;
	float: left;
	list-style: none;
	margin-top: 10px;
	margin-left: -18px;
	line-height: 26px;
	margin-right: 10px;
}
#center_content #settings_background #settings_background_content .right-side{
	height: 100px;
	width: 80px;
	float: left;
	list-style: none;
	margin-top: 10px;
	margin-left: 18px;

}

#center_content #settings_color {
	float: left;
	background: #666;
	width: 240px;
	height: 270px;
	color: #FFF;
	text-align: left;
	margin-top: 30px;
	margin-bottom: 15px;
}

#center_content #settings_color #settings_color_content{
	height: 230px;
	width: 170px;
	margin: 5px 10px;
}

#center_content #settings_color #settings_color_content .prev-box-container{
	width: 150px;
	height: 30px;
	float: left;
	margin-bottom: 10px;
}

#center_content #settings_color #settings_color_content .prev-box-container #preview-box-small {
	width: 60px;
	height: 20px;
	border: #FFF 1px solid;
	margin-top: -10px;
	margin-bottom: 5px;
	margin-left: 60px;
	
}

#center_content #settings_color #settings_color_content #color-box{
	border: #FFFFFF 1px solid;
	width: 130px;
	height: 160px;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
#center_content #settings_color #settings_color_content #color-slider {
	float: left;
	width: 20px;
	border: #FFFFFF 1px solid;
	height: 160px;
}

#center_content #settings_color .trans-box {
	float: left;
	margin-right: 20px;
}


/* end */

#center_content .error_note {
	color: #FF3399;
	font-size: 12px;
	z-index: 1;

}
div.error_note div.message{
	color: #FF3399;
	text-align: center;
}
#preview_container div.profile_buttons{
	float: right;
	position: relative;
}

	
#center_content input.input_file, input.input_text	{
	width: 260px;
	font: Verdana, Arial, Helvetica, sans-serif 10px;
	font-size: 12px;
	margin: 3px 10px;
}	

#center_content img	{
	vertical-align: top;
	border: none;
}

#center_content input.upload_image	{
	position: relative;
	background: transparent url(../img/buttons/btn_upload.gif) no-repeat;
	border: none;
	top: 63px;
	width: 85px;
	height: 31px;
	/*codes to ni gharet, itetest ko lang- janos*/
}	
#center_content input.back_image	{
	position: relative;
	background: transparent url(../img/buttons/btn_back.gif) no-repeat;
	border: none;
	top: 20px;
	width: 65px;
	height: 31px;
}	
#center_content input.next_image	{
	position: relative;
	background: transparent url(../img/buttons/btn_next.gif) no-repeat;
	border: none;
	top: 20px;
	width: 65px;
	height: 31px;
}	
#center_content input.button_login	{
	position: relative;
	background: transparent url(../img/buttons/btn_login2.gif) no-repeat;
	border: none;
	top: 20px;
	width: 65px;
	height: 31px;
}	
#center_content div.preview_center	{
	position: relative;
	border: 1px solid #CCC;
	width: 150px;
	height: 200px;

	/* ginamit to sa preview boxes, namely sa confirm */
}

#center_content div.center_left	{
	position: relative;
	margin: auto auto;
	text-align: left;
	color: #FFF;
	padding: 0 15px 0 15px;
	left: 120px;
}

#center_content input.checkbox	{
	vertical-align: middle;
}	
#center_content	li {
	position: relative;
	display: inline;
	padding-left: 5px;
	left: 10px;
	height: 25px;
}

#choose_container {
	width: 430px;
	height: 300px;
	/*border: #000 1px solid; */
}


#choose_container #choose_grey_size {
	width: 450px;
	height: 190px;
	background: #666;
	/*border: #CCC 1px solid; */
	color: #FFF;
	text-align: center;
}

/*steps container*/
.step4-flash {
    height: 470px;
    
}
.step4 {
	height:580px;
}
.step5 {
	height:450px;
}


/* step1 mosaics */
div.main{ 
	width:450px;
	height:180px;
}
div.main div.cont {
  	width: 70px;
	height: auto;
	float:left;
	
}
div.main div.cont div.slider {
	width:3px;
 	height:150px;
	margin:10px 20px;
 	background-color:#ccc;
	position: relative; 
}
#auto { 
	margin: 0px 0px 0px 10px;
	width: 90px;
}
div.main div.cont div.slider div.handle { 
	width:16px;
	height:10px;
	background: url(../img/base/slider.gif) no-repeat;
	cursor:move;
	position: absolute;
 	margin: 0 0 0 -3px;
}  
div.main div.sizes {
	width: 100px;
	height:180px;
	float:left;
	font-size: 12px;
 	color:#FFFFFF;
	line-height: 44px;
	margin: 0px 30px 0px -10px;
}
  div.main div.preview { 
	width: auto;
	height:auto;
	float:left;
}  
  div.main div#zoom_element {
  	width:130px; 
	height:100px;
	background:#F49AC1;
	position:relative;
	border: #FFF 2px solid;
}
  div.default {
	width: 350px;
	float:left;
}