/** Read Write Code Play CSS **/
/** Created by Andrew Wooldridge **/
/** with help from  http://www.markdotto.com/2011/01/05/3d-text-using-just-css/ */

body {
    background-color: #6448a5;
}
body.showres .hd{
    opacity: .3;
}

.mod{
    height: 700px;
    width: 700px;
    background: -webkit-radial-gradient(center, ellipse cover, #b295e5 0%,#9b5ec4 30%,#6448a5 60%);
    background:    -moz-radial-gradient(center, ellipse cover, #b295e5 0%,#9b5ec4 30%,#6448a5 60%);
    position: relative;
    margin: auto;
}

.hd {
    height: 50%;
    width: 50%;
    top: 25%;
    left: 25%;
    position: absolute;
    z-index: 200;
}

.word {
    
    font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    color: #FFE;
      text-shadow: 0 1px 0 #ccc, 
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25),
        0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
}


.read {
    top: 0px;
    left: 0px;
}

.write {
    top: 0px;
    right: 0px;
}

.code {
    bottom: 0px;
    left: 0px;
}

.play {
    bottom: 0px;
    right: 0px;
}
.question {
    top: 38%;
    left: 38%;
    color: green;
    cursor: pointer;
}

/** css3 animation **/

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
}
to { 
    -webkit-transform: rotate(360deg);
}
}


@-webkit-keyframes counterrotate {
    from {
        -webkit-transform: rotate(360deg);
    }
    to { 
        -webkit-transform: rotate(0deg);
    }
}



@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
}
to { 
    -moz-transform: rotate(360deg);
}
}


@-moz-keyframes counterrotate {
    from {
        -moz-transform: rotate(360deg);
    }
    to { 
        -moz-transform: rotate(0deg);
    }
}


.rotating 
{
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         120s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name:             rotate; 
    -moz-animation-duration:         120s; 
    -moz-animation-iteration-count:  infinite;
    -moz-animation-timing-function: linear;
}

.counterrotating 
{
    -webkit-animation-name:             counterrotate; 
    -webkit-animation-duration:         120s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name:             counterrotate; 
    -moz-animation-duration:         120s; 
    -moz-animation-iteration-count:  infinite;
    -moz-animation-timing-function: linear;
}



.ft {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 700px;
}

.ft .attribution {
   float: right;
}


.bd {
    height: 50%;
    width: 50%;
    top: 25%;
    left: 25%;
    background-color: #000;
    position: absolute;
    box-shadow: 0px 0px 8px #FFF;
    z-index: 200;
    border-radius: 10%;
    display: none;

}

.showres .bd {
    display:block;
}

#carusel {
    z-index: 1;
}

.result {
    text-align: center;
    font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 4px;
    color: #FFF;
    position: relative;

}

.result h2 {
    font-size: .2em;
}
.result .answer {
    font-size: .2em; 
    display: block;
   margin-top: 32px;
   padding-top: 16px;
   padding-bottom: 16px;
   border: 1px solid #EFEFEF;
}

.result .suggest {
    font-size: .2em;
    padding-top: 8px;
}

div.close {
    font-size: .4em;
    top: 8px;
    right: 16px;
    cursor: pointer;
}

.info .aboutcontent {
    display: none;
    position: absolute;
    top: 0px;
    left: 25%;
    background-color: rgba(0,0,0,.85);
    width: 700px;
    height: 700px;
    z-index: 800;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    padding: 32px;
    font-size: 3em;

}

.info .aboutcontent .dismiss {
    color: blue;
    cursor: pointer;

}

.showabout .info .aboutcontent {
    display: block;
}

.about {
    cursor: pointer;
    color: #FFF;

}

.share {
    padding-top: 8px;
}

.gplusbtn {
    margin-top: 4px;
}

/** color cycle **/

.colorcycle {
    -webkit-animation-name: colorcycle;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;


    -moz-animation-name: colorcycle;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in-out;
}


@-webkit-keyframes colorcycle {
    0%  { -webkit-text-fill-color: red;}
    20% { -webkit-text-fill-color: green;}
    40% { -webkit-text-fill-color: orange;}
    60% { -webkit-text-fill-color: purple;}
    80% { -webkit-text-fill-color: yellow;}
    100% { -webkit-text-fill-color: blue; }
}

@-moz-keyframes colorcycle {
    0%  { color: red;}
    20% { color: green;}
    40% { color: orange;}
    60% { color: purple;}
    80% { color: yellow;}
    100% { color: blue; }
}