.flip {
    position: absolute;
    
    z-index: 11;
    -moz-perspective: 200px;
    -moz-transform-style: preserve-3d;
    -webkit-perspective: 200px;
    -webkit-transform-style: preserve-3d;
    -o-perspective: 200px;
    -0-transform-style: preserve-3d;
    -ms-perspective: 200px;
    -ms-transform-style: preserve-3d;
    perspective: 200px;
    transform-style: preserve-3d;
}
.flip .front,
.flip .back {
    border-radius: 5px;
    background: #111;
    width: 145px;
    height: 145px;
    display: block;
    position: absolute;
    color: #fff;
    -moz-transition: -moz-transform 1s ease-in-out;
-webkit-transition: -moz-transform 1s ease-in-out;
-o-transition: -moz-transform 1s ease-in-out;
-ms-transition: -moz-transform 1s ease-in-out;
transition: -moz-transform 1s ease-in-out;
}
.flip .front {
    -moz-transform: rotateY(0deg);
    -moz-backface-visibility: hidden;
    -webkit-transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    -o-transform: rotateY(0deg);
    -o-backface-visibility: hidden;
    -ms-transform: rotateY(0deg);
    -ms-backface-visibility: hidden;
    transform: rotateY(0deg);
    backface-visibility: hidden;
    z-index: 13;
}
.flip:hover .front {
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flip .back {
    -moz-transform: rotateY(180deg);
    -moz-backface-visibility: hidden;
    -webkit-transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    -o-transform: rotateY(180deg);
    -o-backface-visibility: hidden;
    -ms-transform: rotateY(180deg);
    -ms-backface-visibility: hidden;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 12;
    background: green;
}
.flip:hover .back {
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 14;
}

/***********************/



.CurStu{
width: 600px;
height:90px;
background-color: transparent;
color:white;
opacity: 1;
position:relative;

    box-shadow: 0 0 12px rgba(200, 200, 200, 0.8);

    border: 0px solid #666;
    border-radius: 2px;
    padding: 3px;
    -webkit-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    -moz-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    -ms-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    -o-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
    transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

div.CurStu:hover{
cursor: pointer;
    border: 0px solid #0CC;
    box-shadow: 0 0 7px rgba(0, 200, 200, 0.7);
    outline: none;
}

.pic{
width: 85px;
background-color: transparent;
padding-right: 20px;
opacity: 1;
position:relative;

}
.name{
top:10px;
left:120px;
width: 400px;
background-color: transparent;
color:;
padding-right: 20px;

position:absolute;

}
.desc{
left:120px;
top:30px;

width: 400px;
background-color: transparent;
padding-right: 20px;
position:absolute;
color:grey;

}

/************************************/





h3{
height:35px;
background-color:#111;
color:grey;
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 3px;
text-align:left;
width:35%;
}

.area{
width: 650px;
height:45px;
background-color:black;
opacity: 1;
position:relative;

    box-shadow: 0 0 3px rgba(200, 200, 200, 0.8);

    border: 0px solid #666;
    border-radius: 2px;
    padding: 3px;
    -webkit-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out, height 0.5s ease-in-out, display 0.5s ease-in-out;
    -moz-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out, height 0.5s ease-in-out, display 0.5s ease-in-out;
    -ms-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out, height 0.5s ease-in-out, display 0.5s ease-in-out;
    -o-transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out, height 0.5s ease-in-out, display 0.5s ease-in-out;
    transition: border 0.5s ease-in-out, box-shadow 0.5s ease-in-out, height 0.5s ease-in-out, display 0.5s ease-in-out;
}

div.area:hover{
cursor: pointer;

	height:160px;

    border: 0px solid #0CC;
    box-shadow: 0 0 7px rgba(0, 200, 200, 0.7);
    outline: none;

}

.area:hover .areaContent { display:block; }

.areaTitle{
font-size: 20px;
color:white;
}
.areaContent{
display:none;
}

.areaDesc{
position:relative;
color:lightgrey;
font-size:14px;
}