/* CSS Document */
html{width:100%;background:#000 url(../img/bg-tile.png) 0px 0px repeat;margin:0;border:0;padding:0;}
body{background:#fff;width:810px;color:#000;margin:auto;border-left:7px solid #f7e400;border-right:7px solid #f7e400;margin-top:0;border-top:0;padding-top:69px;}
body.frame{width:810px;margin:auto;}
p{font-size:125%;line-height:1.4;font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;margin-bottom:16px;}
a{color:#000;}
a:hover{text-decoration:underline;}
.replace{text-indent:-9000px;}
.clearfix{clear:both !important;}
img{border:none;}
/* Header  ---------------------------------------------------------------------------------------- */
header{position:relative;height:260px;width:810px;}
/* Content  ---------------------------------------------------------------------------------------- */
div#content{position:relative;padding:0px 24px 0px 24px;width:762px;overflow:hidden;min-height:1400px;}
/* Footer  ---------------------------------------------------------------------------------------- */
footer{position:relative;height:26px;}


strong{font-weight:bold;}
h1,h2,h3,h4{font-family: 'Abril Fatface', cursive;}
h1{width:632px;height:173px;background:url(../img/grazia-fashion-fixer.png) 0px 0px no-repeat;margin:auto;margin-top:11px;}
h1.home{background:none;width:800px;height:165px;padding:4px 0px 0px 17px;}
h2{font-size:36px;}
h3{font-size:30px;font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;font-weight:bold;}
.grey{color:#828281;line-height:1.1;margin-bottom:8px !important;}
a#amazon{width:93px;height:20px;display:block;background:url(../img/amazon.png) 0px 0px no-repeat;margin:auto;}


/* Grazia */
div#grazia-header-wrap{width:100%;height:69px;position:absolute;left:0px;top:0px;background:url(../img/grazia-header-bg.png) 0px 0px repeat-x;z-index:2000;}
div#grazia-header{width:810px;margin:auto;}
a.grazia{width:112px;height:50px;float:left;background:url(../img/grazia.png) 0px 0px no-repeat;display:block;}
ul#grazia-social{float:right}
ul#grazia-social li{float:left;margin-left:17px;}
ul#grazia-social li a{width:44px;height:44px;display:block;background-position:0px 0px;background-repeat:no-repeat;margin-top:6px;}
a.grazia-facebook{background-image:url(../img/grazia-facebook.png);}
a.grazia-twitter{background-image:url(../img/grazia-twitter.png);}
a.grazia-instagram{background-image:url(../img/grazia-instagram.png);}



/* Home  ---------------------------------------------------------------------------------------- */

div#directions{float:left;width:760px;margin-right:26px;margin-bottom:16px;}
div#directions p{margin-bottom:0px;}
div.coat-selector{float:left;width:237px;height:235px;background-image:url(../img/coat-selector-bg.png);background-position:0px 0px;background-repeat:no-repeat;position:relative;margin:0px 24px 25px 0px;cursor:pointer;}
div.coat-selector:hover{background-image:url(../img/coat-selector-bg-hover.png);}
div.last{margin-right:0px;}
div.coat-selector img{position:absolute;left:0px;top:0px;}
div.coat-selector h4{position:absolute;left:0px;top:97px;width:237px;text-align:center;font-family: 'Abril Fatface', cursive;font-size:36px;}
div#swiffycontainer{width:790px;height:165px;}






div#spinner{width:801px;height:432px;background:url(../img/spinner-bg.png) 0px 0px no-repeat;position:relative;left:-15px;}
div#coat-category{position:absolute;left:36px;top:33px;width:178px;height:368px;}
div#coat-category img{position:absolute;left:-3px;top:0px;z-index:1;}
div#coat-category h4{width:178px;text-align:center;font-size:34px;background-image:url(../img/drag-it-here.png);background-position:0px 0px;background-repeat:no-repeat;height:112px;position:relative;top:139px;padding-top:4px;z-index:2;}
.orangeShadow{color:#fcb12c;text-shadow: 2px 2px 0 #000000;}
div#drag-area{float:left;position:relative;left:35px;top:33px;width:180px;height:368px;}
div#cover{position:absolute;left:216px;top:33px;z-index:100;width:540px;height:368px;z-index:200;}

ul#coats,ul#products,div#overlay{position:absolute;left:216px;top:33px;z-index:100;width:550px;height:368px;overflow:hidden;background:none;}
ul#products{display:none;}
div#overlay{display:none;background:url(../img/overlay.png) 0px 0px no-repeat;z-index:300;width:580px;}
.coat1,.coat2,.coat3,.product1,.product2,.product3{width:180px;height:3680px;position:absolute;top:-4081px;}
.coat1,.product1{left:0px;}
.coat2,.product2{left:184px;}
.coat3,.product3{left:368px;}
.product3{left:364px;}
.coatSelected{display:none;}
div#spinner-options{width:738px;margin:auto;margin-top:16px;height:140px;display:block;}
a.back{float:left;width:120px;font-family: 'Abril Fatface', cursive;font-size:24px;text-decoration:none;background:url(../img/btn-back.png) 0px 0px no-repeat;padding-left:27px;line-height:1.0;cursor:pointer;}
a.back-to-styles{float:left;width:240px;font-family: 'Abril Fatface', cursive;font-size:18px;text-decoration:none;background:url(../img/btn-back.png) 0px 0px no-repeat;padding-left:27px;line-height:1.0;cursor:pointer;height:24px;}
h4.select-favourite{width:100%;text-align:center;font-size:24px;margin-bottom:16px;}


p.Intro{width:770px;}

span.or{position:relative;top:-16px;}

p#positions{padding:10px;font-size:120%;}

ul.ui-helper-reset li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
ul.ui-helper-reset li span.ui-icon { float: left; }
ul.ui-helper-reset li span.count { font-weight: bold; }

div#slider{width:16200px;position:absolute;top:0px;left:20px;height:1200px;}
div#drag-and-drop{width:810px;position:absolute;left:0px;top:0px;}

a#spin{float:left;width:167px;height:62px;background:url(../img/btn-spin.png) 0px 0px no-repeat;display:none;margin-left:0px;cursor:pointer;}
a#btn-share,a#btn-popup,a#btn-buy{float:left;width:22px;height:22px;display:block;float:left;background:url(../img/btn-share.png) top right no-repeat;display:none;font-family: 'Abril Fatface', cursive;font-size:24px;text-decoration:none;padding-right:27px;width:148px;line-height:1.0;margin-left:98px;cursor:pointer;}
a#btn-popup{font-size:18px;}
a#btn-buy{clear:both;display:none;background:url(../img/buy-look.png) 0px 0px no-repeat;width:200px !important;height:52px;margin:0;padding:0;margin:auto;margin-left:250px;margin-top:20px;margin-bottom:20px;}

div.banner{clear:both;padding-left:15px;padding-top:40px;height:125px;}


a#close-window,a#close-banner{float:right;width:120px;font-family: 'Abril Fatface', cursive;font-size:24px;text-decoration:none;background:url(../img/close.png) 0px 0px no-repeat;padding-left:27px;line-height:1.0;cursor:pointer;}
div.close-window{width:810px;position:absolute;top:200px;left:50%;margin-left:-410px;z-index:1000;display:none;}
div#banner-popup{width:810px;height:125px;position:absolute;left:50%;top:250px;display:none;z-index:500;margin-left:-405px;background:#fff;display:none;padding:250px 0px 250px 0px;text-align:center;}
div.close-banner{width:810px;position:absolute;top:200px;left:50%;margin-left:-410px;z-index:1000;display:none;}


/* Results */

div#results{position:absolute;left:1698px;top:0px;width:790px;overflow:visible;height:1200px;}
div.your-details{height:160px;width:790px;}
div.your-details img{float:left;margin:0px 12px 0px 0px;}
div.your-coat{padding-left:78px;height:389px;width:693px;}
div.your-coat img{float:left;margin-right:42px;}
div.your-coat h3{float:left;font-family: 'Abril Fatface', cursive;font-size:30px;width:453px;border-bottom:1px solid #000;margin-bottom:16px;padding-bottom:8px;}
div.your-coat h4{float:left;font-size:24px;width:453px;line-height:1.0;margin-bottom:16px;}
div.your-coat p.price{font-family: 'Abril Fatface', cursive;font-size:48px;}
div.your-coat p.price span.from{font-size:24px;}
div.your-coat p.price span.pence{font-size:24px;position:relative;top:-15px;}
p.info{font-size:18px;line-height:1.1;}
a.click-to-buy{float:right;width:157px;height:42px;display:block;background:url(../img/buy-now.png) 0px 0px no-repeat;}
a#buy-your-key-look{width:231px;height:51px;display:block;background:url(../img/buy-your-key-look.png) 0px 0px no-repeat;margin:auto;margin-top:16px;nargin-bottom:16px;}
div.back-fashion-fixer{margin-bottom:43px;}
div.back-fashion-fixer a{position:relative;top:10px;}
p.fashion-fixer-breaker{/*border-left:1px solid #000;float:left;padding-left:16px;*/font-family: 'Abril Fatface', cursive;font-size:24px;padding-top:6px;padding-bottom:6px;margin:0px;text-align:center;}
div.breaker-old{clear:both;height:1px;background:#000;}
ul.more-products{}
ul.more-products li{float:left;border-right:1px solid #000;padding:0px 48px 0px 48px;width:157px;}
ul.more-products li h4{text-align:center;font-size:18px;margin-bottom:16px;font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;height:100px;}
ul.more-products li.last{border:none;height:90px;}
a.buy-now{width:157px;height:42px;background:url(../img/buy-now.png) 0px 0px no-repeat;display:block;margin:auto;}
a#spin-again,a.spin-again{clear:both;width:276px;height:60px;background:url(../img/spin-again.png) 0px 0px no-repeat;display:block;margin-top:32px;cursor:pointer;margin:auto;}
div.social{width:100%;padding:64px 20px 32px 20px;}



/* Form */
div#form-overlay{width:100%;height:1784px;background:#fff;position:absolute;left:834px;top:0px;display:none;z-index:400;opacity: 0.8;filter: alpha(opacity=80); /* For IE8 and earlier */}
div#form{width:790px;position:absolute;left:834px;display:block;z-index:500;background:#fff;padding:0px 10px 0px 10px;}
.highlight{background:#f7e400;padding:2px;}
div.breaker{height:5px;background:#404040;margin:12px 0px 39px 0px;}
div.formBg{background:#ecebeb;padding:8px 0px 8px 0px;margin-bottom:8px;}
div.formpad{width:80px;display:inline-block;}
.uppercase{text-transform:uppercase;margin-bottom:0px !important;}
.greyBg{background:#f7f6f6;padding:20px;text-align:center;position:relative;left:-20px;width:820px;}
.greyBg h2{font-size:24px;}
div.sharebox{clear:both;background:#ecebeb;padding:12px 20px 8px 20px;width:640px;margin-left:45px;text-align:center;}
div.sharebox p{margin-bottom:8px;}
a.facebook{width:155px;height:41px;display:inline-block;background:url(../img/btn-facebook.png) 0px 0px no-repeat;}
a.twitter{width:155px;height:41px;display:inline-block;background:url(../img/btn-twitter.png) 0px 0px no-repeat;}
.val{border:1px solid #ff0000 !important;}
div#thankyou{display:none;}







/* Responsive */

@media screen and (max-device-width: 800px), screen and (max-width: 800px) {

/* Grazia */
	div#grazia-header-wrap{display:none;}
	div#grazia-header{width:320px;margin:auto;}

}




@media screen and (max-device-width: 480px), screen and (max-width: 480px) {
	
	html{width:100%;background:none;}
	body{border:none;padding-top:0px;}
	div#content{height:3000px !important;}
	
	/* Grazia */
	div#grazia-header-wrap{display:none;}
	div#grazia-header{width:320px;margin:auto;}
	
	/* Home */
	body{width:320px;}
	header{width:320px;height:100px;;}
	h1,h2,h3,h4{line-height:1.0;margin-bottom:16px;}
	h2{margin-left:10px;}
	p{line-height:1.2;margin-bottom:16px !important;}
	div#content,div#directions{width:320px;margin:0;padding:0;}
	div#directions{width:300px;padding:0px 20px 0px 20px;;}
	h1{width:320px;height:88px;background:url(../img/grazia-fashion-fixer-mobile.png) 0px 0px no-repeat;}
	h1.home{width:320px;padding:0;}
	div.coat-selector{width:320px;margin:auto;background-position:30px 0px;margin-bottom:16px;}
	div.coat-selector img{left:30px;}
	div.coat-selector h4{width:100%;text-align:center;}
	div#swiffycontainer{width:400px;height:83px;}
	div#swiffycontainer div{overflow:auto !important;left:-30px;}
	
	/* Drag and drop */
	p.Intro{padding:0px 20px 0px 20px;}
	div#drag-and-drop{width:320px;}
	div#slider{left:0px;}
	div#spinner{width:320px;height:173px;background:url(../img/spinner-bg-mobile.png) 0px 0px no-repeat;position:relative;left:0px;}
	div#coat-category{position:absolute;left:14px;top:14px;width:71px;height:146px;}
	div#coat-category h4{width:62px;text-align:center;font-size:13px;background-image:url(../img/drag-it-here-mobile.png);background-position:0px 0px;background-repeat:no-repeat;height:112px;position:relative;top:66px;left:5px;padding-top:4px;z-index:2;}
	ul#coats,ul#products,div#overlay{position:absolute;left:87px;top:14px;z-index:100;width:550px;height:148px;overflow:hidden;background:none;}
	.coat1,.coat2,.coat3,.product1,.product2,.product3{width:72px;height:1472px;position:absolute;top:-4078px;}
	.coat1,.product1{left:0px;}
	.coat2,.product2{left:74px;}
	.coat3,.product3{left:148px;}
	.product3{left:148px;}
	ul#coats img,ul#products img,div#coat-category img{width:72px;height:144px;}
	div#overlay{background:url(../img/overlay-mobile.png) -3px -1px no-repeat;z-index:300;width:223px;}
	div#drag-area{left:15px;top:14px;width:70px;height:146px;}
	div#spinner-options{width:320px;margin:auto;margin-top:16px;height:300px;}
	h4.select-favourite{font-size:16px;}
	a.back-to-styles{float:none;width:190px;height:24px;display:block;margin:auto;}
	a#spin{float:none;display:none;margin:auto;margin-top:16px;margin-bottom:16px;width:167px !important;}
	a#btn-share,a#btn-popup,a#btn-buy{float:none;font-size:16px;padding-right:27px;width:148px;line-height:1.0;margin-left:98px;cursor:pointer;}
	a#btn-popup{width:190px;font-size:14px;margin:0;margin:auto;height:60px;}
	a#btn-buy{width:200px !important;margin:auto;margin-top:16px;padding-right:0px !important;}
	div.banner{display:none;}
	div.social{width:300px;padding:64px 0px 32px 0px;margin-left:10px;}
	
	/* Form */
	div#form{width:300px;overflow:hidden;position:absolute;top:0px;z-index:500;margin-left:0px;background:#fff;padding:0px 20px 0px 20px;}
	div.formpad{width:100%;display:block;height:8px;background:#fff;border-top:8px solid #ecebeb;}
	div.formBg{float:none;}
	div.sharebox{width:280px;text-align:center;margin:0 !important;}
	a.facebook,a.twitter{display:block;margin:auto;}
	
	
	/*a#spin-again{width:276px;height:60px;background:url(../img/btn-spin-again.png) 0px 0px no-repeat;display:block;margin-left:0px;cursor:pointer;}*/
	
	
	/* Results */
	div#results{width:320px;}
	div.your-details{width:300px;margin-left:10px;}
	div.your-details h3{font-size:24px;margin-left:10px;}
	div#results p.Intro{width:100%;padding:0px;}
	p.Intro{width:280px !important;}
	div.your-coat{padding-left:10px;height:389px;width:300px; align:center;padding:0px 20px 0px 20px;}
	div.your-coat img{float:none;margin:auto;}
	div.your-coat a{margin:0px 0px 0px 0px;margin:auto;margin-bottom:16px;}
	p.fashion-fixer-breaker{display:none;}
	div.back-fashion-fixer a.back{float:none !important;position:static;padding:0px 0px 16px 27px;display:block;margin-top:16px;margin-left:16px;}
	ul.more-products li{border-right:none;padding-left:78px;}
	div.mobilefix{height:120px;}
	ul.more-products{height:1400px;}
	ul.more-products li{float:none;}
	div.your-coat h3,div.your-coat h4{width:290px !important;}
	
	
	span.or{position:static;top:0px;display:block;padding-bottom:4px;}
	
}
































