HTML{
    margin: 0;
    padding: 0;}

BODY {
    margin: 0;
    padding: 0;
    background: url(diamondplate3.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 750px;
}

.page-wrapper{
    width: 703px;
    position: absolute; left: 50%;
    margin-left: -352px;
}

.extra4 {
    width: 500px;
    z-index: -100;
    margin:50px 0 80px 172px;
    position: absolute;
    left: 25.4%;
    height:100px;
    box-shadow:0 12px 20px rgba(0,0,0,.9);

    background: -webkit-radial-gradient( rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%),
    -webkit-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);

    background: -moz-radial-gradient( rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%),
    -moz-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
}
.extra4::before{
    content:"";
    position:absolute;
    background:-webkit-radial-gradient( rgba(66, 200, 239, 1) 0%, rgba(3, 171, 228, 0) 80%);
    background:-moz-radial-gradient( rgba(66, 200, 239, 1) 0%, rgba(3, 171, 228, 0) 80%);
    bottom:0;
    top:85px;
    left:100px;
    right:100px;
}
.extra4::after {
    content: "";
    position: absolute;
    background: -webkit-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    background: -moz-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    bottom: 5px;
    top: 76px;
    left: 40px;
    right: 40px;
}
header {
    width: 500px;
    height: 85px;
    margin: 0 0 80px 172px;
    background:transparent;
}

h1{
    width: 500px;
    height: 76px;
    position:absolute;
    color: transparent;
    font: italic 3.5em "Helvetica Neue";
    font-weight:lighter;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -2px;
    text-shadow:-1px -1px 0 black, 1px 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 3px 4px rgba(167, 221, 255, 1), 0 -6px 7px rgba(0, 0, 0, 0.5);
}
h1::before
{
    content:"CSS Zen Garden";
    text-transform:uppercase;
    position:absolute;
    color:#fff;
    left:0;
    right:0;
}

h1::after
{
    content:"CSS Zen Garden";
    text-transform:uppercase;
    position:absolute;
    color:#525b73;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    left:0;
    right:0;
}


h2{
    width: 500px;
    margin: 108px 0 0 0;
    position:relative;
    color: transparent;
    font: italic 1.8rem "Helvetica Neue";
    font-weight:lighter;
    text-transform: uppercase;
    text-align: center;
    clear:both;
    float: left;
    letter-spacing: -1px;
    text-shadow:-1px -1px 0 black, 1px 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 3px 4px rgba(167, 221, 255, 1), 0 -6px 7px rgba(0, 0, 0, 0.5);
}
h2::before
{
    content:"The Beauty of CSS Design";
    text-transform:uppercase;
    position:absolute;
    color:#fff;
    left:0;
    right:0;
}

h2::after
{
    content:"The Beauty of CSS Design";
    text-transform:uppercase;
    position:absolute;
    color:#525b73;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    left:0;
    right:0;
}



.explanation h3, .participation h3, .benefits h3, .requirements h3, .preamble h3
{

    text-align: center;
    color: #CCCCCC;
    font: italic 1.8rem "Helvetica Neue";
    font-weight:lighter;
    text-shadow:-1px -1px 0 black, 1px 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 3px 4px rgba(167, 221, 255, 1), 0 -6px 7px rgba(0, 0, 0, 0.5);

}



.extra1 {
    background: url(skull2%20%5BConverted%5D.png) no-repeat;
    position: absolute; top: 23px; right: 338px;
    margin-right: 580px;
    width:190px;
    height:380px;
    transform: translateX(-800%);
    animation: extra2move 2s ease-out 1s 1 normal forwards;
    -webkit-animation: extra2move 1s ease-out 1s 1 normal forwards;
}

@keyframes extra2move {
    0% {
        transform: translateX(-800%) rotate(0deg);
    }
    100% {
        transform: translateX(0) rotate(-360deg);
    }
}
@-webkit-keyframes extra2move {
    0% {
        transform: translateX(-800%) rotate(0deg);
    }
    100% {
        transform: translateX(0) rotate(-360deg);
    }

}


.extra3{
    z-index: -100;
    margin:0;
    padding: 0;
    width:490px;
    height:1575px;
    background: #28323c url(firecolor.jpg) repeat fixed 50% 48%;
    position: absolute; left: 37.9%; top:32%;
}
P{
    font: 12pt Times, "Times New Roman", Georgia, Verdana, serif;
    color: #cfb35b;
    text-align: left;
    text-indent: 10px;
    padding: 3px 5px 2px 5px;
    margin: 0;}

.preamble p:nth-child(4), .explanation p:nth-child(3), .participation p:nth-child(4), .benefits p:nth-child(2), .requirements p:nth-child(6){
    padding-bottom: 5px;
    border-bottom: solid 1px #cfb35b;}

abbr{
    border: none;}

A:link, A:visited{
    color: #cfb35b;}

A:hover, A:active{
    color: #000;
    background: #cfb35b;}

.preamble {

    width: 500px;
    margin: 0 0 25px 172px;
    border-bottom: solid 1px #000;
    box-shadow: 0 12px 20px rgba(0, 0, 0, .9);
    background: -webkit-linear-gradient(left, #0f182b 0%, #2a3b53 33%, #2a3b53 66%, #0f182b 100%);
    background: -moz-linear-gradient(to right, #0f182b 0%, #2a3b53 33%, #2a3b53 66%, #0f182b 100%);
}


.supporting{
    width: 500px;
    margin: 0 0 0 170px;
    padding: 0 0 31px 0;
}

.explanation, .participation, .benefits, .requirements{

    width: 500px;
    margin: 0 0 25px 2px;
    border-bottom: solid 1px #000;
    box-shadow:0 12px 20px rgba(0,0,0,.9);
    background: -webkit-linear-gradient(left, #0f182b 0%,#2a3b53 33%,#2a3b53 66%,#0f182b 100%);
    background: -moz-linear-gradient(to right, #0f182b 0%,#2a3b53 33%,#2a3b53 66%,#0f182b 100%);
}


/*footer*/
footer{
    width: 500px;
    color: #cfb35b
text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    word-spacing: 2px;
    padding: 5px 0 0 0;
    margin: -10px 0 0 2px;
    border-top: solid 1px #cfb35b;
    box-shadow:0 12px 20px rgba(0,0,0,.9);
    background: -webkit-linear-gradient(left, #0f182b 0%,#2a3b53 33%,#2a3b53 66%,#0f182b 100%);
    background: -moz-linear-gradient(to right, #0f182b 0%,#2a3b53 33%,#2a3b53 66%,#0f182b 100%);

}
html>body footer{
    padding: 8px 0 0 0;
}

footer a:link, a:visited{
    font-size: 11pt;
    text-decoration: none;
    color: #cfb35b;

}

footer a:hover, a:active{
    color: #cfb35b;
    background: #000;
}

/*nav*/
UL{
    list-style-type: none;
    margin: 0 3px 0 0;
    padding: 0;
    border-top: double 3px #cfb35b;
    background: url(#) no-repeat center 3px;}   html>body UL{background: url(#) no-repeat top;}

li{
    padding: 0 0 9px 0;
    margin: 0 10px 0 10px;
    background: url(#) no-repeat center bottom;
}
html>body Li{
    padding: 5px 0 9px 0;
}

.sidebar{

    position: absolute; top:344px; right: 538px;
    margin: 0;
    width: 169px;
    padding-bottom: 13px;
    box-shadow:0 12px 20px rgba(0,0,0,.9);
    background: -webkit-radial-gradient( rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%),
    -webkit-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
    background: -moz-radial-gradient( rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%),
    -moz-linear-gradient(top, black 0%,#282F44 6%,#2C3551 52%,#354262 91%,#050C54 100%);
}

.sidebar::before
{
    content:"";
    position:absolute;
    background:-webkit-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    background:-moz-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    bottom:5px;
    top:76px;
    left:40px;
    right:40px;
}
.sidebar::after
{
    content:"";
    position:absolute;
    background:-webkit-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    background:-moz-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    bottom:5px;
    top:76px;
    left:40px;
    right:40px;

}
.sidebar .wrapper{
    text-align: center;
}

.design-name  {
    position:relative;
    margin:0;
    font: italic 24px "Helvetica Neue";
    font-weight:lighter;
    text-transform: uppercase;
    letter-spacing: -1px;
    text-shadow:-1px -1px 0 black, 1px 1px 0 black, -1px 0 0 black, 1px 0 0 black, 0 3px 4px rgba(167, 221, 255, 1), 0 -6px 7px rgba(0, 0, 0, 0.5);

}
.design-name:before
{

    content:"";
    text-transform:uppercase;
    position:absolute;
    color:white;
    left:0;
    right:0;
}
.design-name:after
{
    content:"";
    text-transform:uppercase;
    position:absolute;
    color:#525b73;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    left:0;
    right:0;
}

.design-selection, .design-archives, .zen-resources{
    padding: 0 0 20px 0;}

.design-selection h3, .design-archives h3, .zen-resources h3{
    height: 23px;
    margin: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;}



.sidebar li a:link,li a:visited{
    color: #cfb35b;
    display: block;

}


.sidebar li a:hover,li a:active {
    color: #000;
    background: #cfb35b;
}

.summary {
    width: 169px;
    position: absolute;
    right: 538px;
    top: 1473px;
    padding: 5px 0 50px 0;
    box-shadow: 0 12px 20px rgba(0, 0, 0, .9);

    background: -webkit-radial-gradient( rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%),
    -webkit-linear-gradient(top, black 0%, #282F44 6%, #2C3551 52%, #354262 91%, #050C54 100%);

    background: -moz-radial-gradient( rgba(160, 201, 215, 0.8) 0%, rgba(160, 201, 215, 0) 70%),
    -moz-linear-gradient(top, black 0%, #282F44 6%, #2C3551 52%, #354262 91%, #050C54 100%);
}
.summary::before {
    content:"";
    position:absolute;
    background:-webkit-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    background:-moz-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    bottom:5px;
    top:76px;
    left:40px;
    right:40px;
}
.summary::after {
    content:"";
    position:absolute;
    background:-webkit-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    background:-moz-radial-gradient( rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    bottom:5px;
    top:76px;
    left:40px;
    right:40px;
}
.summary p:first-child{
    display: none}

.summary p:last-child{
    text-align: center;
    text-indent: 0;
    padding: 0 0 10px 0;
    margin: 0 13px 0 10px;
    background: url(#) no-repeat center bottom;}

.summary p:last-child a:link, a:visited{
    font-weight: bold;
    text-decoration: none;}

.summary p:last-child a:hover, a:active{
    color: #000;
    background: #cfb35b;
}

.extra2{
    width: 167px;
    height: 1px;
    background: #cfb35b;
    position: absolute; top: 1473px; right: 538px;
    margin-right: 369px;
}