/**
 *
 * License Layers Demo CSS
 * 
 * copyright 2010, Creative Commons, Nathan Yergler, Alex Roberts
 * licensed to the public under CC BY 3.0 Unported
 * <http://creativecommons.org/licenses/by/3.0/>.
 * 
 **/

body {
    font-family: helvetica, ariel, sans-serif;
}

img {
    border: none;
}

#container { 
    position:relative; 
    width: 960px;
    height: 500px;
    margin: auto;
}

#footer {
    width: 960px;
    margin: auto;
    font-size: 0.7em;
}

.layer {
    
    position: absolute; 
    left: 150;
    top: 125;
    
    width: 201px; 
    height: 208px; 

    opacity: 1;
    background-color: #ffe;
    background-repeat: no-repeat;
    background-position: center;

    -moz-box-shadow: -5px 5px 5px #888;
    -webkit-box-shadow: -5px 5px 5px #888;
    box-shadow: -5px 5px 5px #888;

    -moz-transition: -moz-transform 0.75s ease-in-out, opacity 0.75s, left 0.75s ease-in-out; 
    -webkit-transition: -webkit-transform 0.75s ease-in-out, opacity 0.75s, left 0.75s ease-in-out;
    -o-transition: -o-transform 0.75s ease-in-out, opacity 0.75s, left 0.75s ease-in-out; 
}

.iso {
    
    position: absolute; 
    left: 100; 
    top: 125;
    
    width: 201px; 
    height: 208px; 

    opacity: 1;
    background-color: #ffe;
    background-repeat: no-repeat;
    background-position: center;

    cursor: pointer;

    -moz-box-shadow: -5px 5px 5px #888;
    -webkit-box-shadow: -5px 5px 5px #888;
    box-shadow: -5px 5px 5px #888;

    -moz-transform: rotate(-45deg) skew(15deg, 15deg); 
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg); 
    -o-transform: rotate(-45deg) skew(15deg, 15deg); 

}

#cc:hover, .hover {
    -moz-box-shadow: -5px 5px 5px gold;
    -webkit-box-shadow: -5px 5px 5px gold;
    box-shadow: -5px 5px 5px gold;
}

.dimmed {
    opacity: 0.15 !important;

}

.exploded {
    border: 1px solid #666;
    opacity: 1;

    -moz-transition: -moz-transform 1s ease-in-out, opacity 0.5s; 
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity 0.5s; 
    -o-transition: all 1s ease-in-out; 
}

#cc { 
    opacity: 1;
    display: block;
    border: 1px solid #666;
    background-image : url('img/cc.png');
    cursor: pointer;
}

#cc.iso {
}

#cc.exploded { 
    opacity: 0 !important;

    -moz-transform: rotate(-45deg) skew(15deg, 15deg) translate(20em,-20em); 
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg) translate(20em,-20em); 
    -o-transform: rotate(-45deg) skew(15deg, 15deg) translate(20em,-20em);

    -moz-transition: -moz-transform 1s ease-in-out, opacity 1s ease-in-out !important;
    -webkit-transition: -webkit-transform 1s ease-in-out, opacity 1s ease-in-out !important;
    -o-transition: -o-transform 1s ease-in-out, opacity 1s ease-in-out !important

}

#machine {
    background-image: url('img/machine.svg'), url('img/machine.png');
}

#machine.exploded { 
    -moz-transform: rotate(-45deg) skew(15deg, 15deg) translate(3em,-3em); 
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg) translate(3em,-3em); 
    -o-transform: rotate(-45deg) skew(15deg, 15deg) translate(3em,-3em);
}

#human { 
    background-image: url('img/human.svg'), url('img/human.png');
}

#human.exploded { 
} 

#legalcode { 
    background-image: url('img/legalcode.svg'), url('img/legalcode.png');
}

#legalcode.exploded { 
    -moz-transform: rotate(-45deg) skew(15deg, 15deg) translate(-3em,3em); 
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg) translate(-3em,3em); 
    -o-transform: rotate(-45deg) skew(15deg, 15deg) translate(-3em,3em); 
}

.focused { 
    z-index:1; 

    -moz-transform: scale(2.0) translate(5em, 1em) !important;
    -webkit-transform: scale(2.0) translate(5em, 1em) !important;
    -o-transform: scale(2.0) translate(5em, 1em) !important;
}

.description { 
    opacity: 0;
    position: absolute;
    left: 600px;

    -moz-transition: opacity 0.75s, display: 0.75s;
    -webkit-transition: opacity 0.75s;
    -o-transition: opacity 0.75s;
} 

.focusedtext { 
    display: block;
    opacity: 1 !important;
    z-index: 1;
}