body, html {padding:0; margin:0; height:100%; font-family:'Century Gothic', Arial, Sans-Serif; color: #333; }
html {overflow-y: scroll;}
form {display: block; min-height: 100%; height: 100%;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.3em 0;}
a:focus {outline: 0;}
a, a:visited {color: #333; text-decoration: underline;}

/* SMILE letters */
#smile {position:absolute;top:0;left:0;width:100%;display: none;}
.lt-ie8 #smile {z-index: 2;}
#myTable {max-width:1680px; min-width: 1200px; width:100%; position: relative; z-index: 2;}
#myTable td {font-size:170px;line-height:120px;color:#f4d22f;font-family:'Century Gothic', Arial, Sans-Serif;font-weight:bold;vertical-align:top;}

/* common page styling */
.page {width:960px;height: 100%; margin:0 auto; text-align: center; padding-top: 80px; display: none; /* faded in with jquery */}
.page p {margin: 0 0 1em 0; }
.page p:last-child {margin:0;}
.privacyPolicy {background-color: #eee; padding: 5px 10px; position: fixed; z-index: 10; bottom: 0; left: 0; color: #666; font-size: 11px; text-transform: lowercase; text-decoration: none; -moz-border-radius: 0 8px 0 0; -webkit-border-radius: 0 8px 0 0; border-radius: 0 8px 0 0;}

/* common subpage styling */
.subpage .page h1 {margin-bottom: 0.5em;}
.subpage .page p {max-width: 750px; margin: 0 auto 1em auto; line-height: 1.5; font-family: 'Droid Serif', Georgia, Serif; font-size: 20px; font-style: italic;}
.subpage .contentWrap {position: relative;}

/* frontpage logo */
#logoContainer {position: relative; z-index: 8000; float: right; margin-top: 15px; font-family: Arial, Sans-Serif; font-size: 12px; color: #666; text-transform: uppercase; text-align: center;}
#logoContainer ul {display: inline-block; height: 12px; list-style-type: none; margin: 0 0 15px 0; padding: 0; line-height: 1;}
#logoContainer li {display: inline-block; padding: 0 0 0 10px;}
.lt-ie8 #logoContainer li {display: inline;}
#logoContainer li:first-child { padding: 0 10px 0 0; border-right: 1px solid #666;}
#logoContainer a {text-decoration: none; color: #666;}
#logoContainer a:hover {text-decoration: underline;}
#logoContainer .logo {display: block;}

/* subpage logo */
#subpageHeader {display: none;}
.subpage #subpageHeader {width: 100%; display: block; text-align: center; position: absolute; top: 15px; left: 0; z-index: 10;}
#subpageHeader ul {height: 18px; list-style-type: none; padding: 0; line-height: 18px; font-size: 10px; text-transform: uppercase; display: inline-block;}
#subpageHeader li {padding: 0 10px; display: inline;}
#subpageHeader li * {vertical-align: middle; }
#subpageHeader li:first-child {border-left: 0;}
#subpageHeader li.sep {font-size: 10px; padding: 0; color: #666; font-family: Arial; line-height: 17px;}
#subpageHeader a {text-decoration: none; color: #666;}
.myths #subpageHeader li.sep, .myths #subpageHeader a {color: #999;}
#subpageHeader a:hover {text-decoration: underline;}

/* language menu and overlay */
#languageOverlay {display: none; padding: 50px 90px;}
.languageMenu {font-size: 24px; list-style-type: none;}
.languageMenu li {padding: 10px 0; text-align: center;}
.languageMenu a, .languageMenu a:visited {color: #333; text-decoration: none; text-transform: uppercase;}
.languageMenu .current a {color: #858593;}
.languageMenu a:hover {color: #FFDD00; font-weight: bold;}

/* previous/next navigation */
.nav { position:fixed;top:0;bottom:0; height:100%;width:47px; z-index:10000; }
#prev {left:0px;}
#next {right:0px;}
#prev .arrow {background-image:url(/gfx/smile/nav/previous.png);}
#next .arrow {background-image:url(/gfx/smile/nav/next.png);}
.navContainer { position:absolute; top:50%;margin-top:-47px;}
.navContainer a {display:block;width:47px;height:94px;font-size:0;}
.navContainer .bubble {width: 133px; height: 133px; display: none; position: absolute; top: -20px; background-color: #333; -webkit-border-radius: 66px; -moz-border-radius: 66px; border-radius: 66px; behavior: url(/css/smile/PIE.htc); color: #fff; font-size: 16px; text-decoration: none; text-align: center; font-weight: bold;}
.lt-ie8 .navContainer .bubble {width: 103px; height: 103px; padding: 30px 15px 0 15px;}
.navContainer .bubble p {display: table-cell; width: 133px; height: 133px; vertical-align: middle; text-align: center;}
.lt-ie8 .navContainer .bubble p {display: inline;}
.navContainer .bubble .intro {font-weight: normal;}
#prev .navContainer .bubble {right: -125px;}
#next .navContainer .bubble {left: -125px;}


/* ********************************************************** */
/* TOP LEFT NAVIGATION
/* ********************************************************** */

#contentNav {left:0px; z-index:10001;height:94px;top:10px;}
.frontpage #contentNav, .frontpage #prev {display: none;}
#contentNav a:focus {outline: 0;}
#contentNav .navContainer {top:0; margin-top:0;}
#contentNav .level0 a {background: transparent url(/gfx/smile/nav/content.png) left top no-repeat scroll; width:auto;line-height:94px;font-size:16px;text-transform:uppercase;font-weight:bold;color:#333333;text-decoration:none;text-indent:60px;position: relative; z-index: 1; white-space: nowrap;}
#contentNav .level0 a:hover, #contentNav .level0 a.active {text-decoration: underline;}
#contentNav .level0 a.active {color: #fff;}
.myths #contentNav .level0 a {color: #999;}
#contentNavOverlay {width: 578px; height: 578px; background-color: rgba(51,51,51,.95); position: absolute; top: -90px; left: -50px; -webkit-border-radius: 289px; -moz-border-radius: 289px; border-radius: 289px; display: none; z-index: 1000;}
.lt-ie9 #contentNavOverlay {background: transparent url(/gfx/smile/backgrounds/content-nav-overlay.png); behavior: url(/css/smile/PIE.htc);}
#contentNavOverlay ul {list-style-type: none; position: absolute; left: 196px; top: 154px;}
#contentNavOverlay li {padding: 10px 140px 10px 5px; overflow: hidden;}
#contentNavOverlay li a {color: #fff; text-decoration:none; font-size: 26px; white-space: nowrap; padding: 0 10px; float: left;}
#contentNavOverlay li:hover a {color: #333; background-color: #ffdd00;}
#contentNavOverlay .frontpageThumb {display: block; position: absolute; top: 165px; left: 110px;}
#contentNavOverlay .frontpage a {font-size: 16px; color: #fff; text-decoration: underline; font-weight: bold; text-transform: uppercase;}
#contentNavOverlay .feel-it a {color: #fff; text-transform: uppercase;}
#contentNavOverlay .sculptured a {color: #FFDD00; text-transform: capitalize; font-weight: bold;}
#contentNavOverlay .how-to a {font-family: 'Abril Fatface', Serif; color: #fff; text-transform: uppercase;}
#contentNavOverlay .evolution a {font-weight: bold; text-transform: uppercase; color: #ffdd00;}
#contentNavOverlay .truth-or-myth a {font-family: 'Abril Fatface', serif; color: #fff; text-transform: lowercase;}
#contentNavOverlay .pin-it a {font-family: 'Abril Fatface', Serif; color: #fff; text-transform: uppercase;}

/* ********************************************************** */
/* LIBRARY STYLES 
/* ********************************************************** */

.col {float: left;}
.size1of2 {width: 50%;}
.lt-ie9 .badge {behavior: url(/css/smile/PIE.htc);}
.separator {width: 5px; height: 30px; background: transparent url(/gfx/smile/smile-sprite.png) no-repeat; margin: 0 auto 25px auto;}
.badge {text-align: center;}
.badge a {-webkit-border-radius: 66px; -moz-border-radius: 66px; border-radius: 66px; display: inline-block; text-decoration: none; vertical-align: middle; margin: 0 auto; behavior: url(/css/smile/pie.htc);}
.badge a .inner {display: table-cell; width: 133px; height: 133px; vertical-align: middle; text-align: center;}
.badge a:hover {-webkit-border-radius: 77px; -moz-border-radius: 77px; border-radius: 77px;}
.badge .textWrap {vertical-align: middle;}

/* rotator for videos and images */
.mediaRotator {width: 800px; margin: 0 auto 60px auto; position: relative;}
.mediaRotator .mediaRotatorContent {width: 800px; height: 447px; margin: 0 auto;}
.mediaRotator .mediaRotatorContent .item {width: 800px; height: 447px; display: none; position: absolute; top: 0; left: 0; z-index: 0;}
.mediaRotator .video {background-color: #333; padding: 20px;}
.mediaRotator .bottomLine { width: 932px; height: 6px; background: transparent url(/gfx/smile/top-shadow.png) bottom left no-repeat; margin: -6px 0 0 -62px;}
.mediaRotator .thumbnails {width: 960px; padding-top: 10px; margin-left: -80px; background: url(/gfx/smile/backgrounds/menuBackground.png) top center repeat-y; text-align: center;}
.mediaRotator .thumbnails ul {list-style-type: none; display: inline-block;}
.lt-ie8 .mediaRotator .thumbnails ul {display: inline;}
.mediaRotator .thumbnails li {width: 130px; height: 155px; float: left; margin-left: 5px;}
.mediaRotator .thumbnails li:first-child {margin-left: 0;}
.mediaRotator .thumbnails li a {height: 115px; display: block; background: transparent url(/gfx/smile/backgrounds/thumb-bg-small.png) bottom left no-repeat; color: #333; text-decoration: none; }
.mediaRotator .thumbnails li.videoItem {width: 188px; position: relative;}
.mediaRotator .thumbnails li.videoItem a {background: transparent url(/gfx/smile/backgrounds/thumb-bottom-shadow-wide.png) bottom left no-repeat;}
.mediaRotator .thumbnails li.videoItem .icon, .box.video .icon {width: 44px; height: 44px; background: transparent url(/gfx/smile/play-icon.png) no-repeat; position: absolute; top: 35px; left: 73px;}
.mediaRotator .thumbnails li .caption  {font-family: 'Droid Serif', Serif; font-size: 14px; line-height: 1.2; margin-top: 10px;}
.mediaRotator .thumbnails li img {display: block;}
.mediaRotator .thumbnails ul a .thumb {border: 5px solid #f3f3f3; display: block;}
.mediaRotator .thumbnails ul a:hover .thumb, .mediaRotator .thumbnails ul .active .thumb {border: 5px solid #333;}
.videoWrap {width: 720px; height: 405px; overflow: hidden; border: 21px solid #333; margin: 0 auto;}
.videoWrap iframe {display: block; width: 720px; height: 405px; overflow: hidden; -moz-box-sizing: content-box; box-sizing: content-box; position: relative; z-index: 0;}

/* frame for thumbnails */
.box {width:110px;height:110px;position:relative;display:block;float:left;margin-left:10px;margin-bottom:10px;}
.box:first-child {margin-left:5px;}
.box:after { -webkit-box-shadow: 0 0 2px 2px #666; -moz-box-shadow: 0 0 2px 2px #666; box-shadow: 0 0 2px 2px #666; height:2px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; behavior: url(/css/smile/PIE.htc); position: absolute; bottom:0; left:4px; right:4px; display:block; content:""; z-index:-1;}
.box a {display:block; width:100px; height:100px; border:solid 5px #f3f3f3; background-image: url(/gfx/smile/backgrounds/box-bg.png);}
.box a:hover, .box a.active {border:solid 5px #ffdd00;}
.box.wide {width:190px;}
.box.wide a {width:180px;}
.box.video { width: 188px; position: relative;}
.box.video a { width: 178px; }

/* social links */
.socialBar {height: 32px; float: right; margin-top: 20px; overflow: hidden;}
.socialBar a {padding: 0; margin-left: 3px;}
.lt-ie8 .socialBar a {display: block;}
.socialBar a:first-child {margin-left: 0; padding-left: 0;}
.socialBar a:hover {background-color: transparent !important;}
.socialWrap .socialBar {display: inline-block; float: none; margin-top: 0; margin-bottom: 10px;}
.lt-ie8 .socialWrap .socialBar {display: inline;}
.pin-it-button, .addthis_button_pinterest {display: block; width: 32px; height: 32px; background: transparent url(/gfx/smile/pinterest-32x32.png) no-repeat; float: left;}
.addthis_button_pinterest span {display: none;}
.pin-it-button:hover {background-position: 0 -32px;}
.socialBar a.weibo_button {display: block; width: 32px; height: 32px; background: transparent url(/gfx/smile/weiboicon.png) no-repeat; float: left;}
.socialBar a.weibo_button:hover {background-position: 0 -32px;}
.socialBar div {margin: 0 auto;}
.socialBar .weiboContainer{ width: 32px;}
/* ********************************************************** */
/* FRONTPAGE 
/* ********************************************************** */

#frontpageModeSliderWrap {width: 445px; position: fixed; bottom: 0;}
.lt-ie8 #frontpageModeSliderWrap {margin-left: -72px;}
.frontpage .content { width: 960px; height: auto; position: fixed; bottom: 50px; text-align: left;}
.frontpage .page {padding-top: 0;}
.lt-ie8 .frontpage .content {margin-left: -433px; margin-right: -433px;}
.frontpage .content .textCol {width: 360px; position: relative; z-index: 10;}
.frontpage .content .modelCol {width: 300px; text-align: center;}
.frontpage .content .rightCol {width: 300px; text-align: right; position: relative; left: 300px;}
.lt-ie8 .frontpage .content .rightCol {left: 0;}
.frontpage .content .featuredBox {margin-bottom: 30px;}
.frontpage .content a {color: #333; text-decoration: none; display: inline-block;}
.frontpage .content a:hover {color: #333; background-color: #ffdd00;}
.frontpage .content h2 {line-height: 1; margin: 0 0 5px 0;}
.frontpage .content p {font-family: 'Droid serif', Georgia, serif;font-size: 18px; color: #666;}
.frontpage .content .feel-it {margin-bottom: 40px;}
.frontpage .content .feel-it h2 {font-size: 34px; text-transform: uppercase; font-weight: normal;}
.frontpage .content .sculptured h2, .frontpage .content .sculptured h2 a {text-transform: capitalize; color: #FFDD00; font-size: 40px;  letter-spacing: -2px;}
.frontpage .content .sculptured h2 a:hover {color: #333;}
.frontpage .content .how-to {margin-bottom: 0;}
.frontpage .content .how-to h2 {font-family: 'Abril Fatface', Georgia, serif; text-transform: uppercase; font-size: 24px; font-weight: normal;}
.frontpage .content .how-to p {font-style: italic;}
.frontpage .content .evolution {margin-bottom: 50px;}
.frontpage .content .evolution h2, .frontpage .content .evolution h2 a {color: #FFDD00; text-transform: uppercase; font-size: 34px;}
.frontpage .content .evolution h2 a:hover {color: #333;}
.frontpage .content .truth-or-myth {margin-bottom: 40px;}
.frontpage .content .truth-or-myth h2 {font-family: 'Abril Fatface', Georgia, serif; text-transform: lowercase; font-size: 34px; margin-bottom: 3px; font-weight: normal;}
.frontpage .content .truth-or-myth p {font-style: italic;}
.frontpage .content .pin-it {margin-bottom: 0;}
.frontpage .content .pin-it h2 {font-family: 'Abril Fatface', Georgia, serif; text-transform: uppercase; font-size: 24px; font-weight: normal;}

.modelContainer {width: 400px !important; position: relative; /* margin: 0 auto;*/}
.modelContainer .model, .modelContainer .modelShadow { max-height: 100%; position: absolute; top: 0; left: 0;}
.modelContainer .model {z-index: 3;}
.modelContainer .modelShadow {z-index: 1;}
.modelContainer img {opacity: 0; filter: alpha(opacity=0);}


/* ********************************************************** */
/* FEEL IT TO BELIEVE IT 
/* ********************************************************** */

body.feelIt {background: transparent url(/gfx/smile/2013/backgrounds/bg-feelItBelieveIt.jpg) top right fixed no-repeat;}
.feelIt .subPageLogo {display: block; width: 95px; margin: 0 auto 50px auto;}
.feelIt .page {padding-top: 80px;}
.feelIt h1 {font-size: 80px; text-transform: uppercase; font-weight: normal;}
.feelIt .badge {width: 155px; height: 155px; line-height: 155px; position: absolute; bottom: -16px; right: -26px; font-family: 'Berkshire Swash', serif; font-size: 24px; text-align: center; }
.feelIt .badge a {width: 133px;  background: #FFDD00; text-decoration: none; color: #333; line-height: 0.85; display: inline-block; vertical-align: middle; margin: auto; position: relative;}
.lt-ie8 .feelIt .badge a {padding-top: 38px; height: 95px;}
.feelIt .badge a:hover {border: 11px solid #FFDD00;}

/* ********************************************************** */
/* COLLECTION 
/* ********************************************************** */

body.collectionStart {background: #fff url(/gfx/smile/backgrounds/bg-collectionFrontpage.jpg) no-repeat top center; padding-bottom: 190px;}
.collectionStart .box a:hover {border:solid 5px #ffdd00;}
.collectionStart.subpage h1 {font-size: 45px; color: #ffdd00; text-transform: uppercase; line-height: 1.2; font-weight: normal; margin-bottom: 70px;}
.collectionStart h2 {font-size: 24px; font-weight: normal; color: #666;}
.collectionStart h2 .inlineLogo {padding-bottom: 3px;}
.collectionStart h2 .push {padding-left: 15px;}
.collectionStart .socialBar {width: 117px; float: none; margin: 15px auto 0 auto;}
.collectionStart .page {padding-top: 250px;}
.collectionStart .scalableImage {position: absolute; top: 5%; right: 10%; max-height: 99%; max-width: 99%; z-index: -1;}
.collectionStart .thumbnailWrap {position: fixed; bottom: 0; left: 0; width: 100%; z-index: 30; background-image: url(/gfx/smile/backgrounds/white-transparent.png); text-align: center;}
.thumbnailWrap .bottomLine {background: transparent url(/gfx/smile/top-shadow.png) center top no-repeat scroll; height: 6px; position: relative; top: -6px;}
.collectionStart .thumbnails {padding: 20px 0; display: inline-block;}
.lt-ie8 .collectionStart .thumbnails {display: inline;}

/* SINGLE SHOE IN COLLECTION */
body.singleShoe {background: transparent url(/gfx/smile/backgrounds/bg-collectionSubpage.jpg) top right fixed no-repeat;}
.singleShoe .page {padding-top: 100px;}
.singleShoe h1 {font-size: 30px; color: #666; text-transform: uppercase; font-weight: normal;}
.singleShoe .imageCol, .singleShoe .shoeRow .col:first-child {width: 500px;}
.singleShoe .textCol p {width: 395px; font-family: 'Century Gothic', Arial, sans-serif; color: #666; font-size: 16px; font-style: normal; line-height: 1.3;}
.singleShoe .shoeRow, .singleShoe .shoeRow .col {height: 450px;}
.singleShoe .shoeRow .textCol {width: 422px; margin-left: 38px;}
.singleShoe .thumbnails {display: inline-block;}
.lt-ie8 .singleShoe .thumbnails {display: inline;}
.singleShoe .thumbnails .thumb360 .text {display: block; width: 43px; height: 16px; background: transparent url(/gfx/smile/thumb-360.png) no-repeat; margin: -30px auto 0 auto; position: relative; z-index: 10;}
.singleShoe .thumbnailWrap {text-align: center;}
.shoeWrap {width: 100%; height: 450px; position: relative;}
.shoeWrap .shoe {width: 100%; height: 450px; display: none; position: absolute; top: 0; left: 0;}
.shoeWrap .shoe img {max-height: 450px; width: auto;}
.shoeWrap .shoe .badge {width: 94px; height: 72px; padding-top: 22px; background-color: #333; -webkit-border-radius: 47px; -moz-border-radius: 47px; border-radius: 47px; position: absolute; top: -10px; right: 125px;}
.shoeWrap .shoe .badge p {font-size: 14px; font-style: italic; color: #fff; line-height: normal; margin: 0 0 5px 0;}

.singleShoe .linkRow {margin: 30px 0; text-align: left;}
.singleShoe .linkRow .socialCol {width: 305px; position: relative;}
.singleShoe .linkRow .socialCol .socialBar {float: left; margin-top: 0;}
.singleShoe .linkRow .collectionCol {width: 340px;}
.singleShoe .linkRow .lastCol {width: 315px; position: relative;}

.singleShoe .badgeWrap {width: 250px; height: 165px; position: absolute; bottom: 11px; right: 0;}
.singleShoe .badgeWrap .badge {position: absolute; text-align: center;}
.singleShoe .badgeWrap .badge a {display: block; text-decoration: none; color: #333;}
.singleShoe .badgeWrap .badge.webshop {width: 155px; height: 155px; line-height: 155px; font-family: 'Abril Fatface', Serif; font-size: 35px; text-transform: uppercase; top: -6px; left: -6px; z-index: 1;}
.singleShoe .badgeWrap .badge.webshop a {width: 133px; /*height: 99px; padding-top: 34px;*/ background-color: #ffdd00; -webkit-border-radius: 66px; -moz-border-radius: 66px; border-radius: 66px; line-height: 24px; margin: auto; display: inline-block; vertical-align: middle; z-index: 0;}
.lt-ie8 .singleShoe .badgeWrap .badge.webshop a {padding-top: 24px; height: 109px; line-height: normal !important; }
.singleShoe .badgeWrap .badge.webshop a:hover {border: 11px solid #ffdd00; -webkit-border-radius: 77px; -moz-border-radius: 77px; border-radius: 77px;}
.singleShoe .badgeWrap .badge.webshop a .firstLine {font-size: 35px; line-height: 1;}
.singleShoe .badgeWrap .badge.webshop a .secondLine {font-size: 24px;}
.singleShoe .badgeWrap .badge.howToStyle {top: -20px; right: 0; font-family: 'Droid Serif', Serif; font-size: 14px; font-style: italic; color: #000; line-height: 1.2;}
.singleShoe .badgeWrap .badge.howToStyle a {width: 95px; padding: 15px; background-color: #fff; color: #000; text-decoration: underline; border-left: 1px solid #f4f4f4; border-right: 1px solid #f4f4f4; border-top: #f4f4f4; border-radius: 0; behavior: none;}
.lt-ie8 .singleShoe .badgeWrap .badge.howToStyle a {border-bottom: 1px solid #f4f4f4;}
.singleShoe .badgeWrap .badge.howToStyle a:hover {background-color: #ed606b;}
.singleShoe .badgeWrap .badge.howToStyle a:after { -webkit-box-shadow: 0 0 2px 2px #666; -moz-box-shadow: 0 0 2px 2px #666; box-shadow: 0 0 2px 2px #666; height:2px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; position: absolute; bottom:0; left:4px; right:4px; display:block; content:""; z-index:-1;}
.singleShoe .badgeWrap .badge.storeLocator {bottom: 5px; right: 49px; font-family: 'Abril Fatface'; font-size: 20px; text-transform: lowercase;}
.singleShoe .badgeWrap .badge.storeLocator a {width: 82px; height: 82px; /*height: 65px; padding-top: 17px;*/ background-color: #999; -webkit-border-radius: 41px; -moz-border-radius: 41px; border-radius: 41px; color: #fff;}
.singleShoe .badgeWrap .badge.storeLocator a .inner {width: 82px; height: 82px;}
.singleShoe .badgeWrap .badge.storeLocator a:hover {background-color: #333;}
.lt-ie9 .singleShoe .badgeWrap .badge.storeLocator a {behavior: url(/css/smile/PIE.htc);}

.singleShoe .sizeRangeMenu, .singleShoe .linkRow .lastCol .shoeSizes {float: left; font-family: 'Droid Serif', Serif; font-size: 13px; color: #666; line-height: 33px;}
.singleShoe .sizeRangeMenu {list-style-type: none; text-transform: uppercase; margin-right: 25px;}
.singleShoe .sizeRangeMenu li {float: left;}
.singleShoe .sizeRangeMenu .sep {padding: 0 3px;}
.singleShoe .sizeRangeMenu a {color: #666; text-decoration: none;}
.singleShoe .sizeRangeMenu .current a, .singleShoe .sizeRangeMenu a:hover {text-decoration: underline;}
.shoeSizes .label {float: left; margin-right: 10px;}
.shoeSizes .size {display: none; float: left;}

.singleShoe .imageCol.videoCol {width: 100% !important;}
.singleShoe .videoWrap {margin: 0 auto;}

.view360 {position: relative;}
.img360 {width: 500px; height: 500px;}
.view360 .nav { background-position: 0 50%; background-repeat: no-repeat; cursor: pointer; width: 38px; height: 100%; position: absolute; top: 0; z-index: 30;}
.view360 .turnLeft { background-image: url(/gfx/smile/nav/360_nav_left.png); left: -38px;}
.view360 .turnRight {background-image: url(/gfx/smile/nav/360_nav_right.png); right: -38px;}

.collectionCol {position: relative;}
.fullCollection, .fullCollection:hover, .fullCollection:visited {font-size: 16px; color: #333; text-decoration: none; text-transform: uppercase; font-weight: bold; line-height: 33px;}
.fullCollection .icon {display: block; width: 33px; height: 33px; background: transparent url(/gfx/smile/smile-sprite.png) 0 -60px no-repeat; float: left; margin-right: 7px;}
.singleShoe .thumbnailsOverlayWrap {position: absolute; top: 580px; left: 0; width: 100%; text-align: center; z-index: 10; display: none;}
.singleShoe .thumbnailsOverlay {display: inline-block; z-index: 2; background: #000;}
.singleShoe .thumbnails {margin: 0 5px; display: inline-block;}
.singleShoe .thumbnails .box {margin: 10px 5px;}
.lt-ie8 .singleShoe .thumbnails {position: relative; z-index: 1000; display: inline;}


/* ********************************************************** */
/* TRUTH & MYTHS 
/* ********************************************************** */

body.myths {background: transparent url(/gfx/smile/backgrounds/myths/shoe.jpg) center center no-repeat fixed;}
.myths .page {width: auto; height: 100%; margin: 0; padding-top: 0;}
.mythbox .intro { margin: 0 auto; margin-top: 100px; text-align: center;}
.mythbox .intro p {font-family:'Droid Serif', serif; font-size:20px; color: #ffffff; max-width: 780px; margin: 0 auto 35px auto; line-height: 1.5;}
.mythbox .intro h1,.mythbox .intro h2 {font-weight: normal;}
.mythbox .intro h1 {font-family: 'Droid Serif'; font-size: 25px; color: #fff; font-style: italic; margin-bottom: 35px;}
.mythbox .intro h2 {font-family: 'Abril Fatface'; font-size: 80px; color: #ffdd00; line-height: 0.8; margin-bottom: 20px;}
.mythbox .intro .divider {margin: 0 auto 15px auto; line-height: normal;}

.mythbox { width: 100%; min-height: 550px; position: relative; text-align: left;}
.mythbox .contentWrap {width: 960px; min-height: 550px; margin: 0 auto; position: relative; padding-bottom: 30px;}
.mythbox .topbar { display: none;font-size: 0;height: 0;width: 100%;overflow: hidden;margin-top: 3px;margin-bottom: 3px;}
.mythbox .myth { width: 960px; margin: 0 auto; padding-top: 90px; margin-bottom: 30px; color: #333; position: relative;}
.mythbox h1.bubble {display: inline-block; background-color: #333; font-family: 'Droid Serif, serif'; font-style: italic; font-weight: bold; font-size: 40px; color: #fff; width: 82px; height: 82px; line-height: 82px; text-align: center; -webkit-border-radius: 41px; -moz-border-radius: 41px; border-radius: 41px; behavior: url(/css/smile/PIE.htc); margin-top: -28px; position: relative;}
.mythbox .myth h2 {font-family: 'Abril Fatface', serif; font-size: 30px; margin: 0; line-height: 1.1; margin-bottom: 20px; font-weight: normal;}
.mythbox .myth p {font-family: 'Droid Serif', serif; font-size:16px; line-height: 1.2; margin: 0 0 20px 0;}
.mythbox .myth .divider {margin: 15px 0;}
.mythbox .myth.push { position: relative; left: 100px;}
.mythbox .myth .socialBar {float: left; margin-top: 0;}

.mythbox .badge {width: 155px; height: 155px; position: absolute; top: -66px; right: 0; text-align: center; z-index: 10;}
.mythbox .badge a { width: 133px; height: 133px; background-color: #ED606B; display: inline-block; vertical-align: middle; text-transform: lowercase; font-family: 'Berkshire Swash'; font-size: 24px; color: #ffdd00; text-decoration: none; text-align: center; line-height: normal; }
.mythbox .badge a .inner {width: 133px; height: 133px; display: table-cell; vertical-align: middle; text-align: center;}
.lt-ie8 .mythbox .badge a {width: 93px; height: 90px; padding: 43px 20px 0 20px;}
.mythbox .badge a:hover {border: 10px solid #ED606B;}

.mythbox .left, .mythbox .right {float: left;}
.mythbox .left {width: 82px; padding-right: 20px;}
.mythbox .right {width: 600px;}

.mythbox .blurb {width: 960px; margin: 30px auto -30px auto; text-align: center; position: relative;}
.mythbox .blurb p {font-size: 40px; font-style: italic; color: #ED606B; line-height: 1;}

.mythbox1 .contentWrap {padding-bottom: 20px; overflow: hidden;}
.mythbox2 {background-color: #fff;}
.mythbox3 .blurb p {color: #fff;}
.mythbox4 {overflow: hidden; background-color: #fff;}
.mythbox5 {background-color: rgba(102,102,102,.9);}
.lt-ie9 .mythbox5 {background: url(/gfx/smile/backgrounds/1x1_grey_90.png);}
.mythbox.mythbox5 .myth { color: #fff;}
.mythbox5 .blurb p {color: #ffdd00;}
.mythbox6 {min-height: 700px; background-color: #fff;}

.mythbox .image {position: absolute;}
.mythbox1 .image {bottom: 0; right: 0;}
.mythbox2 .image {bottom: 0; left: -180px;}
.mythbox3 .image {right: -150px; top: 0;}
.mythbox4 .image {top: 0; right: 0;}
.mythbox5 .image {bottom: 0; right: -145px;}
.mythbox6 .image {top: 0; left: -220px;}

/* dark */
.mythbox.dark { min-height: 500px; background-color: rgba(0,0,0,.83);}
.lt-ie9 .mythbox.dark {background: url(/gfx/smile/backgrounds/1x1_black_83.png);}
.mythbox.dark .myth h1 {font-family: 'Droid Serif'; font-size: 25px; color: #fff; font-style: italic; margin: 0 0 30px;}
.mythbox.dark .myth h2 {font-family: 'Abril Fatface'; font-size: 80px; color: #ffdd00; line-height: 0.8;}

/* yellow */
.mythbox.yellow { background-color: rgba(255,221,0,.95);}
.lt-ie9 .mythbox.yellow {background: url(/gfx/smile/backgrounds/1x1_yellow_95.png);}


/* ********************************************************** */
/* QUIZ
/* ********************************************************** */

.quiz {background: #f0f0f0 url(/gfx/smile/backgrounds/bg-quiz.jpg) top center no-repeat; background-attachment: fixed;}
.quiz .page {padding-top: 90px; text-align: left;}
.quiz .leftCol, .quiz .rightCol {width: 480px; float: left;}
.quiz .rightCol {padding-left: 80px; width: 400px;}
.quiz .leftCol {padding-top: 140px;}
.quiz .separator.horizontal {width: 30px; height: 5px; background-position: -30px 0;}

.quiz .intro {margin-bottom: 45px;}
.quiz .intro h2 {font-family: 'Droid Serif'; font-size: 30px; font-weight: bold; font-style: italic; margin-bottom: 30px;}
.quiz .intro p {font-style: italic; font-size: 25px; color: #EC5F6B; line-height: 1.2; margin-bottom: 40px;}

.quiz .badge {width: 274px; height: 274px; line-height: 274px; background-color: #ED606B; -webkit-border-radius: 137px; -moz-border-radius: 137px; border-radius: 137px; color: #fff; text-align: center; behavior: url(/css/smile/PIE.htc); position: fixed; margin-left: 115px; }
.lt-ie8 .quiz .badge {behavior: none; background: transparent url(/gfx/smile/ie-bubble-sprite.png) 0 -120px no-repeat;}
.quiz .badge .badgeContent {display: table-cell; width: 274px; height: 274px; vertical-align: middle; text-align: center;}
.lt-ie8 .quiz .badge .badgeContent {margin-top: 50px;}
.quiz .badge .tagline {font-family: 'Droid Serif'; font-size: 20px; font-weight: bold; font-style: italic;}
.quiz .badge h1 {font-family: 'Berkshire Swash'; font-size: 60px; font-weight: normal; line-height: 0.9;}

.quiz .questions {list-style-type: none;}
.quiz .questions li {margin-bottom: 85px;}
.quiz .questions h3 {font-family: 'Droid Serif'; font-size: 70px; color: #ED606B; font-weight: bold; font-style: italic; margin: 0;}
.quiz .questions p {width: 365px; margin: 0 0 10px 0; font-size: 16px; line-height: 1.2;}

.quiz .questions .btnRow {height: 155px; line-height: 155px; text-align: center; position: relative;}
.quiz .questions .btn {width: 133px; height: 133px; line-height: 1; display: inline-block; vertical-align: middle; background-color: #333; font-family: 'Berkshire Swash'; font-size: 24px; text-transform: lowercase; color: #fff; text-align: center; border: none; -webkit-border-radius: 66px; -moz-border-radius: 66px; border-radius: 66px; behavior: url(/css/smile/PIE.htc); text-decoration: none;}
.quiz .questions .btn .inner {display: table-cell; width: 133px; height: 133px; vertical-align: middle; text-align: center;}
.quiz .questions .btn:hover {border: 11px solid #333; -webkit-border-radius: 77px; -moz-border-radius: 77px; border-radius: 77px;}
.lt-ie8 .quiz .questions .btn {height: 83px; padding-top: 50px; behavior: none; background: transparent url(/gfx/smile/ie-bubble-sprite.png) 0 -410px no-repeat;}
.lt-ie8 .quiz .questions .btn:hover {border: none;}

.quizSliderWrap {width: 375px; margin-left: 70px;}
.quizSliderBg {width: 289px; height: 33px; background: transparent url(/gfx/smile/smile-sprite.png) 0 -120px no-repeat; margin-top: 55px; margin-left: 43px; position: relative;}
.quizSliderBg .tooltip {position: absolute; max-width: 140px; height: auto; padding: 10px; bottom: 55px; left: -58px; background: #ED606B; display: none; color: #fff; -webkit-border-radius: 15px; border-radius: 15px; behavior: url(/css/smile/PIE.htc); text-align: center; z-index: 1;}
.quizSliderBg .tooltip_2 {left: -3px;}
.quizSliderBg .tooltip_3 {left: 68px;}
.quizSliderBg .tooltip_4 {left: 136px;}
.quizSlider {width: 256px; position: relative;}
.ui-state-default.ui-slider-handle {width: 34px; height: 33px; display: inline-block; background: transparent url(/gfx/smile/smile-sprite.png) 0 -180px no-repeat; outline: none; position: absolute; top: -10px; left: -10px; z-index: 10; }
.sliderRange {text-transform: lowercase;}
.sliderRange .min {width: 100px; float: left; text-align: center;}
.sliderRange .max {width: 100px; float: right; text-align: center;}

#quizResult {display: none; width: 668px !important; padding: 50px 0 30px 0; overflow: hidden;}
#quizResult .leftCol, #quizResult .rightCol {float: left; padding: 0;}
#quizResult .leftCol {width: 180px; text-align: center;}
#quizResult .rightCol {width: 458px; padding-right: 30px;}

#quizResult .resultSymbol {}
#quizResult .resultSymbol img {margin: 10px auto 0 auto;}

#quizResult .badge {width: 91px; height: 91px; line-height: 90px; background-color: #666; font-family: 'Abril Fatface'; text-transform: uppercase; text-decoration: none; position: absolute; top: 10px; right: -77px; z-index: 1; margin: 0;}
.lt-ie9 #quizResult .badge {behavior: none; background: transparent url(/gfx/smile/ie-bubble-sprite.png) no-repeat;}
#quizResult .badge .wrap {line-height: 0.9; vertical-align: middle; display: inline-block;}
#quizResult .badge .firstLine {font-size: 22px;}
#quizResult .badge .secondLine {font-size: 16px;}

#quizResult .rightCol p {font-size: 16px; line-height: 1.5;}
#quizResult .headingWrap {border-bottom: 1px solid #000; padding-bottom: 20px; margin-bottom: 20px;}
#quizResult .headingWrap h3 {font-size: 24px; font-weight: normal; margin: 0;}
#quizResult .contentWrap {border-bottom: 1px solid #000; padding-bottom: 25px;}
#quizResult .socialBar {float: none; margin-top: 20px;}

#quizResult .recommendedShoe {padding-top: 30px;}
#quizResult .shoeImageWrap {width: 110px; position: relative; float: left;}
#quizResult .recommendedShoe .box {float: none; margin-bottom: 10px; margin-left: 0; position: relative;}
#quizResult .recommendedShoe .box a {border-color: #000;}
#quizResult .recommendedShoe .box .bottomShadow {width: 111px; height: 11px; background: transparent url(/gfx/smile/bottom-shadow-short.png) no-repeat; position: absolute; bottom: -11px; left: 0;}
#quizResult .recommendedShoe p {margin-bottom: 30px; font-style: italic; margin-bottom: 20px; line-height: 1.1;}
#quizResult .recommendedShoe .more {color: #333; font-style: italic; margin: 0 auto;}

#quizResult .recommendedShoe .textCol {width: 192px; float: left; padding-left: 104px; font-family: 'Droid Serif'; padding-top: 10px;}

/* ********************************************************** */
/* HOW TO STYLE THE SHOE
/* ********************************************************** */

.howto {background: #fff url(/gfx/smile/backgrounds/HowToStyle1300x800b.jpg) top right no-repeat; background-attachment: fixed;}
.howto .page h1 {font-family: 'Abril Fatface'; text-transform: uppercase; font-size: 80px; font-weight: normal; margin-bottom: 20px;}
.howto .page .intro p {font-family: 'Century Gothic', Arial, sans-serif; font-style: normal; font-size: 16px; line-height: 1.5;}

.stylingOptionsWrap {text-align: left; position: relative;}
.stylingOptionsWrap .badge {width: 155px; height: 155px; line-height: 155px; text-align: center; position: absolute; top: -77px; right: 0;}
.stylingOptionsWrap .badge a {display: inline-block; width: 133px; height: 133px; line-height: 133px; background: #ED606B; font-family: 'Berkshire Swash'; font-size: 30px; text-decoration: none;}
.lt-ie8 .stylingOptionsWrap .badge a {padding-top: 30px; height: 103px;}
.stylingOptionsWrap .badge a .wrap {display: inline-block; vertical-align: middle;}
.stylingOptionsWrap .badge a span {display: block; line-height: 1;}
.stylingOptionsWrap .badge a span.inner {display: table-cell;}
.stylingOptionsWrap .badge a .line1 {color: #fff; line-height: 0.7;}
.stylingOptionsWrap .badge a .line2 {color: #666; line-height: 0.5; position: relative; z-index: 1;}
.stylingOptionsWrap .badge a .line3 {color: #fff; line-height: 0.5; position: relative; z-index: 2;}
.stylingOptionsWrap .badge a .line4 {font-family: 'Century Gothic', Arial, sans-serif; font-size: 14px; color: #666; padding-top: 15px; font-weight: bold;}
.stylingOptionsWrap .badge a:hover {border: 11px solid #ED606B;}

.stylingOptionsList {list-style-type: none;}
.stylingOptionsList li {margin-bottom: 130px;}
.stylingOptionsList li .textCol {text-align: right;}
.stylingOptionsList li:nth-child(2n+1) .textCol { text-align: left;}

.stylingOptionsList .imageCol {width: 560px; height: 500px; position: relative; float: left; text-align: center;}
.stylingOptionsList .odd .imageCol {float: right;}
.stylingOptionsList .imageCol .styleImage {position: relative;}
.stylingOptionsList .imageCol .shoeImage {position: absolute; z-index: 1; bottom: 0; left: 0;}
.stylingOptionsList .imageCol .tipWrap {position: absolute; z-index: 2;}
.stylingOptionsList .imageCol .tip {width: 170px; background: #333; padding: 15px; behavior: url(/css/smile/PIE.htc);}
.stylingOptionsList .imageCol .tipWrap1 {top: 60px; left: 0;  border-right: 3px solid #333; padding-bottom: 80px;}
.stylingOptionsList .imageCol .tipWrap2 {top: 15px; left: 280px;  border-top: 3px solid #333; padding-left: 80px;}
.stylingOptionsList .imageCol .tipWrap3 {top: 370px; left: 356px;  border-left: 3px solid #333; padding-top: 80px;}
.stylingOptionsList .imageCol .tipWrap1 .tip {-webkit-border-radius: 15px 0 0 0; border-radius: 15px 0 0 0;}
.stylingOptionsList .imageCol .tipWrap2 .tip {-webkit-border-radius: 0 0 15px 0; border-radius: 0 0 15px 0;}
.stylingOptionsList .imageCol .tipWrap3 .tip { -webkit-border-radius: 0 0 15px 0; border-radius: 0 0 15px 0;}
.stylingOptionsList .imageCol .tip p {font-family: 'Century Gothic', Arial, sans-serif; font-size: 14px; color: #ccc; line-height: 1; margin: 0;}
.stylingOptionsList .imageCol .pin-it-button {position: absolute; bottom: -40px; left: 0;}

.stylingOptionsList .textCol {width: 315px; float: left; padding-top: 140px;}
.stylingOptionsList .textCol h2 {font-family: 'Abril Fatface'; font-size: 30px; line-height: 1; font-weight: normal; max-width: 315px;}
.stylingOptionsList .textCol p {font-family: 'Century Gothic', Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #666; max-width: 315px; font-style: normal;}

/* ********************************************************** */
/* THE HIGH HEEL EVOLUTION
/* ********************************************************** */

.evolution .page h1 {font-family: 'Century Gothic', Arial, sans-serif; font-size: 80px; font-weight: bold; text-transform: uppercase; color: #ffdd00; margin-bottom: 25px;}
.evolution .page .intro p {margin-bottom: 30px;}
.evolution .bottomIntro h2 {font-family: 'Century Gothic', Arial, sans-serif; font-size: 40px; font-weight: normal;}
.evolution .bottomIntro p {font-style: normal; font-size: 16px;}

.techDetails {margin-bottom: 60px; position: relative;}
.techDetails .hotspot {position: absolute; width: 82px; height: 82px; line-height: 82px; background: #fff; -webkit-border-radius: 41px; -moz-border-radius: 41px; border-radius: 41px; behavior: url(/css/smile/pie.htc); font-family: 'Droid Serif'; color: #333; font-weight: bold; font-style: italic; font-size: 40px; text-decoration: none; z-index: 1; }
.techDetails .hotspot:hover, .techDetails .hotspot.hover {background: #ffdd00; display: block;}
.techDetails .hotspot_1 {top: 135px; left: 400px;}
.techDetails .hotspot_2 {bottom: 63px; left: 215px;}
.techDetails .hotspot_3 {bottom: 70px; left: 352px;}
.techDetails .hotspot_4 {top: 230px; right: 75px;}
.techDetails .hotspot_5 {bottom: 174px; right: 294px;}

.techDetails .shoe {position: relative;}
.techDetails .overlayWrap {width: 100%; height: 100%; position: absolute; display: none;}
.techDetails .overlayWrap .overlay {position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(255,255,255,.7);}

.techDetails .overlayWrap .detail {width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}
.techDetails .overlayWrap .detail img {position: absolute;}
.techDetails .overlayWrap .detail_1 img {top: 4px; left: 6px;}
.techDetails .overlayWrap .detail_2 img {bottom: 0; left: 0;}
.techDetails .overlayWrap .detail_3 img {bottom: 0; left: 0;}
.techDetails .overlayWrap .detail_4 img {position: absolute; bottom: 21px; right: -24px;}
.techDetails .overlayWrap .detail_5 img {bottom: 0; left: 0;}

.techDetails .overlayWrap .detail .info {width: 250px; background-color: #fff; padding: 30px; border: 5px solid #ffdd00; -webkit-border-radius: 20px 0; border-radius: 20px 0; behavior: url(/css/smile/pie.htc); position: absolute; z-index: 10; text-align: left;}
.techDetails .overlayWrap .detail .info p {font-family: 'Century Gothic', Arial, sans-serif; font-size: 20px; line-height: 1.2; font-style: normal; margin: 0;}
.techDetails .overlayWrap .detail .info h3 {text-transform: uppercase;}
.techDetails .overlayWrap .detail_1 .info, .techDetails .overlayWrap .detail_2 .info, .techDetails .overlayWrap .detail_3 .info {top: 110px; right: -85px;}
.techDetails .overlayWrap .detail_4 .info {top: 110px; right: 250px;}
.techDetails .overlayWrap .detail_5 .info {top: 195px; right: -85px;}

/* ********************************************************** */
/* MODELS LIST
/* ********************************************************** */

.modelsNav {width: 960px; height: 465px; margin: 0 auto; position: relative; top: 50px; overflow: hidden;}
.modelsNav ul {list-style-type: none;}
.modelsNav ul li {width: 160px; height: 415px; float: left; 
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #F5F6F1 100%);
background-image: -moz-linear-gradient(left, #FFFFFF 0%, #F5F6F1 100%);
background-image: -o-linear-gradient(left, #FFFFFF 0%, #F5F6F1 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #FFFFFF), color-stop(1, #F5F6F1));
background-image: -webkit-linear-gradient(left, #FFFFFF 0%, #F5F6F1 100%);
background-image: linear-gradient(to right, #FFFFFF 0%, #F5F6F1 100%);
-pie-background: linear-gradient(left, #ffffff, #F5F6F1);
behavior: url(/css/smile/PIE.htc);
}
.modelsNav a {display: block; width: 100%; height: 100%; color: #000; text-transform: uppercase; text-decoration: none;}
.modelsNav a:hover, .modelsNav a.current {background: #ffdd00;}

.modelList .modelItem {width: auto; height: 660px; position: relative; overflow: hidden;}
.modelList .modelItem .overlay {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #F0F1E9; opacity: .8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; z-index: 10;}
.modelList .modelItem.activeModel .overlay {display: none;}
.lt-ie8 .modelList .modelItem .overlay {filter: alpha(opacity=80);}

.modelList .mediaRotator {width: 100%; width: auto; margin-bottom: 0;}
.modelList .mediaRotator .mediaRotatorContent {height: 520px; position: relative;}
.modelList .mediaRotator .mediaRotatorContent .item {width: 100%; height: 440px; padding-top: 30px; padding-bottom: 15px;}
.modelList .thumbnails {width: auto; height: 150px; margin: 0; text-align: center;}
.modelList .thumbnails ul {display: inline-block; margin: 5px auto 0 auto; float: none;}
.modelList .thumbnails .bottomLine {position: relative; bottom: -8px; margin: 0 auto;}
.lt-ie8 .modelList .thumbnails .bottomLine {bottom: -9px;}
.modelList .mediaRotator .thumbnails li a {font-size: 0;}
.modelList .mediaRotator .thumbnails ul a:hover .thumb {border: 5px solid #ffdd00;}
.modelList .mediaRotator .thumbnails ul li.active .thumb {border: 5px solid #ffdd00;}
.modelList .mediaRotator .thumbnails li {height: 110px;}
.modelList .mediaRotator .more a {font-family: 'Droid Serif'; font-size: 12px; font-style: italic; color: #333; text-decoration: underline;}

.modelList .mediaRotator .thumbnails li.pinterestItem .thumb {height: 85px; border: 5px solid #F3F3F3; background: #ED606B; padding-top: 15px; text-align: center;}
.modelList .mediaRotator .thumbnails li.pinterestItem a {color: #fff; font-family: 'Droid Serif'; font-size: 18px;}
.modelList .mediaRotator .thumbnails li.pinterestItem img {margin: 5px auto 0 auto;}

.modelList .mediaRotator .modelProfile {width: 465px; padding-left: 400px; padding-top: 60px;}
.modelList .mediaRotator .modelProfile h2 {max-width: 450px; font-family: 'Abril Fatface'; font-size: 130px; color: #ffdd00; font-weight: normal; line-height: 1; margin-bottom: 10px;}
.modelList .mediaRotator .modelProfile h3 {max-width: 450px; font-family: 'Century Gothic', Arial, sans-serif; text-transform: uppercase; font-weight: bold; font-size: 18px; color: #333; line-height: 1.2;}
.modelList .mediaRotator .modelProfile p {font-family: 'Century Gothic', Arial, sans-serif; font-size: 20px; line-height: 1.2; margin: 0 0 10px 0; max-width: 450px;}
.modelList .mediaRotator .modelProfile p.more {margin-bottom: 30px;}
.modelList .mediaRotator .modelProfile .socialBar {float: none;}

.modelList .mediaRotator .mediaRotatorContent .item.modelProfileContinued {height: 410px; padding-top: 60px;}
.modelList .mediaRotator .modelProfileContinued h2 {width: 660px; font-family: 'Century Gothic', Arial, sans-serif; font-size: 30px; text-transform: uppercase; font-weight: bold; color: #ffdd00; margin-bottom: 15px;}
.modelList .mediaRotator .modelProfileContinued .col {width: 315px; float: left; margin-right: 15px;}
.modelList .mediaRotator .modelProfileContinued .fullWidth {width: 610px;}
.modelList .mediaRotator .modelProfileContinued .fullWidth * {margin: 0 auto 15px auto;}
.modelList .mediaRotator .modelProfileContinued .fullWidth h2 {width: auto;}
.modelList .mediaRotator .modelProfileContinued .fullWidth p {width: 485px;}
.modelList .mediaRotator .modelProfileContinued p {font-family: 'Droid Serif'; font-size: 14px; line-height: 1.3; margin: 0 0 15px 0;}

.modelList #m_0_ida {background: transparent url(/gfx/smile/backgrounds/models/ida/ida_01.jpg) top center no-repeat;}
.modelList #m_1_tina {background: transparent url(/gfx/smile/backgrounds/models/tina/tina_01.jpg) top center no-repeat;}
.modelList #m_2_barbora {background: transparent url(/gfx/smile/backgrounds/models/barbora/barbora_01.jpg) top center no-repeat;}
.modelList #m_3_corrina {background: transparent url(/gfx/smile/backgrounds/models/corrina/corrina_01.jpg) top center no-repeat;}
.modelList #m_4_monica {background: transparent url(/gfx/smile/backgrounds/models/monica/monica_01.jpg) top center no-repeat;}
.modelList #m_5_maria {background: transparent url(/gfx/smile/backgrounds/models/maria/maria_01.jpg) top center no-repeat;}

.modelList #m_1_tina .modelProfile h2 {font-family: 'Berkshire Swash'; font-size: 130px; color: #ED606B; text-align: center;}
.modelList #m_1_tina .modelProfile h3 {max-width: 450px; text-align: center;}
.modelList #m_1_tina .modelProfile p {text-align: center;}
.modelList #m_1_tina .modelProfile .socialWrap {width: 450px; text-align: center;}
.modelList #m_1_tina .modelProfileContinued h2 {color: #ED606B;}

.modelList #m_2_barbora .modelProfile h2 {max-width: 450px; font-family: 'Century Gothic', Arial, sans-serif; font-size: 100px; text-align: center;}
.modelList #m_2_barbora .modelProfile h3 {text-align: center;}
.modelList #m_2_barbora .modelProfile p {text-align: center;}
.modelList #m_2_barbora .modelProfile .socialWrap {width: 450px; text-align: center;}

.modelList #m_3_corrina .modelProfile h2 {font-family: 'Berkshire Swash'; font-size: 100px; color: #ED606B;}
.modelList #m_3_corrina .modelProfile .socialWrap {width: 450px;}
.modelList #m_3_corrina .modelProfileContinued h2 {color: #ED606B; font-size: 24px; font-weight: normal;}

.modelList #m_4_monica .modelProfile h2 {max-width: 450px; font-family: 'Century Gothic', Arial, sans-serif; font-size: 100px; text-align: center;}
.modelList #m_4_monica .modelProfile h3 {text-align: center;}
.modelList #m_4_monica .modelProfile p {text-align: center;}
.modelList #m_4_monica .modelProfile .socialWrap {width: 450px; text-align: center;}
.modelList #m_4_monica .modelProfileContinued h2 {font-family: 'Century Gothic', Arial, sans-serif; font-size: 30px; text-transform: uppercase; font-weight: bold;}

.modelList #m_5_sara .modelProfile h2 {font-family: 'Droid Serif'; font-size: 130px;}


/* ********************************************************** */
/* PIN IT AND WIN IT
/* ********************************************************** */

body.pinit {background: transparent url(/gfx/smile/backgrounds/bg-pinit.jpg) no-repeat fixed center top;}

#pinit .contentWrap, .pinit .socialWrap {width: 960px; margin: 0 auto;}
#pinit .socialWrap {text-align: center;}
#pinit .socialBar {margin: 0 auto; float: none;}

#pinit .intro {position: relative; padding-top: 85px; text-align: center; margin-bottom: 45px; font-family: 'Droid Serif'; font-size: 20px; font-style: italic;}
#pinit .intro h1 {margin-bottom: 30px; position: relative;}
#pinit .intro h1 span {position: absolute; top: -1000px; left: -10000px;}
#pinit .intro p {max-width: 680px; margin: 0 auto; line-height: 1.5;}

#pinit .intro .badge {width: 155px; line-height: 155px; position: absolute; right: -15px; top: 155px; font-style: normal;}
#pinit .intro .badge a {width: 133px; background: #666; font-family: 'Century Gothic', Arial, sans-serif; font-size: 16px; font-weight: bold; color: #fff; line-height: .85;}
.lt-ie8 #pinit .intro .badge a {height: 108px; padding-top: 25px; }
#pinit .intro .badge a:hover {border: 11px solid #666;}
#pinit .intro .badge a img {margin-top: 10px;}

#pinit .competitionBanner {width: 932px; position: relative; margin-bottom: 30px;}
#pinit .competitionBanner .shadow {width: 100%; height: 6px;}
#pinit .competitionBanner .topShadow {background: url(/gfx/smile/top-shadow.png) no-repeat scroll left bottom transparent; top: 0;}
#pinit .competitionBanner .bottomShadow {background: url(/gfx/smile/bottom-shadow.png) no-repeat scroll left bottom transparent; bottom: 6px;}
#pinit .competitionBanner .badge {width: 215px; height: 215px; line-height: 204px; position: absolute; top: -15px; left: 75px;  z-index: 10;}
.lt-ie8 #pinit .competitionBanner .badge {top: -7px;}
#pinit .competitionBanner .badge a {width: 193px; height: 193px; background: #333; color: #fff; font-family: 'Berkshire Swash'; font-size: 30px; line-height: .85; text-transform: lowercase; -webkit-border-radius: 96px; -moz-border-radius: 96px; border-radius: 96px;}
.lt-ie8 #pinit .competitionBanner .badge a {height: 143px; padding-top: 50px;}
#pinit .competitionBanner .badge a .inner {display: table-cell; height: 193px; text-align: center; vertical-align: middle; width: 193px;}
#pinit .competitionBanner .badge a:hover {border: 11px solid #333; -webkit-border-radius: 107px; -moz-border-radius: 107px; border-radius: 107px;}
#pinit .competitionBanner .content {padding: 15px 0 12px 325px;}
#pinit .competitionBanner h2 {font-family: 'Berkshire Swash'; font-size: 60px; color: #ED606B; margin: 0 0 10px 0; font-weight: normal;}
#pinit .competitionBanner .themeTagline {font-family: 'Century Gothic', Arial, sans-serif; text-transform: uppercase; font-size: 18px; font-weight: bold; margin: 0 0 3px 0;}
#pinit .competitionBanner .themeName {font-size: 30px; font-weight: normal; margin: 0;}
#pinit .competitionBanner .themeDescription {font-size: 16px; margin: 0;}

#pinit .socialWrap {margin-bottom: 80px;}
#pinit .socialWrap .terms {color: #333; text-decoration: underline; font-family: 'Droid Serif'; font-size: 12px; font-style: italic; line-height: 32px; margin-left: 10px;}

#pinit .inspiration {text-align: center; margin-bottom: 60px;}
#pinit .inspiration .intro {padding: 0; margin: 0 0 20px 0; font-style: normal;}
#pinit .inspiration .intro h2 {font-family: 'Century Gothic', Arial, sans-serif; font-size: 30px; font-weight: normal;}
#pinit .inspiration .intro p {font-family: 'Century Gothic', Arial, sans-serif; font-size: 16px;}

#pinit .pinterestBoardList {list-style-type: none; font-family: 'Droid Serif'; font-style: italic; font-size: 16px;}
#pinit .pinterestBoardList li {width: 232px; float: left; margin-left: 5px;}
#pinit .pinterestBoardList li:first-child {margin-left: 0;}
#pinit .pinterestBoardList li .thumb {display: block; background: transparent url(/gfx/smile/bottom-shadow-pinterest.png) no-repeat bottom center; padding-bottom: 6px;}
#pinit .pinterestBoardList li .thumb img {display: block; border: 5px solid #f3f3f3;}
#pinit .pinterestBoardList li .thumb:hover img {border-color: #333;}
#pinit .pinterestBoardList li .userProfile {margin-bottom: 20px;}
#pinit .pinterestBoardList li .more a {color: #333;}
#pinit .pinterestBoardList li .userProfile {margin-bottom: 15px;}
#pinit .pinterestBoardList li .boardTheme strong {font-family: 'Droid Serif'; font-size: 12px; font-style: normal; text-transform: uppercase;}

#pinit .winners {background: #ED606B; text-align: center; padding-top: 35px; padding-bottom: 90px;}
#pinit .winners .intro {padding: 0; margin: 0 0 30px 0;}
#pinit .winners .intro h2 {font-family: 'Berkshire Swash'; color: #fff; font-size: 40px; font-weight: normal; font-style: normal; margin-bottom: 20px;}
#pinit .winners h3 {font-family: 'Berkshire Swash'; color: #fff; font-size: 25px; font-weight: normal; font-style: normal; margin-bottom: 10px; }
#pinit .winners .pinterestBoardList {width: 706px; margin: 0 auto 30px auto; }
#pinit .winners .pinterestPrize {font-weight: bold;}


/* ********************************************************** */
/* BACK COVER
/* ********************************************************** */

#backcover .content {width: 960px; height: 635px; position: fixed; bottom: 20px;}
.lt-ie8 #backcover .content {margin-left: -433px; margin-right: -433px;}
#backcover .content .leftCol {width: 260px;}
#backcover .content .leftCol img {position: absolute; z-index: 0; margin-left: -100px;}
#backcover .content .leftCol .topImage {z-index: 10;}
#backcover .content .rightCol {width: 700px; padding-top: 100px; margin-left: 400px; position: relative; z-index: 10;}
#backcover h1 {font-family: 'Century Gothic', Arial, sans-serif; font-size: 45px; text-transform: uppercase; color: #ffdd00; line-height: 1.2; font-weight: normal; margin-bottom: 75px; }
#backcover .linkList {width: 465px; list-style-type: none; margin: 0 auto;}
#backcover .linkList li {float: left;}
#backcover .linkList .badge {width: 155px; height: 155px; line-height: 155px;}
#backcover .linkList .badge a {width: 133px; font-family: 'Abril Fatface'; font-size: 23px; line-height: .85; text-transform: lowercase;}
.lt-ie8 #backcover .linkList .badge a {padding-top: 43px; height: 90px;}
#backcover .linkList .visitSite .badge a {background: #ffdd00; color: #333;}
#backcover .linkList .shopOnline .badge a {background: #999; color: #ffdd00;}
#backcover .linkList .findStore .badge a {background: #333; color: #fff;}
#backcover .linkList .visitSite .badge a:hover {border: solid 11px #ffdd00;} 
#backcover .linkList .shopOnline .badge a:hover{border: solid 11px #999;}
#backcover .linkList .findStore .badge a:hover {border: solid 11px #333;}


/* ********************************************************** */
/* SMALLER FONT SIZE
/* ********************************************************** */

.smallerFonts #contentNavOverlay .frontpage a {font-size: 14px;}
.smallerFonts #contentNavOverlay li a {font-size: 23px;}
.smallerFonts .navContainer .bubble {font-size: 14px;}


/* frontpage */
.smallerFonts.frontpage .content .feel-it h2 {font-size: 30px;}
.smallerFonts.frontpage .content .sculptured h2, .smallerFonts.frontpage .content .sculptured h2 a {font-size: 38px;}
.smallerFonts.frontpage .content .how-to h2 {font-size: 22px;}
.smallerFonts.frontpage .content .evolution h2, .smallerFonts.frontpage .content .evolution h2 a {font-size: 30px;}
.smallerFonts.frontpage .content .truth-or-myth h2 {font-size: 32px;}
.smallerFonts.frontpage .content .pin-it h2 {font-size: 22px;}
.smallerFonts.frontpage .content p {font-size: 15px;}

/* feel it */
.smallerFonts.feelIt .badge a {font-size: 17px; line-height: 1.1;}
.lt-ie8 .smallerFonts.feelIt .badge a {padding-top: 30px; height: 103px;}

/* how to style */
.smallerFonts .stylingOptionsWrap .badge a {font-size: 24px;}
.smallerFonts .stylingOptionsWrap .badge a .line4 {font-size: 12px;}

/* truth or myth */
.smallerFonts .mythbox .badge a {font-size: 20px;}
.lt-ie8 .smallerFonts .mythbox .badge a { padding: 43px 10px 0; width: 113px;}

/* pin it */
.smallerFonts #pinit .intro .badge {line-height: 1;}
.smallerFonts #pinit .intro .badge a {font-size: 14px;}
.smallerFonts #pinit .competitionBanner .badge a {font-size: 25px; }

/* single shoe page */
.lt-ie8 .smallerFonts.singleShoe .badgeWrap .badge.webshop a {padding-top: 39px; height: 94px;}
.smallerFonts.singleShoe .badgeWrap .badge.webshop a .firstLine {font-size: 25px; display: inline-block;}
.smallerFonts.singleShoe .badgeWrap .badge.webshop a .secondLine {font-size: 20px;}
.smallerFonts.singleShoe .badgeWrap .badge.storeLocator a {font-size: 15px;}
.lt-ie8 .smallerFonts.singleShoe .badgeWrap .badge.storeLocator a {padding-top: 20px; height: 62px;}
.smallerFonts.singleShoe .badgeWrap .badge.howToStyle a {width: 120px; margin-right: -25px;}

/* quiz */
.smallerFonts.quiz .badge .tagline{font-size: 18px;}
.smallerFonts.quiz .badge h1 {font-size: 40px;}
.smallerFonts.quiz .questions .btn {font-size: 20px;}

/* models */
.smallerFonts .modelList .mediaRotator .modelProfile p {font-size: 18px;}

/* back cover */
.smallerFonts #backcover .linkList .badge a {font-size: 20px; line-height: 1;}


/* ********************************************************** */
/* LANGUAGE SPECIFIC STYLING
/* ********************************************************** */

/* Use Georgia instead of Droid Serif for Latvian site */
.lv-lv.subpage .page p,
.lv-lv .mediaRotator .thumbnails li .caption,
.lv-lv.frontpage .content p,
.lv-lv.singleShoe .badgeWrap .badge.howToStyle,
.lv-lv.singleShoe .sizeRangeMenu, 
.lv-lv.singleShoe .linkRow .lastCol .shoeSizes,
.lv-lv .mythbox .intro p,
.lv-lv .mythbox .intro h1,
.lv-lv .mythbox .myth p,
.lv-lv .mythbox.dark .myth h1,
.lv-lv.quiz .intro h2,
.lv-lv.quiz .badge .tagline,
.lv-lv.quiz .questions h3,
.lv-lv #quizResult .recommendedShoe .textCol,
.lv-lv .techDetails .hotspot,
.lv-lv .modelList .mediaRotator .more a,
.lv-lv .modelList .mediaRotator .thumbnails li.pinterestItem a,
.lv-lv .modelList .mediaRotator .modelProfileContinued p,
.lv-lv .modelList #m_5_sara .modelProfile h2,
.lv-lv #pinit .intro,
.lv-lv #pinit .socialWrap .terms,
.lv-lv #pinit .pinterestBoardList,
.lv-lv #pinit .pinterestBoardList li .boardTheme strong {font-family: Georgia, serif;}

/* use Georgia instead of Abril Fatface in webkit browsers (Safari and Chrome) for the Latvian site */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.lv-lv #contentNavOverlay .lv-lv.how-to a, .lv-lv #contentNavOverlay .truth-or-myth a, .lv-lv #contentNavOverlay .pin-it a, 
.lv-lv.frontpage .content .how-to h2, .lv-lv.frontpage .content .truth-or-myth h2, .lv-lv.frontpage .content .pin-it h2, 
.lv-lv.singleShoe .badgeWrap .badge.webshop, .lv-lv.singleShoe .badgeWrap .badge.storeLocator, .lv-lv .mythbox .intro h2, 
.lv-lv .mythbox .myth h2, .lv-lv .mythbox.dark .myth h2, .lv-lv #quizResult .badge, .lv-lv.howto .page h1, 
.lv-lv .stylingOptionsList .textCol h2, .lv-lv .modelList .mediaRotator .modelProfile h2, .lv-lv #backcover .linkList .badge a 
{font-family: Georgia, Serif;}

.lv-lv.frontpage .content .how-to h2, .lv-lv.frontpage .content .truth-or-myth h2, .lv-lv.frontpage .content .pin-it h2, 
.lv-lv .mythbox .intro h2, .lv-lv .mythbox .myth h2, .lv-lv .mythbox.dark .myth h2, .lv-lv.howto .page h1, 
.lv-lv .stylingOptionsList .textCol h2, .lv-lv .modelList .mediaRotator .modelProfile h2, .lv-lv #backcover .linkList .badge a  {font-weight: bold;}
}

/* Use Georgia instead of Droid Serif for Lithuanian site */
.lt-lt.subpage .page p,
.lt-lt .mediaRotator .thumbnails li .caption,
.lt-lt.frontpage .content p,
.lt-lt.singleShoe .badgeWrap .badge.howToStyle,
.lt-lt.singleShoe .sizeRangeMenu, 
.lt-lt.singleShoe .linkRow .lastCol .shoeSizes,
.lt-lt .mythbox .intro p,
.lt-lt .mythbox .intro h1,
.lt-lt .mythbox .myth p,
.lt-lt .mythbox.dark .myth h1,
.lt-lt.quiz .intro h2,
.lt-lt.quiz .badge .tagline,
.lt-lt.quiz .questions h3,
.lt-lt #quizResult .recommendedShoe .textCol,
.lt-lt .techDetails .hotspot,
.lt-lt .modelList .mediaRotator .more a,
.lt-lt .modelList .mediaRotator .thumbnails li.pinterestItem a,
.lt-lt .modelList .mediaRotator .modelProfileContinued p,
.lt-lt .modelList #m_5_sara .modelProfile h2,
.lt-lt #pinit .intro,
.lt-lt #pinit .socialWrap .terms,
.lt-lt #pinit .pinterestBoardList,
.lt-lt #pinit .pinterestBoardList li .boardTheme strong {font-family: Georgia, serif;}

/* Use Georgia instead of Droid Serif for Polish site */
.pl-pl.subpage .page p,
.pl-pl .mediaRotator .thumbnails li .caption,
.pl-pl.frontpage .content p,
.pl-pl.singleShoe .badgeWrap .badge.howToStyle,
.pl-pl.singleShoe .sizeRangeMenu, 
.pl-pl.singleShoe .linkRow .lastCol .shoeSizes,
.pl-pl .mythbox .intro p,
.pl-pl .mythbox .intro h1,
.pl-pl .mythbox .myth p,
.pl-pl .mythbox.dark .myth h1,
.pl-pl.quiz .intro h2,
.pl-pl.quiz .badge .tagline,
.pl-pl.quiz .questions h3,
.pl-pl #quizResult .recommendedShoe .textCol,
.pl-pl .techDetails .hotspot,
.pl-pl .modelList .mediaRotator .more a,
.pl-pl .modelList .mediaRotator .thumbnails li.pinterestItem a,
.pl-pl .modelList .mediaRotator .modelProfileContinued p,
.pl-pl .modelList #m_5_sara .modelProfile h2,
.pl-pl #pinit .intro,
.pl-pl #pinit .socialWrap .terms,
.pl-pl #pinit .pinterestBoardList,
.pl-pl #pinit .pinterestBoardList li .boardTheme strong {font-family: Georgia, serif;}

.zh-tw.competition #competition .socialBar .addthis_button_twitter { display: none; }

/* ********************************************************** */
/* RESPONSIVE
/* ********************************************************** */

/* Small screens ----------- */
@media only screen 
and (min-device-width : 1100px)
and (min-height : 0px) 
and (max-height : 700px)  
{
    /* scale down frontpage content for low screens */
    .frontpage .content {position: fixed; bottom: 20px;}
    .frontpage .content h2 {font-size: 80%;}
    .frontpage .content p {font-size: 90%;}
    #myTable img {height: 180px; width: auto; vertical-align: top;}
    #frontpageModeSliderWrap {margin-left: 0;}
    .modelContainer .model, .modelContainer .modelShadow {height: 500px; width: auto; top: auto; bottom: 10px;}
    
    /* scale down backpage content for low screens */
    #backcover .content .leftCol img {height: 500px; width: auto; bottom: 0;}
    #backcover h1 {position: relative; margin-top: 180px; margin-bottom: 30px;}
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    #logoContainer {position: absolute; top: 10px; right: 50px;}
    #logoContainer ul, #logoContainer .logo {float: right; margin-right: 150px;}
    #logoContainer .logo {clear: both;}
    
    .frontpage .content {position: relative; bottom: auto; top: 300px; left: 0; padding: 0 20px 20px;}
    #frontpageModeSliderWrap {position: absolute; left: auto !important;}

    .collectionStart .thumbnailWrap {position: absolute; top: 800px;}
    .mythbox {width: 110%;}
    
    #backcover .content {position: relative; bottom: auto; top: 100px; left: 0;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    body {min-width: 1000px;}
    #smile {width: 1000px;}
    .page {width: 1000px;}
    #logoContainer {width: 1000px; position: absolute; top: 10px; left: 0;}
    #logoContainer ul, #logoContainer .logo {float: right; margin-right: 150px;}
    #logoContainer .logo {clear: both;}
    
    .frontpage .content {position: relative; bottom: auto; top: 400px; left: 0; padding: 0 20px 20px;}
    #frontpageModeSliderWrap {position: absolute; left: auto !important;}
    
    .mythbox {width: 110%;}
    
    #backcover .content {position: absolute; top: 150px; left: 100px;}
    #backcover .content .rightCol {margin-left: 180px;}
}


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    #smile {position: relative;}
    #myTable {min-width: 100%; width: 100%;}
    #myTable td {width: 20%;}
    .frontpage .content {position: relative; bottom: auto; top: 150px;}
    #frontpageModeSliderWrap {position: absolute; left: auto !important;}
}