﻿@import url(/css/base.css);
/* Start Your CSS Here */
a:active{outline: none;}
div.clear{clear: both;}

#content{padding:10px 6px 15px 6px;}
#content h2{padding-left:15px;}
/* steps start */
#photo h1{color: #630073; font:bold 32px/34px "Times New Roman", Times, Serif; text-align: center; margin-bottom: 7px;margin-left:-6px;width:726px;}
#photo p.c{text-align: center;font-family:Arial,Helvetica,Sans-serif;font-size:12px;font-weight:normal; margin-bottom: 19px;}
.imglogo{margin-bottom:-4px;}
#photo div#ctop{color:#898989;font-family:Arial,Verdana,Sans-serif;font-size:12px;margin:0;text-align:center;}

#photo h2{font: normal 14pt Times New Roman; color: #630073; vertical-align: middle;}
#photo h2.step1{margin-bottom: 2px;}
#photo h2.step1 img{vertical-align: middle; margin-left: 6px;}
#photo h2.step1 input{width:139px;height:26px;border:0 none;color:#FFFFFF;padding-bottom: 3px;background: transparent url(/images/tattoodle-your-photos/btn_FromComputer.gif) top left no-repeat; vertical-align: middle; margin-left: 5px;font-family: Times New Roman;font-size: 16px; cursor: pointer;}

#photo h2.step11{margin-top:8px;vertical-align:top;}
#photo h2.step11 span{vertical-align:top;float:left;}
#photo h2.step11 img{vertical-align:middle;margin-left:3px;margin-bottom:4px;}
div.selectDesignGroup {float:left;text-align:center;}

#photo h2.step2{margin:8px 8px 0px 0px;clear:both;}
#photo h2.step3{padding: 4px 8px 18px 15px; float: left;}
#photo h2.step3 img{vertical-align: middle; margin-left: 6px;}

#photo h2.step4{float:left;margin-top:13px;/*padding: 4px 8px 18px 15px;*/}
/* steps end */

#leftArrow{float:left;margin:17px 7px 0px 0px;cursor:pointer;}
#rightArrow{margin:17px 0px 0px 5px;cursor:pointer;}

p.grey{color: #5E5E5E; font: normal 12px Arial,Helvetica,Sans-serif; clear: both; margin-left: 20px;}
#imgCollection{display: block;margin:10px 0 0 27px;height: 128px;width:714px;overflow:hidden;clear:both;}
#imgCollectionImagesContainer{display:block;float:left;margin-left:0;margin-top:0px;overflow:hidden;width:658px;}
#imgCollectionImages{display:block;float:left;margin-left:0;margin-top:0px;overflow:hidden;width:664px;/*width:990px;*//*position:relative;*/}

div.imgItem{float: left; margin:0px; padding: 0px 8px 4px 0px;width:75px;}
img.PicturePhoto{display:block;width:75px;height:75px;}
img.PicturePlaceHolder{display:block;width:75px;height:75px;}
div.EditImgPlaceholder{width: 75px; height: 75px; background-color: Black;margin-bottom:8px;}
#content p.title{text-align: center;}

input.EditImage{margin-left:0px;border-width:0px;}
input.DeleteImage{margin-left:0px;margin-top:2px;border-width:0px;}

#arrangePhotosWrapper{margin: 7px auto 26px; height:399px;position:relative;width:696px;}
/*#arrangePhotosLeft{float:left;margin-top:0px;width:131px;}*/
#middlePhotosSquare{width:592px;margin:0px auto;}

div.imgPlaceholderSmall{border: solid 3px #630073; margin-bottom: 2px;display:block; position: relative;background-color:#D0CECF;}
/*#arrangePhotosMiddle{float: left; width: 322px; margin: 0 2px;}*/
/*div.imgPlaceholderLargeContainer{margin:0px;padding:3px 1px 0 1px;float:left;}
div.imgPlaceholderLarge2Container{margin:0px;padding:3px 0 0 1px;float:left;}*/
div.imgPlaceholderLarge{margin:0px;padding:0px;border: solid 3px #630073; float: left;display:block;position:relative;background-color:#D0CECF;}
/*#arrangePhotosRight{float:left;margin-top:0px;}*/
#sq1{position:absolute;width:125px;height:125px;top:0px;left:53px;}
#sq2{position:absolute;width:125px;height:125px;top:133px;left:53px;}
#sq3{position:absolute;width:125px;height:125px;top:266px;left:53px;}
#sq4{position:absolute;width:153px;height:153px;top:238px;left:187px;}
#sq5{position:absolute;width:153px;height:153px;top:238px;left:349px;}
#sq6{position:absolute;width:125px;height:125px;top:266px;left:511px;}
#sq7{position:absolute;width:125px;height:125px;top:133px;left:511px;}
#sq8{position:absolute;width:125px;height:125px;top:0px;left:511px;}

.tattoodleSearchImg{margin:0px;padding:0px;display:block;float:left;padding:0 0 1px;}

/* NON-IE EDITOR CODE START */
#editor{position: absolute; top: 145px; left: 140px; width: 522px; height: 454px; background-image: url(/images/tattoodle-your-photos/editor-bg.jpg);}
#btnEditorStartOver{position: absolute; top: 50px; left: 346px;}
#btnEditorDone{position: absolute;top:316px;left:361px;}

#imgEditorContainer{width:252px;height:252px;background:#000000 url(/images/tattoodle-your-photos/bg_edit_image.gif) top left;position:absolute;top:103px;left:45px;overflow:hidden;margin:0px;padding:0px;}
#imgEditorContainer2{width:252px;height:252px;position:absolute;top:0px;left:0px;overflow:hidden;margin:0px;padding:0px;}
#imgEditor{width: 239px; height: 240px;display:block;margin:6px 0 0 7px;}

#editorZoom{position: absolute; top:103px; left:323px; width: 169px; height: 92px;}
#editorZoomInside{margin:50px 0 0 15px;}
#btnEditorZoomOut{float: left; width: 21px;}
#sliderZoomWrapper{float: left;background-image: url(/images/tattoodle-your-photos/slider-bg.gif);background-repeat:repeat-x;}
#sliderZoom{width: 96px;height: 21px; }

#editorMove{display:none;}

#editorRotate{position: absolute; top:208px; left:323px; width: 169px; height: 92px;}
#editorRotateInside{margin:50px 0 0 15px;}
#btnEditorRotateLeft{float: left; width: 21px;}
#sliderRotateWrapper{float: left;background-image: url(/images/tattoodle-your-photos/slider-bg.gif);background-repeat:repeat-x;}
#sliderRotate{width: 96px;height: 21px; }

#editorText{color:#630073;font-size:11px;left:18px;line-height:14px;position:absolute;top:380px;width:488px;}
#editorText .editorInstructionsHeader{margin-left:9px;text-decoration:underline;}
#editorText ul{list-style-type:none;}
/* NON-IE CODE END */

.txtdisclaim{ color:#7f7f7f; font:11px/14px Arial, Verdana, Sans-Serif; text-align:center; margin: 15px 20px 0; }
.modalH1{color:#630073;margin: 30px auto 0px auto;font-size:20px;font-weight:bold;text-align:center;}
.modalUploader{color:#630073; width: 496px;}
.modalUploaderText{font-weight:bold;text-align:center; margin:40px auto 3px auto;font-size:12px;font-family:Arial,Helvetica,Sans-serif;}
#fileUploadPhoto{width: 320px; margin:auto;}
.modalUploader obj, .modalUploader embed{margin-left: 80px;}
.modalUploadButtons{margin-top:23px;text-align:center;}
#modalUploadUpload{margin-left:10px;}
#modalUploadUploadFB{float:right;}
#uploadText{color:#630073;font-size:11px;line-height:16px;margin: 40px 0 0 44px;}
#uploadText .uploadInstructionsHeader{margin-left:9px;text-decoration:underline;}
#uploadText ul{list-style-type:none;}

div.fileUploadPhotoContainer{position: relative;overflow: hidden;padding-left:82px;text-align:left;clear:both;}
div.fileUploadPhotoContainer input.fileUploadPhotoButton{font-family: arial;font-size: 11px;margin-left: 1px;width:86px;padding-top:2px;vertical-align:top;}
div.fileUploadPhotoContainer div.fileUploadPhotoTextContainer{background-image:url(/images/tattoodle-your-photos/modal_upload_bg.gif);background-repeat:no-repeat;height:40px;width:225px;display:block;float:left;}
div.fileUploadPhotoContainer input.fileUploadPhotoText{color: #a3a3a3;font-family: arial;font-size: 12px;width: 202px;z-index: 3;height:30px;padding-top:4px;padding:9px;border-width:0;vertical-align:top;margin:0px;background:transparent none repeat scroll 0 0;}
#filePhoto{position: absolute; z-index: 2; font-size: 40px; filter: alpha(opacity:0);opacity: 0;right: 0px; top: 0px; text-align: left;}

#formUploadUploading{display:none;height:374px;position:absolute;top:74px;width:495px;background-color:#FFFFFF;}
#formUploadUploading h2{color:#630073;margin: 50px auto 0px auto;font-size:20px;font-weight:bold;text-align:center;}
#formUploadUploading h3{color:#630073;margin: 30px auto 0px auto;font-size:13px;font-weight:bold;text-align:center;}
.modalLoadingPhoto{color:#630073;margin: 30px auto 0px auto;font-size:20px;font-weight:bold;text-align:center;}
.modalLoadingAnimation{text-align:center;margin-top:50px;}

#formUploadUploadingFB{display:none;}

#modalUploadFlashError{text-align:center;}
#modalUploadFlashError p{font-size:16px;font-weight:bold;color:#630073;margin: 10px 83px;}
#modalUploadFlashError a{color:#00f;} 
#modalUploadFlashErrorButtons{margin: 22px auto 0 auto; width: 167px; text-align: center;}
a#btnFlashErrorClose{display:block;margin:0px;width:167px;height:34px;background:url(/images/tattoodle-your-photos/btnCloseFlashError.gif) no-repeat;color:#FFFFFF;font-size:18px;line-height:20px;text-decoration:none;padding-top:6px;}

.formUploadingButtons{text-align:center;margin-top:40px;display:none;}
.formUploadingButtons a{margin: 0px 10px 0px 10px}
#btnSubmit{text-align:center;clear:both;}
p.goback{font-family:Arial,Helvetica,Sans-serif;font-size:12px;font-weight:normal;margin:16px 0px 40px 0px;text-align:center;}
/*p.goback a,p.goback a:link{color:#0000EE;}
p.goback a:visited{color:#551A8B;}*/
p.goback a:hover{text-decoration:underline;}

p.gobacktop{font-family:Arial,Helvetica,Sans-serif;font-size:12px;font-weight:normal;margin-top:8px;text-align:center;}
p.gobacktop a:hover{text-decoration:underline;}


.imgSmall{width:125px;height:125px;display:block;position:relative;margin:0px auto;}
.imgLarge{width:153px;height:153px;display:block;position:relative;}

.btnRemoveFromPlaceholderSmall a:active, .btnRemoveFromPlaceholderLarge a:active, .btnRemoveFromPlaceholderFive a:active, .btnRemoveFromPlaceholderSmall a:focus, .btnRemoveFromPlaceholderLarge a:focus, .btnRemoveFromPlaceholderFive a:focus{outline:none;}
.btnRemoveFromPlaceholderSmallH{display:none;}
.btnRemoveFromPlaceholderSmall{display:block;position: absolute;left: 56px;top: 10px;}
.btnRemoveFromPlaceholderSmall a{text-decoration:none;}
.btnRemoveFromPlaceholderSmall a img{display:block;margin:0px;padding:0px;border-width:0px;}
.btnRemoveFromPlaceholderLargeH{display:none;}
.btnRemoveFromPlaceholderLarge{display:block;position: absolute;left: 70px;top: 10px;}
.btnRemoveFromPlaceholderLarge a{text-decoration:none;}
.btnRemoveFromPlaceholderLarge a img{display:block;margin:0px;padding:0px;border-width:0px;}

#confirmationDelete{text-align:center;}
#confirmationDelete p{color:#630073;font-size:16px;font-weight:bold;height:57px;margin-top:8px;}

#confirmationDeleteButtons{width:208px;margin:0px auto;margin:0 auto;}
a#btnDeleteYes{display:block;float:left;margin:0px;width:93px;height:34px;background:url(/images/tattoodle-your-photos/btnDelete_yes.gif) no-repeat;color:#FFFFFF;font-size:18px;line-height:20px;text-decoration:none;padding-top:6px;}
a#btnDeleteNo{display:block;float:left;margin:0 0 0 20px;width:93px;height:34px;background:url(/images/tattoodle-your-photos/btnDelete_no.gif) no-repeat;color:#FFFFFF;font-size:18px;line-height:20px;text-decoration:none;padding-top:6px;}


img#uploadArrowRightStep3{display:block;float:left;margin-top:3px;padding:0 10px 0 8px;}

#FrameColorContainer{background-color:#EAE9E9;height:37px;margin-top:0;padding:0 10px 0 8px;width:308px;overflow:hidden;border:1px solid #D3D2D2;}
.ColorPlaceHolder{background-color:red;display:block;height:16px;width:15px;border:1px solid #727272;cursor:pointer;line-height:1px;font-size:10px;}

#leftArrowFrameColor{cursor:pointer;float:left;margin:0px;padding:8px 3px 0 0px;}
#rightArrowFrameColor{cursor:pointer;float:left;margin:0px;padding:8px 0px 0px 3px;}
#ColorCollection{display:block;float:left;margin-left:0;margin-top:0;overflow:hidden;width:272px;}
.imgItemColor{float:left;padding-bottom:5px;padding-left:0;padding-right:4px;}
.ColorPlaceHolder{background-color:red;display:block;height:16px;width:15px;border:1px solid #727272;cursor:pointer;line-height:1px;font-size:10px;}
#imgCollectionColorContainer{display:block;float:left;margin-left:0;margin-top:7px;overflow:hidden;width:266px;}
.ColorPlaceHolderOut{border:2px solid #EAE9E9;display:block;padding:1px;}
.ColorPlaceHolderOver{border:2px solid #000000;display:block;padding:1px;}
.ColorPlaceHolderSelected{border:2px solid #000000;display:block;padding:1px;}

img#uploadArrowRightStep4{display:block;float:left;margin-top:3px;padding:0 7px 0 8px;margin-top:13px;}
#BackgroundColorContainer{background-color:#EAE9E9;display:block;height:37px;margin-top:0;padding:0 10px 0 8px;width:308px;overflow:hidden;margin-top:9px;border:1px solid #D3D2D2;}
#leftArrowBackgroundColor{cursor:pointer;float:left;margin:0px;padding:8px 3px 0 0px;}
#rightArrowBackgroundColor{cursor:pointer;float:left;margin:0px;padding:8px 0px 0px 3px;}
#BgColorCollection{display:block;float:left;margin-left:0;margin-top:0;overflow:hidden;width:272px;}
#imgCollectionBgColorContainer{display:block;float:left;margin-left:0;margin-top:7px;overflow:hidden;width:266px;}

p.by{color:#000000;font-family:Arial,Helvetica,Sans-serif;font-size:12px;font-weight:normal;margin:30px auto 20px;text-align:center;width:500px;}

.divFBpictureOnOver{height:116px;width:130px;border: 4px solid rgb(127, 127, 127); position: relative;  float: left; margin-left: 20px; margin-bottom: 7px;}
.divFBpictureOnOut{height:116px;width:130px;border: 2px solid rgb(127, 127, 127);padding:2px; position: relative;  float: left; margin-left: 20px; margin-bottom: 7px;}
.modalUploadFBButtons{clear:both;padding-top:20px;text-align:center;}

.imgExampleTop{height:46px;left:0;position:absolute;top:0;width:100%;}

#modalExampleImage{text-align:center;width:618px;}
#modalExampleImageSB{text-align:center;/*width:618px;*/}
#modalExampleImageFive{text-align:center;/*width:618px;*/}
#modalExampleImageTree{text-align:center;/*width:618px;*/}
#modalExampleImageTwo{text-align:center;/*width:618px;*/}
#modalExampleImageOne{text-align:center;/*width:618px;*/}
#modalExampleImage a, #modalExampleImageSB a, #modalExampleImageFive a, #modalExampleImageTree a, #modalExampleImageTwo a, #modalExampleImageOne a{outline:none;}

/* middle photos - scrapbook arrangement */
/*#arrangePhotosWrapper{position:relative;}*/
.tattoodleSearchImg2{display:block;margin:0px auto;}
#p1{position:absolute;width:130px;height:163px;top:0px;left:46px;background-color:#d0cfcf;text-align:center;overflow:hidden;}
#p2{position:absolute;width:127px;height:127px;top:143px;left:60px;background-color:#d0cfcf;text-align:center;z-index:2;overflow:hidden;}
#p3{position:absolute;width:127px;height:127px;top:246px;left:102px;background-color:#d0cfcf;text-align:center;z-index:2;overflow:hidden;}
#p4{position:absolute;width:129px;height:161px;top:232px;left:212px;background-color:#d0cfcf;text-align:center;overflow:hidden;}
#p5{position:absolute;width:129px;height:161px;top:232px;left:348px;background-color:#d0cfcf;text-align:center;overflow:hidden;}
#p6{position:absolute;width:127px;height:127px;top:246px;left:462px;background-color:#d0cfcf;text-align:center;overflow:hidden;z-index:3;}
#p7{position:absolute;width:127px;height:127px;top:143px;left:503px;background-color:#d0cfcf;text-align:center;z-index:2;overflow:hidden;}
#p8{position:absolute;width:130px;height:163px;top:0px;left:515px;background-color:#d0cfcf;text-align:center;overflow:hidden;}
.designButton{cursor:pointer;}

#seeExample{margin-top:10px;font: 12px/12px Courier New, Courier, monospace;font-weight:bold;display:inline;float:right;}
#seeExample a,#seeExample a:link,#seeExample a:visited{color:#057116;}

#navigationTop{height:40px;margin-bottom:24px;margin-left:-7px;width:726px;position:relative;top:8px;}
#navigationTopBorder{border-top:3px solid #630074;width:100%;height:10px;}
#navigationTop ul{list-style-type:none;height:36px;display:inline-block;}
#navigationTop li{padding-left:10px;float:left;margin:0px;}
#navigationTop li.navigationTopFirst{padding-left:19px;}
#navigationTop a{overflow:hidden;background-image:url(/images/topnav.gif);color:#630073;display:block;font-family:Arial,Verdana,Sans-serif;font-size:18px;height:30px;line-height:28px;text-align:center;text-decoration:none;width:224px;border-bottom:none;margin-top:6px;}
#navigationTop a.navigationTopSelected{overflow:hidden;background-image:url(/images/topnav-a.gif);border-bottom:3px solid #fff;margin-top:0px;top:6px;z-index:2;position:relative;height:31px;font-size:18px;padding-top:2px;}
#navigationTop a span.tsmall{font-size:15px;}

#photoErrortxtTop{margin: 0px; text-align: center; font-family: arial; font-size: 16px; font-weight: bold; color: rgb(99, 0, 115); padding-top: 15px;}
#photoErrortxtMiddle{margin: 0px; text-align: center; font-family: arial; font-size: 16px; font-weight: bold; color: rgb(99, 0, 115); padding-top: 17px;}
#photoErrorbtn{cursor:pointer; margin: 0px; text-align: center; padding-top: 30px; padding-bottom: 20px;}

/*#middle5Photos{position:relative;}*/

div.imgPlaceholderFive{border: solid 3px #630073; margin-bottom: 2px;display:block; position: relative;background-color:#D0CECF;}
.btnRemoveFromPlaceholderFiveH{display:none;}
.btnRemoveFromPlaceholderFive{display:block;position: absolute;left: 123px;top: 10px;}
.btnRemoveFromPlaceholderFive a{text-decoration:none;}
.btnRemoveFromPlaceholderFive a img{display:block;margin:0px;padding:0px;border-width:0px;}

#fivep1{height:192px;left:60px;position:absolute;top:14px;width:126px;overflow:hidden;}
#fivep2{left:76px;position:absolute;top:228px;width:126px;overflow:hidden;}
#fivep3{height:165px;left:224px;position:absolute;top:224px;width:242px;overflow:hidden;}
#fivep4{left :488px;position:absolute;top:228px;width:126px;overflow:hidden;}
#fivep5{height:192px;left:504px;position:absolute;top:14px;width:126px;overflow:hidden;}

#treep1{height:192px;left:60px;position:absolute;top:14px;width:126px;overflow:hidden;}
#treep2{height:165px;left:224px;position:absolute;top:224px;width:242px;overflow:hidden;}
#treep3{height:192px;left:504px;position:absolute;top:14px;width:126px;overflow:hidden;}

#twop1{height:192px;left:60px;position:absolute;top:14px;width:126px;overflow:hidden;}
#twop2{height:192px;left:504px;position:absolute;top:14px;width:126px;overflow:hidden;}

#onep1{height:165px;left:224px;position:absolute;top:224px;width:242px;overflow:hidden;}
#btnDone{cursor:pointer;}

.albumContainer{float: left;cursor:pointer;margin-left:16px;margin-top:16px;height:198px;}
#albumContainer{height:424px;overflow-x:hidden;overflow-y:scroll;width:699px;}
.FBpictures{cursor:pointer;width: 140px; height: 140px;   background-position: center center; background-repeat: no-repeat; text-align: center; }
.FBpicturesImg{left:118px;position:absolute;top:118px;}
.FBpicturesContainer{float: left; margin:22px 0 -6px 26px;width: 140px; height: 140px;position:relative;border:1px solid #F5F5F5;}
.FBpicturesContainerSelected{width: 140px; height: 140px;    background-position: center center; background-repeat: no-repeat; text-align: center;opacity:0.4;filter:alpha(opacity=40); }
.pictureContainer{position:relative;}
#pictureContainer{font-size:1px;}
#bottomdivPic{clear: both; }
#TopText{color:#7F7F7F;font-size:13px;font-weight:bold;padding-left:0px;padding-top:4px;text-align:center;}
#fb_login_image{cursor:pointer;}
.albumDiv{border: 3px solid rgb(127, 127, 127); margin: 0px; width: 148px; height: 148px; background-color: rgb(100, 47, 93);}

#picturesubcontainer{height:337px;overflow-x:hidden;overflow-y:scroll;width:699px;position:relative;}
