/*

Hardboiled Web Design
http://hardboiledwebdesign.com
http://twitter.com/itshardboiled

SLIDER

*/

/* BODY ------------------------------------------------------------------ */

html { 
padding-top : 5px;
background-color : rgb(0,0,0); }

body { 
position : relative;
padding : 80px 40px 20px 40px;
background : rgb(57,53,70) url(../img/html.jpg) repeat;
font : 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color : rgb(255,255,255); 
text-shadow : 0 1px 1px rgb(0,0,0); }

@font-face {
font-family : 'AllerRegular';
src : url('../type/aller_rg-webfont.eot');
src : local('☺'), url('../type/aller_rg-webfont.woff') format('woff'), url('../type/aller_rg-webfont.ttf') format('truetype'), url('../type/aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
font-weight : normal;
font-style : normal; }

@font-face {
font-family : 'AllerBold';
src : url('../type/aller_bd-webfont.eot');
src : local('☺'), url('../type/aller_bd-webfont.woff') format('woff'), url('../type/aller_bd-webfont.ttf') format('truetype'), url('../type/aller_bd-webfont.svg#webfont4YvdCymj') format('svg');
font-weight : normal;
font-style : normal; }

.group:after { 
content : "\0020"; 
display : block; 
height : 0; 
clear : both; 
visibility : hidden; 
overflow : hidden; }


/* HEADINGS -------------------------------------------------------------- */

h1, h2, h3 {
font-weight : normal; }

h1 { 
margin-bottom : .25em; 
text-rendering : optimizeLegibility; }

h2 {
margin-bottom : .75em; 
font-size : 1.12em; /* 18 / 16 = 1.125 */ 
line-height : 1.1; }

h3, h4 {
font-size : 1em; /* 16 / 16 = 1 */ 
margin-bottom : .75em; }

/* TYPOGRAPHY ----------------------------------------------------------- */

p {
margin-bottom : 1.5em;
font-size : .87em; /* 14 / 16 = 1 */ }

ul {
list-style-type : none;
margin-bottom : 1.5em;
font-size : .87em; /* 14 / 16 = 1 */ }

/* LINKS ------------------------------------------------------------------ */

a, a:visited {
outline : none;
color : rgb(255,255,255);
text-decoration : none; }
 
a:hover { 
color : rgb(255,255,255); 
text-decoration : underline; }
 
a:active, a:focus { 
position : relative; 
top : 1px; 
color : rgb(255,255,255); }

a.action {
padding : .5em 15px;
background-color : rgb(143,58,58); 
color : rgb(255,255,255);
font-size : .82em;  
text-shadow : 0 1px 1px rgb(0,0,0); }

a.action:hover {
background-color : rgb(119,48,48); 
text-decoration : none; }

a.action:active,
a.action:focus {
background-color : rgb(44,18,18); 
color : rgb(255,255,255); 
text-decoration : none; }

/* LAYOUT -------------------------------------------------------------- */

/* contentinfo */

footer[role="contentinfo"] {
position : relative;
width : 520px;
min-width : 520px;
max-width : 520px;
margin : 0 auto;
padding : 3em 0 1.5em; 
background : transparent url(../img/contentinfo.png) repeat-x 0 0;
text-align : center; }

footer[role="contentinfo"] h3 {
display : block;
overflow : hidden;
width : 225px;
height : 90px;
margin : 0 auto 1.5em;
background-color : transparent;
background : url(../img/contentinfo-h3.png) no-repeat 0 0;
text-indent : -9999px; }

footer[role="contentinfo"]:after { 
content : "\0020"; 
display : block; 
height : 0; 
clear : both; 
visibility : hidden; 
overflow : hidden; }

/* PAGE STYLES */

.hlisting {
position : relative;
width : 710px; 
height : 500px; 
margin : 0 auto 3em;
background : transparent url(../img/hgroup.png) no-repeat 50% 100px;
font-size : .87em; }

.hlisting img {
z-index : 2;
position : absolute;
top : 330px; 
width : 100px;
height : 150px;  
border : 5px solid rgb(100,97,113);
cursor : pointer; }

#s01 img {
left : 0; }

#s02 img {
left : 120px; }

#s03 img {
left : 240px; }

#s04 img {
left : 360px; }

#s05 img {
left : 480px; }

#s06 img {
left : 600px; }

#s07 img {
left : 720px; }

#s08 img {
left : 840px; }

.description {
z-index : 1;
position : absolute; 
top : 335px;
left : 5px;
width : 100px;
height : 150px; 
overflow : hidden; 
opacity : 1; }

#s01 .description {
left : 0; }

#s02 .description {
left : 120px;  }

#s03 .description {
left : 240px;  }

#s04 .description {
left : 360px;  }

#s05 .description {
left : 480px;  }

#s06 .description {
left : 600px;  }

#s07 .description {
left : 720px;  }

#s08 .description {
left : 840px;  }

.item:target .description {
top : 0;
left : 0!important;
width : 460px;
height : 290px; 
padding : 20px 20px 0 220px;
opacity : 1;
background-color : rgb(57,53,70);
background-repeat : no-repeat;
background-position : 20px 20px; 
border : 5px solid rgb(100,97,113); }

#s01:target .description {
background-image : url(../img/store-01.jpg); }

#s02:target .description {
left : 120px; 
background-image : url(../img/store-02.jpg); }

#s03:target .description {
background-image : url(../img/store-03.jpg); }

#s04:target .description {
background-image : url(../img/store-04.jpg); }

#s05:target .description {
background-image : url(../img/store-05.jpg); }

#s06:target .description {
background-image : url(../img/store-06.jpg); }

#s07:target .description {
background-image : url(../img/store-07.jpg); }

#s08:target .description {
background-image : url(../img/store-08.jpg); }

.item:target .description a.action {
position : absolute;
right : 20px;
bottom : 20px; }


/* VENDOR SPECIFIC ------------------------------------------------------------------- */

::-webkit-selection {
color : rgb(255,255,255);
background-color : rgb(27,34,38); 
text-shadow : none; }

::-moz-selection {
color : rgb(255,255,255);
background-color : rgb(27,34,38); 
text-shadow : none; }

::selection {
color : rgb(255,255,255);
background-color : rgb(27,34,38); 
text-shadow : none; }

.hlisting .item:target .description {
-moz-background-size : auto 270px; 
-o-background-size : auto 270px; 
-webkit-background-size : auto 270px;
background-size : auto 270px;
-webkit-background-origin : padding-box;
-moz-background-origin : padding;
-o-background-origin : padding-box;
background-origin : padding-box; }


/* MODERNIZR ------------------------------------------------------------------- */

/* borderradius */

.borderradius a.action {
-webkit-border-radius : 1em;
-moz-border-radius : 1em;
border-radius : 1em; }

.borderradius .hlisting {
-webkit-border-top-left-radius : 20px;
-webkit-border-top-right-radius : 20px;
-moz-border-radius-topleft : 20px;
-moz-border-radius-topright : 20px;
border-top-left-radius : 20px;
border-top-right-radius : 20px; }

.borderradius .item:target .description {
-webkit-border-top-left-radius : 20px;
-webkit-border-top-right-radius : 20px;
-moz-border-radius-topleft : 20px;
-moz-border-radius-topright : 20px;
border-top-left-radius : 20px;
border-top-right-radius : 20px; }

/* csscolumns */

.csscolumns .item:target .description div {
-moz-column-count : 2;
-moz-column-gap : 60px; 
-moz-column-rule : 1px solid rgb(100,97,113);
-o-column-count : 2;
-o-column-gap : 60px; 
-o-column-rule : 1px solid rgb(100,97,113);
-webkit-column-count : 2;
-webkit-column-gap : 60px; 
-webkit-column-rule : 1px solid rgb(100,97,113); 
column-column-count : 2;
column-gap : 60px;
column-rule : 1px solid rgb(100,97,113); }

/* csstransitions */

.csstransitions a { 
-webkit-transition : color .2s linear;
-moz-transition : color .2s linear;
-o-transition : color .2s linear;
transition : color .2s linear; }
/* No alternative required */

.csstransitions .item .description {
-moz-transition-property : width, height, opacity, top;
-moz-transition-duration : .5s, .5s, .75s, .5s;
-o-transition-property : width, height, opacity, top;
-o-transition-duration : .5s, .5s, .75s, .5s;
-webkit-transition-property : width, height, opacity, top;
-webkit-transition-duration : .5s, .5s, .75s, .5s;
transition-property : width, height, opacity, top;
transition-duration : .5s, .5s, .75s, .5s; } 
/* No alternative required */

/* csstransforms */

.csstransitions .item img {
-moz-transition-property : scale;
-moz-transition-duration : .25s;
-moz-transition-timing-function : ease-in-out;
-o-transition-property : scale;
-o-transition-duration : .25s;
-o-transition-timing-function : ease-in-out;
-webkit-transition-property : scale;
-webkit-transition-duration : .25s;
-webkit-timing-function : ease-in-out; 
transition-duration : .25s;
transition-timing-function : ease-in-out; }
/* No alternative required */

.csstransitions .item:hover img {
-moz-transform : scale(1.25);
-o-transform : scale(1.25);
-webkit-transform : scale(1.25);
transform : scale(1.25);
-moz-transform-origin : 50% 100%;
-o-transform-origin : 50% 100%;
-webkit-transform-origin : 50% 100%;
transform-origin : 50% 100%; }

/* fontface */

.fontface body {
font-family : AllerRegular; }

.fontface h1, 
.fontface h2 {
font-family : AllerBold; }

/* multiplebgs */

.multiplebgs body { 
background-image : url(../img/body.png), url(../img/grad.png), url(../img/paint.jpg), url(../img/html.jpg); 
background-repeat : no-repeat, repeat-x, no-repeat, repeat;
background-position : 40px 0, 0 0, 50% 0, 0 0; }

/* rgba */

.rgba body { 
color : rgba(255,255,255,.8); 
text-shadow : 0 1px 1px rgba(0,0,0,.8); }

.rgba .item:hover img {
-moz-box-shadow : 0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
-webkit-box-shadow : 0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
box-shadow : 0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5); }