html {margin:0px; padding: 0px; background-color:#06010f; width:100%; height 100%;}
body {margin:0px; padding: 0px; }

/* SET POSITION OF COCKPIT */
#CockpitPerspectiveContainerTL {position: absolute; height: 300px; width: 300px; top: 20px; left: 30px; perspective: 400px;}
#CockpitPerspectiveContainerTR {position: absolute; height: 300px; width: 300px; top: 20px; right: 35px; perspective: 400px;}
#CockpitPerspectiveContainerBL {position: absolute; height: 300px; width: 300px; bottom: 20px; left: 30px; perspective: 400px;}
#CockpitPerspectiveContainerBR {position: absolute; height: 300px; width: 300px; bottom: 20px; right: 35px; perspective: 400px;}

#CockpitDisplayTL {position:absolute; overflow: hidden; padding: 5px; width: 300px; height: 50px; top: 30px; left: 0px; transform: rotateY(20deg) rotateZ(1deg); transition: 2s;}
#CockpitDisplayTR {position:absolute; overflow: hidden; padding: 5px; width: 300px; height: 50px; top: 30px; right:0px; transform: rotateY(-20deg) rotateZ(-1deg); transition: 2s;}
#CockpitDisplayBL {position:absolute; overflow: hidden; padding: 5px; width: 300px; height: 50px; bottom: 30px; left:0px; transform: rotateY(20deg) rotateZ(-1deg); transition: 2s;}
#CockpitDisplayBR {position:absolute; overflow: hidden; padding: 5px; width: 300px; height: 50px; bottom: 30px; right:0px; transform: rotateY(-20deg) rotateZ(1deg); transition: 2s;}

#CockpitDisplayM  {position:absolute; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; width:400px; height:400px;  }

#CockpitObjectTop {z-index: 4; position:absolute; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; width:320px; height:320px; border-radius:50%;}
#CockpitObjectBottom {z-11:36 PM 27/11/201511:36 PM 27/11/2015index: 1; position:absolute; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; width:320px; height:320px; border-radius:50%;}
#CockpitObjectShadow {z-index: 5; position:absolute; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; width:320px; height:320px; border-radius:50%;}

#CockpitObjectRings {z-index: 2; position: absolute; left:0px; top:0px; width: 600px; height: 600px;}
#CockpitObjectRingsShadow {z-index: 3; position: absolute; left:0px; top:0px; width: 600px; height: 600px;}


/* SET Depth of Field for Object */
#CockpitObjectDOF {z-index: -2; position:fixed; margin: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; width:600px; height:600px; filter: blur(10px); overflow:hidden;  transition: 2s;}
#CockpitObjectDOF:hover {filter: blur(2px);}
#CockpitDisplayM:hover #CockpitObjectDOF {filter: blur(2px);}


/* SET Clipping */	

#CockpitObjectTop {clip: rect(0px, 360px, 160px, 0px);}
#CockpitObjectBottom {clip: rect(160px, 360px, 360px, 0px);}
#CockpitObjectRings {clip:rect(0px, 400px, 660px, 0px);}
#CockpitObjectRingsShadow {clip:rect(0px, 660px, 660px, 400px);}


/* SET Rotation for Object */
#CockpitObjectDOF {transform: rotateZ(0deg);}
#CockpitObjectRings {transform: rotateX(75deg);}
#CockpitObjectRingsShadow {transform: rotateX(75deg);}
#CockpitObjectShadow {transform: rotateZ(-45deg);}

/* SET ANIMATIONS */


@keyframes bounceybox {
  0%  {width:400px; height:400px;}
  25%  {width:450px; height:450px;}
  50%  {width:400px; height:400px;}
  75%  {width:350px; height:350px;}
  90%  {width:420px; height:420px;}
  100%  {width:400px; height:400px;}
}

#CockpitDisplayTL:hover {height:400px; transform: rotateY(0deg) rotateZ(0deg);}
#CockpitDisplayTR:hover {height:400px; transform: rotateY(0deg) rotateZ(0deg);}
#CockpitDisplayBL:hover {height:400px; transform: rotateY(0deg) rotateZ(0deg);}
#CockpitDisplayBR:hover {height:400px; transform: rotateY(0deg) rotateZ(0deg);}

#CockpitDisplayM:hover {animation: bounceybox 2.2s linear}



/* SET BACKGROUND AND BORDER COLOURS */

#CockpitDisplayTL {border: solid #cdcccf 0.2em; border-radius: 1.0em; box-shadow: 0px 0px 0.5em #ffffff, 0px 0px 0.5em #ffffff inset;}
#CockpitDisplayTR {border: solid #FFFFFF 0.2em; border-radius: 1.0em; box-shadow: 0px 0px 0.5em #ffffff, 0px 0px 0.5em #ffffff inset;}
#CockpitDisplayBL {border: solid #FFFFFF 0.2em; border-radius: 1.0em; box-shadow: 0px 0px 0.5em #ffffff, 0px 0px 0.5em #ffffff inset;}
#CockpitDisplayBR {border: solid #FFFFFF 0.2em; border-radius: 1.0em; box-shadow: 0px 0px 0.5em #ffffff, 0px 0px 0.5em #ffffff inset;}

#CockpitDisplayM  {border: solid #FFFFFF 0.1em; border-radius: 1.0em; box-shadow: 0px 0px 0.5em #ffffff, 0px 0px 0.5em #ffffff inset;}


#CockpitObjectTop {background: linear-gradient(160deg, red, orange, red, orange, red, orange);  }
#CockpitObjectRings {background: -moz-radial-gradient(center, ellipse cover,  rgba(24,19,25,0) 0%, rgba(53,52,51,0) 34%, rgba(55,54,52,0) 36%, rgba(56,55,53,0) 37%, rgba(68,67,66,0) 38%, rgba(56,55,53,0) 39%, rgba(68,67,66,0) 40%, rgba(56,55,53,1) 41%, rgba(87,77,76,1) 42%, rgba(87,77,76,1) 44%, rgba(113,110,103,1) 46%, rgba(113,110,103,1) 48%, rgba(113,98,93,1) 49%, rgba(113,98,93,1) 51%, rgba(122,115,105,1) 52%, rgba(113,98,93,1) 53%, rgba(113,98,93,1) 54%, rgba(122,115,105,1) 55%, rgba(106,99,89,1) 56%, rgba(106,99,89,1) 58%, rgba(79,76,76,0) 60%, rgba(65,64,70,1) 61%, rgba(65,64,70,1) 62%, rgba(90,85,89,1) 63%, rgba(78,74,73,1) 65%, rgba(78,73,74,1) 67%, rgba(78,73,74,0) 68%, rgba(78,73,75,1) 69%, rgba(78,73,75,1) 70%, rgba(78,73,76,0) 71%, rgba(77,72,76,0) 72%, rgba(24,19,25,0) 100%);}
#CockpitObjectRingsShadow {background: -moz-radial-gradient(center, ellipse cover,  rgba(15,13,19,0) 0%, rgba(15,13,19,0) 34%, rgba(15,13,19,0) 36%, rgba(15,13,19,0) 37%, rgba(15,13,19,0) 38%, rgba(15,13,19,0) 39%, rgba(15,13,19,0) 40%, rgba(15,13,19,1) 41%, rgba(15,13,19,1) 42%, rgba(15,13,19,1) 44%, rgba(15,13,19,1) 46%, rgba(15,13,19,1) 48%, rgba(15,13,19,1) 49%, rgba(15,13,19,1) 51%, rgba(15,13,19,1) 52%, rgba(15,13,19,1) 53%, rgba(15,13,19,1) 54%, rgba(15,13,19,1) 55%, rgba(15,13,19,1) 56%, rgba(15,13,19,1) 58%, rgba(15,13,19,0) 60%, rgba(15,13,19,1) 61%, rgba(15,13,19,1) 62%, rgba(15,13,19,1) 63%, rgba(15,13,19,1) 65%, rgba(15,13,19,1) 67%, rgba(15,13,19,0) 68%, rgba(15,13,19,1) 69%, rgba(15,13,19,1) 70%, rgba(15,13,19,0) 71%, rgba(15,13,19,0) 72%, rgba(15,13,19,0) 100%);}
#CockpitObjectBottom {background: linear-gradient(160deg, red, orange, red, orange, red, orange);  }
#CockpitObjectShadow {background: radial-gradient(at top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 80%);}


/* SET TEXT */

a {color: #cdcccf; text-decoration:underline;}

#CockpitDisplayTL {color: #cdcccf; text-align: center; }
#CockpitDisplayTR {color: #cdcccf; text-align: center; }
#CockpitDisplayBL {color: #cdcccf; text-align: center; }
#CockpitDisplayBR {color: #cdcccf; text-align: center; }

#CockpitDisplayM {color: #cdcccf; text-align: center;}