html, body, ul, li, p, input, h1, h2, h3, h4, a, img, div, span, label { margin:0; padding:0; border:none; line-height: 1 }
body { font-family: Arial, "Times New Roman", sans-serif; font-size: 14px; width: 960px } 

h1 { margin: 25px 0; color: #333 }

/* language specific overrulings */
.pl #vaio-filter-options label { font-size: 13px }
.ua #vaio-filter-options label { font-size: 13px }
.ru #vaio-filter-options label { font-size: 13px }
.bg #vaio-filter-options label { font-size: 13px }
.hu #vaio-filter-options label { font-size: 13px }
.ru #vaio-filter-selectors ul a.button { font-size: 12px }

#iframe { height: 810px }
#content-wrapper { position: relative; -ms-touch-action: none }
#content-wrapper a { color: #0e5fe8; text-decoration: none }
#content-wrapper a:hover { text-decoration: underline }

#vaio-series { position: absolute; top:0; left: 0; margin-top: 50px; width: 100% }
#vaio-series #zero-results { margin-top: 20px; display: none }
#vaio-series #zero-results h3 { color: #ff6600; font-weight: normal }
#vaio-series #zero-results ul { padding: 10px 30px }
#vaio-series #zero-results ul li { padding: 5px 0}
#vaio-series #zero-results a { font-weight: bold }
#vaio-series #vaio-series-content { overflow: hidden; width: 960px }
#vaio-series #template-large-footer { border-top: 1px solid #f2f2f2; text-align: center; padding: 15px 0; margin-top:100px; display: none }
#vaio-series #template-large-footer ul { list-style: none; color: #252525; font-size: 12px }
#vaio-series #template-large-footer ul li {  display: inline; padding: 5px 0 5px 30px; margin: 0 15px }
#vaio-series #template-large-footer ul li#legend-mobility { background: url( img/icons-assets-sprite.png ) 5px -327px no-repeat }
#vaio-series #template-large-footer ul li#legend-batterylife { background: url( img/icons-assets-sprite.png ) 0 -372px no-repeat }
#vaio-series #template-large-footer ul li#legend-performance { background: url( img/icons-assets-sprite.png ) -3px -417px no-repeat }

#selected-filters { overflow: hidden; background: url( img/line.png ) 0 2px; margin-top: 20px }
#selected-filters .clone { display: none;  }
#selected-filters .selected { float:left; padding: 7px 0; color: #fff; font-size: 12px; font-weight: bold; margin: 0 2px 2px 0; overflow: hidden; -ms-touch-action: none }
#selected-filters .selected .title{ padding: 0 7px; float: left; }
#selected-filters .selected .close{ padding: 0 5px 0 0; font-size: 10px; width: 5px; height: 10px; background: url( img/icons-assets-sprite.png ) 0 -104px; float: left }
#selected-filters .selected:hover { cursor: pointer }
#selected-filters .blue { background-color: #0e5ee7 }
#selected-filters .black { background-color: #333 }


#vaio-filters ul { list-style: none; overflow: hidden }
#vaio-filter-selectors { overflow: hidden; position: relative; z-index: 999 }
#vaio-filter-selectors ul { overflow: hidden; float: left }
#vaio-filter-selectors ul li { border: 1px solid #dedede; float:left; background: #fbfbfb url( img/icons-assets-sprite.png ) 0 -23px repeat-x; margin: 0 4px 0 0 }
#vaio-filter-selectors ul a { display: block; border-bottom: 1px solid #b7b7b7; text-decoration: none; color: #333;  background: url( img/arrow-right.png ) 90% center no-repeat; }
#vaio-filter-selectors ul a.button span { display: block; padding: 12px 50px 12px 15px; padding-left: 30px; margin-left: 10px }
#vaio-filter-selectors ul a.button.best-for span { background: url( img/icons-assets-sprite.png ) 0 -119px no-repeat }
#vaio-filter-selectors ul a.button.style span { background: url( img/icons-assets-sprite.png ) 0 -156px no-repeat }
#vaio-filter-selectors ul a.button.screen span { background: url( img/icons-assets-sprite.png ) 0 -195px no-repeat }
#vaio-filter-selectors ul a.button.batterylife span { background: url( img/icons-assets-sprite.png ) 0 -232px no-repeat }
#vaio-filter-selectors ul a.button.features span { background: url( img/icons-assets-sprite.png ) 0 -270px no-repeat }
#vaio-filter-selectors ul img { vertical-align: middle; margin-right: 10px }
#vaio-filter-selectors ul li.active { padding-bottom: 6px; margin-bottom: 0; border-bottom: none }
#vaio-filter-selectors ul li.active a { border-bottom: none; background: url( img/arrow-down.png ) 90% center no-repeat  }

#vaio-filter-options { overflow: hidden; position: relative; top:-1px; z-index: 777; box-shadow:  0 3px 10px 0 #ddd; background: #fbfbfb url( img/options-bg.png ) left bottom repeat-x }
#vaio-filter-options #close-button { position: absolute; right: 0; top: 0; width: 22px; height: 22px; display: block }
#vaio-filter-options #close-button:link { background: url( img/icons-assets-sprite.png ) 0 0 no-repeat }
#vaio-filter-options #close-button:hover { background: url( img/icons-assets-sprite.png ) -22px 0 no-repeat }
#vaio-filter-options #close-button:active { background: url( img/icons-assets-sprite.png ) -44px 0 no-repeat }
#vaio-filter-options label { display: block; outline: 0; position: relative; height: 150px }
#vaio-filter-options label:hover { cursor: pointer }
#vaio-filter-options label img { text-align: center }
#vaio-filter-options ul { display: none; overflow: hidden; border: 1px solid #dedede; border-bottom-color:#d1d1d1 }
#vaio-filter-options ul li { float:left; padding: 15px 35px 20px 45px; text-align: center; background: url( img/filterdiv.png ) left center no-repeat }
#vaio-filter-options ul li:first-child { background: none }
#vaio-filter-options ul li.separated { border-right: 1px solid #e1e1e1 }
#vaio-filter-options ul img { margin-bottom: 8px }
#vaio-filter-options ul span { display: block; margin: 5px 0; color: #666; font-size: .85em }
#vaio-filter-options ul span.bold { font-weight: normal; color: #666; font-size: .9em }
#vaio-filter-options ul input { margin: 6px 0 5px 0; position: absolute; bottom: 0; left: 50%; margin-left: -6px }

/* progress bars */
.progress { padding-top: 5px }
.progress .wrapper { margin: 5px 0; overflow: hidden }
.progress span.icon { margin: 0 10px 0 0; float: left; width: 25px; height: 27px }
.progress span.icon.mobility { background: url( img/icons-assets-sprite.png ) 0 -327px no-repeat }
.progress span.icon.batterylife { background: url( img/icons-assets-sprite.png ) 0 -372px no-repeat }
.progress span.icon.performance { background: url( img/icons-assets-sprite.png ) -3px -417px no-repeat }
.progress ul.hidden { display: none }
.progress ul li { float: left; border-radius: 3px; overflow: hidden }
.progress ul li img.left { float: left }
.progress ul li img.right { float: right }
.progress ul li.p { width: 0px }
.progress ul li.p0 { display: none }
.progress ul li.p10 { width: 10% }
.progress ul li.p20 { width: 20% }
.progress ul li.p30 { width: 30% }
.progress ul li.p40 { width: 40% }
.progress ul li.p50 { width: 50% }
.progress ul li.p60 { width: 60% }
.progress ul li.p70 { width: 70% }
.progress ul li.p80 { width: 80% }
.progress ul li.p90 { width: 90% }
.progress ul li.p100 { width: 100% }

/* individual series */
.series { float: left; font-size: 13px; margin: 0 25px 15px 0 }
.series p { line-height: 1.5em; color: #333 }
.series p.orange { font-weight: bold; color: #ff6600 }
.series h4 { color: #0e5fe8; margin-bottom: 5px; font-size: 1.266em }
.template { cursor:pointer }
.template:hover h4 { text-decoration: underline }
.template .price { display: none }

.small { width: 215px; color: #333 }
.small .hero { text-align: left; margin-top: 15px }
.small .colors { margin-bottom: 10px; min-height: 35px; position: relative }
.small .colors .wrapper { overflow: hidden; position: absolute; bottom: 0 }
.small .colors .wrapper .color { float: left; width: 14px; height: 14px; border: 1px solid #dcdcdc; margin: 0 5px 5px 0; overflow: hidden }
.small .colors .color img { width: 100%; height: 100% }
.small .sizes { clear: both; color: #333; font-size: .9em; padding: 15px  0 0 0; overflow: hidden }
.small .sizes .size { position: relative; overflow: hidden; border: 1px solid #ccc; text-align: center; min-width: 40px; margin: 0 5px 5px 0; padding: 2px 3px; border-radius: 3px; float: left  }
.small .sizes .size .diagonal { position: absolute; top:0; left: 0; width:100%; height: 100%; z-index:-1 }
.small .sizes .inch {  }
.small .sizes .cm { font-weight: bold; margin: 0 0 2px 0 }

.colors .green { background: url( img/colors-sprite.png ) 0 -26px repeat-x }
.colors .orange { background: url( img/colors-sprite.png ) 0 -52px repeat-x }
.colors .pink { background: url( img/colors-sprite.png ) 0 -78px repeat-x }
.colors .red { background: url( img/colors-sprite.png ) 0 -104px repeat-x }
.colors .white { background: url( img/colors-sprite.png ) 0 -130px repeat-x }
.colors .silver { background: url( img/colors-sprite.png ) 0 -156px repeat-x }
.colors .gun-metallic { background: url( img/colors-sprite.png ) 0 -182px repeat-x }
.colors .carbon-black { background: url( img/colors-sprite.png ) 0 -208px repeat-x }
.colors .carbon-mash-black { background: url( img/colors-sprite.png ) 0 -234px repeat-x }
.colors .carbon-silver { background: url( img/colors-sprite.png ) 0 -260px repeat-x }
.colors .gold { background: url( img/colors-sprite.png ) 0 -286px repeat-x }
.colors .premium-black { background: url( img/colors-sprite.png ) 0 -312px repeat-x }
.colors .glossy { background: url( img/colors-sprite.png ) 0 -338px repeat-x }
.colors .black { background: url( img/colors-sprite.png ) 0 -364px repeat-x }
.colors .gray { background: url( img/colors-sprite.png ) 0 -390px repeat-x }

.medium { width: 215px; color: #333 }
.medium .hero { text-align: left; margin-top: 15px }
.medium .colors { margin-bottom: 10px; min-height: 50px; position: relative }
.medium .colors .wrapper { overflow: hidden; position: absolute; bottom: 0 }
.medium .colors .wrapper .color { float: left; width: 14px; height: 14px; border: 1px solid #dcdcdc; margin: 0 5px 5px 0; overflow: hidden }
.medium .colors .color img { width: 100%; height: 100% }
.medium .sizes { clear: both; color: #333; font-size: .9em; padding: 15px  0 0 0; overflow: hidden }
.medium .sizes .size { position: relative; overflow: hidden; border: 1px solid #ccc; text-align: center; min-width: 40px; margin: 0 5px 5px 0; padding: 2px 3px; border-radius: 3px; float: left  }
.medium .sizes .size .diagonal { position: absolute; top:0; left: 0; width:100%; height: 100%; z-index:-1 }
.medium .sizes .inch {  }
.medium .sizes .cm { font-weight: bold; margin: 0 0 2px 0 }

.medium .progress { margin-top: 15px }
.medium .progress ul { width: 180px }
.medium .progress ul { list-style:none; background: #e3e3e3 url( img/progress-medium-sprite.png ) 0px 0px repeat-x; box-shadow:inset 0 0 5px #b9b9b9; overflow: hidden; margin: 6px 0; height: 12px; border-radius: 3px}
.medium .progress ul li { height: 12px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; margin-left: -1px; position: relative; }
.medium .progress ul.batterylife li.min { background: url( img/progress-medium-sprite.png ) 2px -12px repeat-x; border-right: 1px solid #9ed416; z-index: 2 }
.medium .progress ul.batterylife li.max { background: url( img/progress-medium-sprite.png ) 2px -49px repeat-x; border-right: 1px solid #c6c56d; margin-top: -12px; z-index: 1  }
.medium .progress ul.mobility li.min { background: url( img/progress-medium-sprite.png ) 2px -24px repeat-x; border-right: 1px solid #3fa2b9}
.medium .progress ul.performance li.min { background: url( img/progress-medium-sprite.png ) 2px -36px repeat-x; border-right: 1px solid #D450A6 }

.large { width: 285px }
.large .hero { text-align: center; margin: 0 0 30px 0 }
.large > p { margin-bottom: 5px }
.large .colors { overflow: hidden }
.large .colors .color { float: left; width: 30px; height: 15px; border-radius: 3px; margin: 5px 5px 0 0; overflow: hidden; }
.large .colors .color img { width: 100%; height: 100% }
.large .sizes { clear: both; color: #333; font-size: .9em; padding: 15px  0 0 0; overflow: hidden }
.large .sizes .size { position: relative; overflow: hidden; border: 1px solid #ccc; text-align: center; min-width: 40px; margin: 0 5px 5px 0; padding: 2px 3px; border-radius: 3px; float: left  }
.large .sizes .size .diagonal { position: absolute; top:0; left: 0; width:100%; height: 100%; z-index:-1 }
.large .sizes .inch {  }
.large .sizes .cm { font-weight: bold; margin: 0 0 2px 0 }
.large .info a { font-weight: bold }
.large .info .orange { font-weight: bold; color: #ff6600; padding: 7px 0 }
.large .highlights ul { list-style: none; color: #333; padding: 10px 0 }
.large .highlights li { background: url( img/check.png ) left center no-repeat; padding: 0 0 0 20px; margin: 8px 0 }

.large .progress ul { width: 250px }
.large .progress ul { list-style:none; background: #e3e3e3 url( img/progress-large-sprite.png ) 0px 0px repeat-x; box-shadow:inset 0 0 5px #b9b9b9; overflow: hidden; margin: 6px 0; height: 12px; border-radius: 3px}
.large .progress ul li { height: 12px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; margin-left: -1px; position: relative; }
.large .progress ul.batterylife li.min { background: url( img/progress-large-sprite.png ) 2px -12px repeat-x; border-right: 1px solid #9ed416; z-index: 2 }
.large .progress ul.batterylife li.max { background: url( img/progress-large-sprite.png ) 2px -48px repeat-x; border-right: 1px solid #c6c56d; margin-top: -12px; z-index: 1 }
.large .progress ul.mobility li.min { background: url( img/progress-large-sprite.png ) 2px -24px repeat-x; border-right: 1px solid #3fa2b9 }
.large .progress ul.performance li.min { background: url( img/progress-large-sprite.png ) 2px -36px repeat-x; border-right: 1px solid #D450A6 }