-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */

/* Variable definitions
  ====================
 

 
            default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Verdana, Geneva, sans-serif"/>
   
 

 
   
   
   
 

 
   
   
   
 

 
            default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 40px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
   
 

 
            default="#777777"  value="#000000"/>
 

 
            default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="$(body.font)"/>
   
   
 

 
   
   
 

 
            default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="italic normal 24px Chewy"/>
 

 
            default="$(body.text.color)" value="#a64d79"/>
            default="transparent" value="transparent"/>
 

 
   
            default="#f9f9f9" value="#ffffff"/>
   
 

 
           default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 14px Neucha"/>
   
   
 

 
   
   
   
 

 
   
   
 

        color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) url(http://1.bp.blogspot.com/-3IW1bHM960A/U4nhQbJMyrI/AAAAAAAAAHs/5SX8AsjY9iQ/s0/1800x1600%2Bblogger%2Bbackground%2B%252811%2529.jpg) repeat-y scroll top center"/>
 

        default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
        default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="none"/>

 
 
 
 
 
 

 

 
 
 
 
 

 
 
 

 

 
 
        default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
 
 

 
 
 

 

 
 

 
 

 
 
 
 

        color="$(content.background.color)"
      description="Background of blog paging area" type="background"
      default="transparent none no-repeat scroll top center" value="transparent url(//www.blogblog.com/1kt/simple/paging_dot.png) repeat-x scroll top center"/>

 

        default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
 
 

 
 
*/

/* Content
----------------------------------------------- */
body {
 font: $(body.font);
 color: $(body.text.color);
background: $(body.background);
background-attachment: fixed;
 padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
 $(body.background.override)
}

html body $(page.width.selector) {
 min-width: 0;
 max-width: 100%;
 width: $(page.width);
}

a:link {
 text-decoration:none;
 color: $(link.color);
}

a:visited {
 text-decoration:none;
 color: $(link.visited.color);
}

a:hover {
 text-decoration:underline;
 color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
 background: transparent $(body.background.gradient.tile) repeat scroll top left;
 _background-image: none;
}

.body-fauxcolumn-outer .cap-top {
 position: absolute;
 z-index: 1;
 height: 400px;
 width: 100%;
 background: $(body.background);
 $(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
 width: 100%;
 background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
 _background-image: none;
}

.content-outer {
 -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
 -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
 -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
 box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

 margin-bottom: 1px;
}

.content-inner {
 padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
 background-color: $(content.background.color);
}

/* Header
----------------------------------------------- */
.header-outer {
 background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
 _background-image: none;
}

.Header h1 {
 font: $(header.font);
 color: $(header.text.color);
 text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
 color: $(header.text.color);
}

.Header .description {
 font-size: $(description.text.size);
 color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
 padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
 padding: 0 $(header.padding);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
 border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
 margin-top: -$(header.border.size);
 border-top: $(header.border.size) solid $(tabs.border.color);
 border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
 border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
 background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
 _background-image: none;
 border-bottom: $(tabs.border.width) solid $(tabs.border.color);

 margin-top: $(tabs.margin.top);
 margin-left: -$(tabs.margin.side);
 margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
 display: inline-block;

 padding: .6em 1em;

 font: $(tabs.font);
 color: $(tabs.text.color);

 border-$startSide: $(tabs.border.width) solid $(content.background.color);
 border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
 border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
 color: $(tabs.selected.text.color);
 background-color: $(tabs.selected.background.color);
 text-decoration: none;
}

/* Columns
----------------------------------------------- */
.main-outer {
 border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
 border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
 border-left: 1px solid $(body.rule.color);
}

/* Headings
----------------------------------------------- */
h2 {
 margin: 0 0 1em 0;

 font: $(widget.title.font);
 color: $(widget.title.text.color);
}

/* Widgets
----------------------------------------------- */
.widget .zippy {
 color: $(widget.alternate.text.color);
 text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

.widget .popular-posts ul {
 list-style: none;
}

/* Posts
----------------------------------------------- */
.date-header span {
 background-color: $(date.header.background.color);
 color: $(date.header.color);
 padding: $(date.header.padding);
 letter-spacing: $(date.header.letterspacing);
 margin: $(date.header.margin);
}

.main-inner {
 padding-top: $(main.padding.top);
 padding-bottom: $(main.padding.bottom);
}

.main-inner .column-center-inner {
 padding: 0 $(main.padding);
}

.main-inner .column-center-inner .section {
 margin: 0 $(main.section.margin);
}

.post {
 margin: 0 0 $(post.margin.bottom) 0;
}

h3.post-title, .comments h4 {
 font: $(post.title.font);
 margin: .75em 0 0;
}

.post-body {
 font-size: 110%;
 line-height: 1.4;
 position: relative;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
 padding: $(image.border.small.size);

 background: $(image.background.color);
 border: 1px solid $(image.border.color);

 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
 padding: $(image.border.large.size);
}

.post-body .tr-caption-container {
 color: $(image.text.color);
}

.post-body .tr-caption-container img {
 padding: 0;

 background: transparent;
 border: none;

 -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
 box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

.post-header {
 margin: 0 0 1.5em;

 line-height: 1.6;
 font-size: 90%;
}

.post-footer {
 margin: 20px -2px 0;
 padding: 5px 10px;

 color: $(post.footer.text.color);
 background-color: $(post.footer.background.color);
 border-bottom: 1px solid $(post.footer.border.color);

 line-height: 1.6;
 font-size: 90%;
}

#comments .comment-author {
 padding-top: 1.5em;

 border-top: 1px solid $(body.rule.color);
 background-position: 0 1.5em;
}

#comments .comment-author:first-child {
 padding-top: 0;
 border-top: none;
}

.avatar-image-container {
 margin: .2em 0 0;
}

#comments .avatar-image-container img {
 border: 1px solid $(image.border.color);
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
 background-repeat: no-repeat;
 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
 border-top: 1px solid $(widget.alternate.text.color);
 border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .comment-thread.inline-thread {
 background-color: $(post.footer.background.color);
}

.comments .continue {
 border-top: 2px solid $(widget.alternate.text.color);
}

/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
 border-$startSide: 1px solid $(body.rule.color);
}

.blog-pager {
 background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
 background-color: $(content.background.color);
 padding: 5px;
}

.footer-outer {
 border-top: $(footer.bevel) dashed #bbbbbb;
}

/* Mobile
----------------------------------------------- */
body.mobile  {
 background-size: $(mobile.background.size);
}

.mobile .body-fauxcolumn-outer {
 background: $(mobile.background.overlay);
}

.mobile .body-fauxcolumn-outer .cap-top {
 background-size: 100% auto;
}

.mobile .content-outer {
 -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
 box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}

body.mobile .AdSense {
 margin: 0 -$(content.shadow.spread);
}

.mobile .tabs-inner .widget ul {
 margin-left: 0;
 margin-right: 0;
}

.mobile .post {
 margin: 0;
}

.mobile .main-inner .column-center-inner .section {
 margin: 0;
}

.mobile .date-header span {
 padding: 0.1em 10px;
 margin: 0 -10px;
}

.mobile h3.post-title {
 margin: 0;
}

.mobile .blog-pager {
 background: transparent none no-repeat scroll top center;
}

.mobile .footer-outer {
 border-top: none;
}

.mobile .main-inner, .mobile .footer-inner {
 background-color: $(content.background.color);
}

.mobile-index-contents {
 color: $(body.text.color);
}

.mobile-link-button {
 background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
 color: $(mobile.button.color);
}

.mobile .tabs-inner .section:first-child {
 border-top: none;
}

.mobile .tabs-inner .PageList .widget-content {
 background-color: $(tabs.selected.background.color);
 color: $(tabs.selected.text.color);
 border-top: $(tabs.border.width) solid $(tabs.border.color);
 border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
 border-$startSide: 1px solid $(tabs.border.color);
}
.progress-bar {
   background-color: #ECCEF5;
   height: 15px;
   padding: 3px;
   width: 200px;
   margin: 20px 0px;        
   border-radius: 15px;
   box-shadow: 5px 5px 5px #ECCEF5 inset, 5 5px 5 #ECCEF5;          
}

.progress-bar span {
   display: inline-block;
   height: 100%;
   border-radius: 15px;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
   transition: width .4s ease-in-out;    
}

.blue span {
     background-color: #100719;
     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#100719), to(#FE2E2E));
 background: -moz-linear-gradient(top, #100719, #FE2E2E);  
}

/* Preview styling only
------------------------ */

body {
background: transparent no-repeat position:fixed;
}

article {
margin: 0 10px;
}

/* The awesome
------------------ */

/* Shelf (Works best in Webkit) */
.shelf {
position: relative;
width: 1000px;
border-bottom: 13px solid #24252a;
text-align: center;
padding: 0 27px;
 margin: 20px auto;
 background: transparent;
}

.shelf:after {
position: absolute;
bottom: -13px;
left: 34px;
height: 10px;
background: transparent;
content: "";
-webkit-transform: perspective( 150 ) rotateX( -25deg );
  -moz-transform: perspective( 150 ) rotateX( -25deg );
   -ms-transform: perspective( 150 ) rotateX( -25deg );
       transform: perspective( 150 ) rotateX( -25deg );
right: 34px;
box-shadow: 0 0 17px 5px rgba(0, 0, 0, 0.7);
z-index: -1;
}

.shelf > div {
border-bottom: 23px solid #303138;
position: relative;
z-index: 1;
}

.shelf > div:before {
 content: '';
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 0 0 23px 27px;
 border-color: transparent transparent #303138 transparent;
 position: absolute;
 bottom: -23px;
 left: -27px;
 z-index: 2;
 -webkit-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 transform:rotate(360deg);
}

.shelf > div:after {
 content: '';
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 23px 0 0 27px;
 border-color: transparent transparent transparent #303138;
 position: absolute;
 bottom: -23px;
 right: -27px;
 z-index: 2;
}

.shelf > div > * {
position: relative;
z-index: 2;
top: 18px;
}


/* Default case template (Bluray) */

.case {
display: inline-block;
width: 142px;
height: 179px;
border-radius: 5px;
position: relative;
z-index: 1;
}

.case:after {
width: 100%;
height: 10px;
border-radius: 20px;
content: "";
background: rgba(0, 0, 0, 0.3);
position: absolute;
bottom: -5px;
-webkit-transform: perspective(600) rotateX(100deg);
  -moz-transform: perspective(600) rotateX(100deg);
   -ms-transform: perspective(600) rotateX(100deg);
    -o-transform: perspective(600) rotateX(100deg);
       transform: perspective(600) rotateX(100deg);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
left: 0;
}

.case > div {
width: 100%;
height: 100%;
background: #46b0e9;
background: rgba(70, 176, 233, 0.;
border-radius: 8px 8px 5px 5px;
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
padding: 14px 3px 3px 0;
overflow: hidden;
position: relative;
}

.case > div:after {
content: "";
position: absolute;
top: 0;
left: 35px;
width: 100%;
height: 200%;
background: rgba(255, 255, 255, 0.2);
z-index: 10;
-webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
       transform: rotate(30deg);
}

.case > div > .logo {
position: absolute;
top: 5px;
left: 0;
width: 100%;
}

.case > div > .logo > img {
max-height: 8px;
width: auto;
margin: auto;
display: block;
}

.case > div > .img {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
width: 100%;
height: 100%;
padding: 1px 1px 1px 0;
border-radius: 0 4px 4px 0;
background: rgba(0, 0, 0, 0.2);
position: relative;
}

.case > div > .img:before {
content: "";
position: absolute;
top: -10px;
left: 1px;
width: 2px;
bottom: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
z-index: 3;
}

.case > div > .img:after {
content: "";
position: absolute;
top: -13px;
left: 1px;
right: -2px;
height: 15px;
border-top: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
}

.case > div > .img > span {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
width: 100%;
height: 100%;
padding: 1px 1px 1px 0;
border-radius: 0 4px 4px 0;
background: rgba(255, 255, 255, 0.2);
display: block;
position: relative;
}

.case > div > .img > span:before {
position: absolute;
top: 2px;
left: 0;
width: 0;
height: 100%;
content: "";
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
z-index: 2;
}

.case > div > .img > span:after {
position: absolute;
top: 5px;
left: 0;
width: 0;
height: 100%;
content: "";
box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.3);
z-index: 1;
}

.case > div > .img > span > img {
width: 100%;
height: 100%;
display: block;
border-radius: 0 3px 3px 0;
}


/* PS3 */
.case.ps3 > div {
background: #fff;
background: rgba(239, 239, 239, 0.;
}

.case.ps3 > div > .logo {
text-align: left;
overflow: hidden;
}

.case.ps3 > div > .logo > img {
float: left;
margin-left: 10px;
}

.case.ps3 > div > .logo > img + img {
float: right;
margin-right: 7px;
max-height: 3px;
margin-top: 2px;
}

/* XBOX 360 */
.case.xbox {
height: 210px;
}

.case.xbox > div {
background: #transparent;
background: rgba(0, 0, 0, 0);
padding: 1px 1px 1px 0;
border-radius: 2px 5px 5px 2px;
}

/* CD */
.case.cd {
height: 131px;
}

.case.cd > div {
background: #fff;
background: rgba(255, 255, 255, 0.15);
border-radius: 0;
padding: 1px 1px 1px 13px;
border: 1px solid rgba(0, 0, 0, 0.6);
}

.case.cd > div > .img {
border-radius: 0;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.6);
}

.case.cd > div > .img:after,
.case.cd > div > .img > span:before,
.case.cd > div > .img > span:after {
display: none;
}

.case.cd > div > .img:before {
box-shadow: none;
width: 12px;
background-color: #444;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(0, 0, 0, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
border-radius: 0;
background-size: 2px 100%;
top: -1px;
bottom: -1px;
left: -14px;
}

.case.cd > div > .img > span {
background: transparent;
}

.case.cd > div > .img > span > img {
border-radius: 0;
}

.img-zoom {
   width: 50px; /*largeur image réduite*/

   /* Effet de transition du changement de valeur */
   -moz-transition: width 1s linear;
   -o-transition: width 1s linear;
   -webkit-transition: width 1s linear;
   transition: width 1s linear;
}

.img-zoom:hover {
   width: 250px; /*largeur image agrandie*/
}

/* Bloc principal */
.monBloc {
 position: relative; /* important ! */
 overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
font-variant: small-caps ;
font-size: 15px;
 text-shadow: black 1px 1px 2px;
 color: #000000;
 width: 200px; /* largeur du bloc */
 height: 200px; /* hauteur du bloc */
 background: #transparent; /* couleur de fond */
box-shadow: -1px 2px 5px 3px rgba(0, 0, 0, 0.7)
}


/* Bloc de recouvrement */
.blocVolet {
 position: absolute; /* positionnement absolu (important) */
 top: 0; /* (important) */
 left: 0; /* (important) */
 width: 200px; /* largeur du bloc (identique au bloc principal) */
 height: 200px; /* hauteur du bloc (identique au bloc principal) */
 background: none; /* couleur de fond */
background-image:url(https://2img.net/r/hpimg15/pics/434959NatureBoybythienbaocopie.jpg);

 /* réglage de la transition */
 -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -ms-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
 top: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}

#menu-accordeon {
 padding:0;
 margin:0;
 list-style:none;
 text-align: center;
 width: 180px;
}
#menu-accordeon ul {
 padding:0;
 margin:0;
 list-style:none;
 text-align: center;
}
#menu-accordeon li {
  background-color:#BE81F7;
  background-image:-webkit-linear-gradient(top, #BE81F7 0%, #240B3B 100%);
  background-image: linear-gradient(to bottom, #BE81F7 0%, #240B3B 100%);
  border-radius: 6px;
  margin-bottom:2px;
  box-shadow: 2px 2px 2px #BE81F7;
  border:solid 1px #
}
#menu-accordeon li li {
  max-height:0;
  overflow: hidden;
  transition: all .5s;
  border-radius:0;
  background: #100719;
  box-shadow: none;
  border:none;
  margin:0
}
#menu-accordeon a {
 display:block;
 text-decoration: none;
 color: #fff;
 padding: 8px 0;
 font-family: verdana;
 font-size:1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
 font-size:1em
}
#menu-accordeon li:hover {
  background: #BE81F7;
}
#menu-accordeon li li:hover {
  background: #FE2E2E;
}
#menu-accordeon ul li:last-child {
  border-radius: 0 0 6px 6px;
  border:none;
}
#menu-accordeon li:hover li {
 max-height: 15em;
}

div.background
{
width:620px;
height:auto;
box-shadow: 2px 2px 2px #F5ECCE;
border:0px solid black;
background-filter:alpha(opacity=60);
background-opacity:0.6;
}
div.transbox
{
width:600px;
height:auto;
margin:0px 0px;
padding: 10px;
background-color:#ffffff;
border:0px solid black;

}
div.transbox p
{
margin:5px 5px;
font-weight:bold;
color:#000000;
}]]>

   
     
     
     

           body {
       min-width: $(content.width);
     }

     .content-outer, .content-fauxcolumn-outer, .region-inner {
       min-width: $(content.width);
       max-width: $(content.width);
       _width: $(content.width);
     }

     .main-inner .columns {
       padding-left: $(main.column.left.width);
       padding-right: $(main.column.right.width);
     }

     .main-inner .fauxcolumn-center-outer {
       left: $(main.column.left.width);
       right: $(main.column.right.width);
       /* IE6 does not respect left and right together */
       _width: expres​sion(this.parentNode.offsetWidth -
           parseInt("$(main.column.left.width)") -
           parseInt("$(main.column.right.width)") + 'px');
     }

     .main-inner .fauxcolumn-left-outer {
       width: $(main.column.left.width);
     }

     .main-inner .fauxcolumn-right-outer {
       width: $(main.column.right.width);
     }

     .main-inner .column-left-outer {
       width: $(main.column.left.width);
       right: 100%;
       margin-left: -$(main.column.left.width);
     }

     .main-inner .column-right-outer {
       width: $(main.column.right.width);
       margin-right: -$(main.column.right.width);
     }

     #layout {
       min-width: 0;
     }

     #layout .content-outer {
       min-width: 0;
       width: 800px;
     }

     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
 

/* Shelf (Works best in Webkit) */
.shelf {
position: relative;
width: 1000px;
border-bottom: 13px solid #24252a;
text-align: center;
padding: 0 27px;
margin: 20px auto;
background: transparent;
}

.shelf:after {
position: absolute;
bottom: -13px;
left: 34px;
height: 10px;
background: transparent;
content: "";
-webkit-transform: perspective( 150 ) rotateX( -25deg );
-moz-transform: perspective( 150 ) rotateX( -25deg );
-ms-transform: perspective( 150 ) rotateX( -25deg );
transform: perspective( 150 ) rotateX( -25deg );
right: 34px;
box-shadow: 0 0 17px 5px rgba(0, 0, 0, 0.7);
z-index: -1;
}

.shelf > div {
border-bottom: 23px solid #303138;
position: relative;
z-index: 1;
}

.shelf > div:before {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 23px 27px;
border-color: transparent transparent #303138 transparent;
position: absolute;
bottom: -23px;
left: -27px;
z-index: 2;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}

.shelf > div:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 23px 0 0 27px;
border-color: transparent transparent transparent #303138;
position: absolute;
bottom: -23px;
right: -27px;
z-index: 2;
}

.shelf > div > * {
position: relative;
z-index: 2;
top: 18px;
}


/* Default case template (Bluray) */

.case {
display: inline-block;
width: 142px;
height: 179px;
border-radius: 5px;
position: relative;
z-index: 1;
}

.case:after {
width: 100%;
height: 10px;
border-radius: 20px;
content: "";
background: rgba(0, 0, 0, 0.3);
position: absolute;
bottom: -5px;
-webkit-transform: perspective(600) rotateX(100deg);
-moz-transform: perspective(600) rotateX(100deg);
-ms-transform: perspective(600) rotateX(100deg);
-o-transform: perspective(600) rotateX(100deg);
transform: perspective(600) rotateX(100deg);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
left: 0;
}

.case > div {
width: 100%;
height: 100%;
background: #46b0e9;
background: rgba(70, 176, 233, 0.Cool;
border-radius: 8px 8px 5px 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 14px 3px 3px 0;
overflow: hidden;
position: relative;
}

.case > div:after {
content: "";
position: absolute;
top: 0;
left: 35px;
width: 100%;
height: 200%;
background: rgba(255, 255, 255, 0.2);
z-index: 10;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

.case > div > .logo {
position: absolute;
top: 5px;
left: 0;
width: 100%;
}

.case > div > .logo > img {
max-height: 8px;
width: auto;
margin: auto;
display: block;
}

.case > div > .img {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 1px 1px 1px 0;
border-radius: 0 4px 4px 0;
background: rgba(0, 0, 0, 0.2);
position: relative;
}

.case > div > .img:before {
content: "";
position: absolute;
top: -10px;
left: 1px;
width: 2px;
bottom: 0;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
z-index: 3;
}

.case > div > .img:after {
content: "";
position: absolute;
top: -13px;
left: 1px;
right: -2px;
height: 15px;
border-top: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
}

.case > div > .img > span {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 1px 1px 1px 0;
border-radius: 0 4px 4px 0;
background: rgba(255, 255, 255, 0.2);
display: block;
position: relative;
}

.case > div > .img > span:before {
position: absolute;
top: 2px;
left: 0;
width: 0;
height: 100%;
content: "";
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
z-index: 2;
}

.case > div > .img > span:after {
position: absolute;
top: 5px;
left: 0;
width: 0;
height: 100%;
content: "";
box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.3);
z-index: 1;
}

.case > div > .img > span > img {
width: 100%;
height: 100%;
display: block;
border-radius: 0 3px 3px 0;
}


/* PS3 */
.case.ps3 > div {
background: #fff;
background: rgba(239, 239, 239, 0.Cool;
}

.case.ps3 > div > .logo {
text-align: left;
overflow: hidden;
}

.case.ps3 > div > .logo > img {
float: left;
margin-left: 10px;
}

.case.ps3 > div > .logo > img + img {
float: right;
margin-right: 7px;
max-height: 3px;
margin-top: 2px;
}

/* XBOX 360 */
.case.xbox {
height: 210px;
}

.case.xbox > div {
background: #transparent;
background: rgba(0, 0, 0, 0);
padding: 1px 1px 1px 0;
border-radius: 2px 5px 5px 2px;
}

/* CD */
.case.cd {
height: 131px;
}

.case.cd > div {
background: #fff;
background: rgba(255, 255, 255, 0.15);
border-radius: 0;
padding: 1px 1px 1px 13px;
border: 1px solid rgba(0, 0, 0, 0.6);
}

.case.cd > div > .img {
border-radius: 0;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.6);
}

.case.cd > div > .img:after,
.case.cd > div > .img > span:before,
.case.cd > div > .img > span:after {
display: none;
}

.case.cd > div > .img:before {
box-shadow: none;
width: 12px;
background-color: #444;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(0, 0, 0, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: -ms-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(0deg, rgba(0, 0, 0, .2) 50%, transparent 50%, transparent);
border-radius: 0;
background-size: 2px 100%;
top: -1px;
bottom: -1px;
left: -14px;
}

.case.cd > div > .img > span {
background: transparent;
}

.case.cd > div > .img > span > img {
border-radius: 0;
}