.fof-add-image{width:1212px; margin:0 auto; /*float:left; position:absolute; left:50%; top:0; z-index:123; margin-left:-606px;*/}
.fof-add-image .top-section{width:100%; float:left; margin:30px 0 0px; text-align:center;}
.fof-add-image .top-section h1{float:left; font-size:36px; color:#fff; font-family:'Oswald', 'Impact', sans-serif; margin:0; width:100%;}
.fof-add-image .top-section h3{float:left; font-size:22px; font-style:italic; color:#fff; font-weight:100; width:100%; float:left}
.fof-add-image .top-section .content-row{width:100%; float:left; margin:12px 0 25px;}
.fof-add-image .top-section p{font-size:22px; font-weight:500; color:#fff; font-family:'Source Sans Pro', 'Helvetica', 'Arial', sans-serif; margin:0;}
.fof-add-image .top-section p small{ font-size:24px; font-weight:200;  text-transform:uppercase; color:#aca8a7; padding:0 10px; }
.fof-add-image .top-section .btn{font-size:15px; padding:8px 8px; margin-top:-8px; color:#fff; font-weight:600; text-transform:uppercase;}
.fof-add-image .top-section .btn .msg{float:left; margin:4px 7px 0 0px; vertical-align:bottom}


.fof-image-main-section{width:100%; float:left; background:#2a2a2a; min-height:650px; margin-bottom:50px; position:relative;}
.crop-nav{width:70px; float:left; min-height:650px; background:#1d1d1d; position:absolute; left:0; top:0;}
.crop-nav ul{width:60px; float:left; list-style:none; margin:35px 0 0 10px;}
.crop-nav ul li{float:left; margin-bottom:35px; width:100%; padding:0; position:relative}
.crop-nav ul li .tooltip{width:auto; position:absolute; left:0; top:-35px; font-size:14px; line-height:15px; padding:5px; color:#fff; background:#2871a9; display:none; white-space:nowrap; border:1px solid #2871a9;}
.crop-nav ul li .tooltip small{width:12px; height:10px; position:absolute; left:15px; bottom:-10px; background:url(../images/fof-tooltip-arrow.png) no-repeat 0 0}
.crop-nav ul li:hover .tooltip{display:block;}
.crop-nav ul li.crop-photo a{background:url(../images/fof-image-nav.png) no-repeat 0 0; width:50px; float:left; height:30px;}
.crop-nav ul li.crop-photo a:hover, .crop-nav ul li.crop-photo a.active{ background:url(../images/fof-image-nav.png) no-repeat -121px 0;}

.crop-nav ul li.rotate a{background:url(../images/fof-image-nav.png) no-repeat 0 -70px; width:50px; float:left; height:30px;}
.crop-nav ul li.rotate a:hover, .crop-nav ul li.rotate a.active{ background:url(../images/fof-image-nav.png) no-repeat -121px -70px;}

.crop-nav ul li.auto-colour a{background:url(../images/fof-image-nav.png) no-repeat 0 -135px; width:50px; float:left; height:39px;}
.crop-nav ul li.auto-colour a:hover, .crop-nav ul li.auto-colour a.active{ background:url(../images/fof-image-nav.png) no-repeat -121px -135px;}

.crop-nav ul li.fix-redeye a{background:url(../images/fof-image-nav.png) no-repeat 0 -211px; width:50px; float:left; height:30px;}
.crop-nav ul li.fix-redeye a:hover, .crop-nav ul li.fix-redeye a.active{ background:url(../images/fof-image-nav.png) no-repeat -121px -211px;}

.crop-nav ul li.redo a{background:url(../images/fof-image-nav.png) no-repeat 0 -282px; width:50px; float:left; height:30px;}
.crop-nav ul li.redo a:hover, 
.crop-nav ul li.redo a.active{ background:url(../images/fof-image-nav.png) no-repeat -121px -282px;}

.crop-nav ul li.undo a{background:url(../images/fof-image-nav.png) no-repeat 0 -352px; width:50px; float:left; height:30px;}
.crop-nav ul li.undo a:hover, 
.crop-nav ul li.undo a.active{ background:url(../images/fof-image-nav.png) no-repeat -121px -352px;}

.crop-nav ul li.reset a{background:url(../images/fof-image-nav.png) no-repeat 0 bottom; width:50px; float:left; height:30px;}
.crop-nav ul li.reset a:hover, .crop-nav ul li.reset a.active{ background:url(../images/fof-image-nav.png) no-repeat -121px bottom;}

.fof-image-main-section .step1{width:100%; float:left; text-align:center; margin-top:272px;}
.fof-image-main-section .step1 em{font-size:15px; color:#fff; font-style:italic; width:100%; float:left; padding-top:5px;}
.fof-image-main-section .step1 .button{background:url(../images/upload-icon.png) no-repeat 18px 10px #5496c9; transition: background-color 0.8s ease; padding:9px 30px 9px 55px; font-size:16px;}
.fof-image-main-section .step1 .button:hover{background:url(../images/upload-icon.png) no-repeat 18px 10px #2871a9;}

.fof-image-main-section .step2{width:100%; float:left; margin-top:32px;  background:#2a2a2a; height:100%;  }
.fof-image-main-section .step2 .crop-nav{min-height:910px;}
.fof-image-main-section .step2 .crop-msg{font-size:16px; line-height:22px; color:#c1c1c1; font-style:italic; width:100%; float:left; text-align:center; color:#fff; font-weight:400; margin-top:10px;}
.fof-image-main-section .step2 p{font-size:16px; line-height:22px; color:#fff!important; width:100%; float:left; padding-bottom:25px; margin:0; text-align:center}
.fof-image-main-section .step2 .img-box{width:100%; min-height:400px; float:left; text-align:center; margin-left:300px!important;}
.fof-image-main-section .step2 .img-box img{max-width:100%; max-height:100%;}
.fof-image-main-section .step2 .button-row{width:89%; float:left; text-align:center; margin-top:32px; padding: 0 3% 0 8%}
.fof-image-main-section .step2 .button-row .button{font-size:16px; margin:0 2px;}

.fof-image-main-section .step3{width:94%; float:left; margin:30px 3% 0; position:relative; }
.fof-image-main-section .step3 .left-image{width:560px!important; min-height:532px!important; position:relative; float:left;}
.fof-image-main-section .step3 .left-image img{max-width:100%!important; float:left; max-height:100%!important;}
.fof-image-main-section .step3 .left-image .left-img img{max-width:368px!important; float:left; max-height:415px!important;}
.fof-image-main-section .step3 .left-image .close{width:23px; height:23px; position:absolute; right:0; top:0; background:url(../images/fof-close.png) no-repeat 0 0;}
.fof-image-main-section .step3 .tag-name{width:100%; float:left; position:absolute; left:0; bottom:0; background:url(../images/fof-tag-bg.png) repeat 0 0; text-align:center; padding:18px 0;}
.fof-image-main-section .step3 .tag-name a{text-decoration:underline; color:#fff; text-transform:uppercase; font-weight:400;}
.fof-image-main-section .step3 .right-section{width:370px; float:left; margin-left:15px; text-align:left; position:relative; z-index:1234;}
.fof-image-main-section .step3 .right-section .box-sep{width:100%; float:left; margin-bottom:6px;}
.fof-image-main-section .step3 .right-section .box-sep label.error{width:100%; float:left;}
.fof-image-main-section .step3 .right-section .box-sep .show-icon{width:29px; height:29px; float:left; background:url(../images/fof-img-icon.png) repeat 0 0; cursor:pointer;}
.fof-image-main-section .step3 .right-section .box-sep .show-icon.hide-icon{background:url(../images/fof-img-icon2.png) repeat 0 0;}
.fof-image-main-section .step3 .right-section .inner-detail{width:368px; float:left; background:none!important; padding:0; min-width:368px; height:auto;}
.fof-image-main-section .step3 .right-section .inner-detail.min-height{min-height:120px;}

.fof-image-main-section .step3 .right-section .inner-detail #donated_by{width:348px!important; border:0; float:left; background:#e9e9e9; padding:10px 10px 10px 10px;}
.fof-image-main-section .step3 .right-section .inner-detail #photo_caption{width:348px!important; border:0; float:left; background:#e9e9e9; padding:10px 10px 10px 10px;}

.fof-image-main-section .step3 .right-section strong{font-size:15px; color:#fff; font-weight:500; width:100%; float:left; padding-bottom:3px;}

.fof-image-main-section .step3 .right-section p{font-size:14px; color:#9e9c9c; line-height:18px; width:100%; float:left; margin:0;}
.fof-image-main-section .step3 .tages{float:left; font-size:14px;  color:#2a2a2a; font-weight:400; padding:7px 5px 7px 10px; background:#DBDBDB; margin:5px 5px 0px 0}
.fof-image-main-section .step3 .tages a{ width:12px; height:10px; float:right; background:url(../images/fof-img-icon3.png) no-repeat 115px 17px; margin-left:10px; color:#2a2a2a; cursor:pointer;}
.fof-image-main-section .step3 .right-section .button{ font-size:16px; margin-top:4px;}

.photo-caption-section{float:left; position:relative; background:#1D1D1D}
.photo-caption-section .tag-name{width:100%; float:left; position:absolute; left:0; bottom:0; background:url(../images/fof-tag-bg.png) repeat 0 0; text-align:center; padding:12px 0;}
.photo-caption-section .tag-name a{text-decoration:underline; color:#fff; text-transform:uppercase; font-weight:400; cursor:pointer}
.photo-caption-section a.close{float:right; font-size:22px; color:#fff; position:absolute; left:10px; top:0px; cursor:pointer; font-weight:bold;}
.photo-caption-section { width:100% !important; height:100% !important; float:left; text-align: center; }
.photo-caption-section img {float: left;}	
/* max-height: 100% !important;   max-width: 100% !important;*/
.photo-caption-section img#imageMap { position: absolute;  margin: auto; top: 0; left: 0; right: 0; bottom: 0; }



.fof-image-main-section .step4{width:875px;  margin:49px auto 108px; position:relative}
.fof-image-main-section .step4 .left-img{width:420px; float:left; height:420px; background:#1d1d1d; text-align:center; position:relative;}
.fof-image-main-section .step4 .left-img img{ max-height:100%; max-width:100%; position: absolute;  margin: auto; top: 0; left: 0; right: 0; bottom: 0;}
.fof-image-main-section .step4 .right-section{width:435px; float:right;}
.fof-image-main-section .step4 .right-section .thumb-image{float:left; margin-left:2px;}
.fof-image-main-section .step4 .edit-section textarea{width:96%; float:left; background:#fff; border:0; padding:2%; height:60px; color:#9e9c9c; margin-bottom:4px;}
.fof-image-main-section .step4 .edit-section input[type="text"]{width:95%;}
.fof-image-main-section .step4 .edit-section{width:96%; float:left; padding:2%;  float:left; background:#3b3b3b;  margin-bottom:15px;}
.fof-image-main-section .step4 .edit-section a.edit{float:right; text-decoration:none; color:#5496c9; font-size:13px; line-height:15px; background:url(../images/fof-edit.png) no-repeat 0 1px; padding:0 0 0 15px; font-weight:bold; cursor:pointer;}
.fof-image-main-section .step4 strong{font-size:16px; color:#8c8c8c; font-weight:600;}
.fof-image-main-section .step4 p{font-size:18px; line-height:24px; color:#fefefe; font-weight:200; width:100%; float:left; margin:0;}
.fof-image-main-section .step4 .content1{width:96%; float:left; padding:2%; margin-bottom:15px;}
.fof-image-main-section .step4 .content2{width:90%; float:left; padding:0px 0 0 10px; min-height:108px;}
.fof-image-main-section .step4 .content3{width:90%; float:left; padding:0px 0 29px 10px; font-size:18px; line-height:21px; color:#bbbbbb;}
.fof-image-main-section .step4 .content3 .checkbox{float:left; margin-right:10px; }
.fof-image-main-section .step4 .content3 a{text-decoration:underline; color:#fff;}
.fof-image-main-section .step4 .tages{float:left; font-size:14px;  color:#2a2a2a; font-weight:400; padding:7px 5px 7px 10px; background:#DBDBDB; margin:5px 5px 0px 0}
.fof-image-main-section .step4 .tages a{ width:12px; height:10px; float:right; background:url(../images/fof-img-icon3.png) no-repeat 115px 17px; margin-left:10px; color:#2a2a2a; cursor:pointer;}

.fof-image-main-section .step4 .mid-btn{width:auto; float:right; margin-top:10px;}
.fof-image-main-section .step4 .mid-btn .button{background:none; font-size:13px; border:1px solid #5496c9; padding:6px 20px;}
.fof-image-main-section .step4 .mid-btn .button.green{border:1px solid #91c1aa; margin-left:5px;}
.fof-image-main-section .step4 .button-row{width:90%; float:left; margin-left:10px;}
.fof-image-main-section .step4 .button-row .button{font-size:16px; margin:0 2px; width:155px; float:left; height:auto;}
.fof-image-main-section .step4 .button-row .button.add{background:url(../images/fof-add-cart.png) no-repeat 119px 12px #5496c9!important; transition: background-color 0.8s ease; padding:9px 48px 9px 16px; font-size:16px;}
.fof-image-main-section .step4 .button-row .button.add:hover{background:url(../images/fof-add-cart.png) no-repeat 119px 12px #2871a9;}


.fof-image-main-section .step5{width:758px; float:left; margin:49px 0 0 227px; position:relative}
.fof-image-main-section .step5 .left-img{width:368px; float:left; height:415px;}
.fof-image-main-section .step5 .left-img img{float:left; max-height:368px; max-height:415px;}
.fof-image-main-section .step5 .right-section{width:368px; float:right;}
.fof-image-main-section .step5 strong{font-size:16px; color:#8c8c8c; font-weight:600;}
.fof-image-main-section .step5 p{font-size:18px; line-height:24px; color:#fefefe; font-weight:200; width:100%; float:left; margin:0;}
.fof-image-main-section .step5 .textarea{width:348px; float:left; background:#e9e9e9; height:87px; font-size:14px; font-style:normal; color:#9e9c9c; margin:5px 0 15px;}
.fof-image-main-section .step5 .content1{width:100%; float:left; min-height:75px; padding-top:20px;}
.fof-image-main-section .step5 .content2{width:100%; float:left; min-height:75px;}
.fof-image-main-section .step5 .content3{width:100%; float:left; padding:0px 0 29px 0px; font-size:18px; line-height:21px; color:#bbbbbb;}
.fof-image-main-section .step5 .content3 .checkbox{float:left; margin-right:10px; }
.fof-image-main-section .step5 .content3 a{text-decoration:underline; color:#fff;}
.fof-image-main-section .step5 .mid-btn{width:auto; float:right;}
.fof-image-main-section .step5 .mid-btn .button{background:none; font-size:13px; border:1px solid #5496c9; padding:6px 20px;}
.fof-image-main-section .step5 .mid-btn .button.green{border:1px solid #91c1aa; margin-left:5px;}
.fof-image-main-section .step5 .button-row{width:100%; float:left;}
.fof-image-main-section .step5 .button-row .button{font-size:16px; margin:0 2px; width:155px;}
.fof-image-main-section .step5 .button-row .button.add{background:url(../images/fof-add-cart.png) no-repeat 119px 12px #5496c9; transition: background-color 0.8s ease; padding:9px 48px 9px 16px; font-size:16px;}
.fof-image-main-section .step5 .button-row .button.add:hover{background:url(../images/fof-add-cart.png) no-repeat 119px 12px #2871a9;}


.small-blue-check input[type=checkbox].css-checkbox{display:none;}
.small-blue-check input[type=checkbox].css-checkbox + label.css-label{padding-left:18px;  height:18px; display:inline-block; line-height:18px;	background-repeat:no-repeat; color:#fff; vertical-align:middle;	cursor:pointer; margin-right:10px;}
.small-blue-check input[type=checkbox].css-checkbox:checked + label.css-label{background-position: 0 bottom;}
.small-blue-check label.css-label{-webkit-touch-callout:none; background:url(../images/fof-checkbox.png) no-repeat 0 0; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}

.common-btn-row{width:94%; float:left; padding:0 3% 1%; margin-top:40px;}
.fof-image-main-section .back-btn{background:#1d1d1d; float:left; border:0; color:#90c6ae; cursor:pointer; font-family:"Source Sans Pro","Helvetica","Arial",sans-serif;  font-size:15px;  font-weight:400; padding:9px 20px; text-transform:uppercase;}
.fof-image-main-section .back-btn:hover{color:#fff; background:#91c1aa;}
.fof-image-main-section .next-btn{background:#1d1d1d; border:0; float:right; color:#90c6ae; cursor:pointer; font-family:"Source Sans Pro","Helvetica","Arial",sans-serif;  font-size:15px;  font-weight:400; padding:9px 20px; text-transform:uppercase;}
.fof-image-main-section .next-btn:hover{color:#fff; background:#91c1aa;}

/* Start */
 #pxn8_canvas { width:auto !important; height: auto !important; position: relative; float:none!important;}
 #canvas_container { width: auto !important; height: auto !important;  position: static !important; }
 #pxn8_image_container { height: auto !important; width: auto !important; background:none!important;}
 #pxn8_canvas .warning { width: 100% !important; }
 ul.cursor-pointer > li{ background-color: transparent !important; }
 #pxn8_image_container #pxn8_image { width: auto !important; height: auto !important; }
 #pxn8_canvas > #pxn8_top_rect,#pxn8_bottom_rect,#pxn8_left_rect,#pxn8_right_rect,#pxn8_topleft_rect,#pxn8_topright_rect,#pxn8_bottomleft_rect,#pxn8_bottomright_rect { opacity: 0.76 !important; }
 #pxn8_canvas > div#pxn8_select_rect { opacity: 0 !important; }
 /* End */

 
 .position-relative { position: relative !important;  z-index: 21;  margin-top: 14.5%; }
 


.visibleHide{float:right; background:url(../images/radio-bg-v.png) no-repeat center 0; margin-top:5px;}
.visibleHide input[type=radio].css-checkbox {display:none;}
.visibleHide input[type=radio].css-checkbox + label.css-label {display:inline-block; line-height:18px;	font-size:12px; vertical-align:middle;	cursor:pointer;	color:#8a8a8a; width:auto;	text-align:center;	 padding-left: 25px; float:left;	}
.visibleHide input[type=radio].css-checkbox + label.css-label.visible{ padding-right:23px; padding-left:0;}
.visibleHide input[type=radio].css-checkbox:checked + label.css-label.visible {background:url(../images/radio-com-v.png) no-repeat right -17px; color:#fff;}
.visibleHide label.css-label.visible {background:url(../images/radio-com-v.png) no-repeat right 0; }
.visibleHide input[type=radio].css-checkbox:checked + label.css-label {background:url(../images/radio-com-v.png) no-repeat 0 -17px; color:#fff;}
.visibleHide label.css-label {background:url(../images/radio-com-v.png) no-repeat 0 0; }