@font-face {
  font-family: 'Voces';
  font-style: normal;
  font-weight: 400;
  src: url(voces.eot);
  src: local('Voces'), local('Voces-Regular'), url(http://themes.googleusercontent.com/static/fonts/voces/v1/UOrhtr4tgkrQ7HpJQ9-OIQ.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/voces/v1/ePr7eRI28zZaOtQ8CcT7rA.woff) format('woff');
}


body
{
    font-family: Segoe UI;
    font-size: 1.0em;
    margin: 0 0 0 0;
}


/* Containers */

.calculator {
    display: inline-block;
    text-align: center;
    border: 1px solid black;
    padding: 10px;
    border-radius: 8px;
}

.header1 {
    display: inline;
    width: 50px;
    text-align: left;
    border: 1px solid black inset;
    color: white;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 0px 1px 0px;

    margin: 0 0 0 0;
}

.header2 {
    display: inline-block;
    width: 330px;
    text-align: center;
    border: 1px solid black inset;
    color: white;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 0px 1px 0px;

    margin: 0 0 0 0;
}

.MissionDisplay {
    display: block;
    width: 364px;
    text-align: center;

    border-bottom-style: 1px solid black;
    background-color: white;
    color: black;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 4px 0px 4px;
    border-radius: 2px;
    margin: 0 0 0 0;
}

.n1 {
    display: inline-block;
    width: 100px;
    text-align: left;
    color: black;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 0px 1px 0px;

    margin: 0 0 0 0;
}
   
.n2 {
    display: inline-block;
    width: 260px;
    text-align: right;
    border: 1px solid black inset;
    color: green;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 0px 1px 0px;

    margin: 0 0 0 0;
}
.n3 {
    display: inline;
    width: 264px;
    text-align: center;
    border: 1px solid black;
    color: black;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 0px 1px 0px;

    margin: 0 0 0 0;
} 
.display1 {
    display: block;
    width: 364px;
    text-align: right;
    border: 1px solid black inset;
    color: black;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 4px 1px 4px;
    border-radius: 2px;
    margin: 2px 0 6px 0;
}

.display {
    display: block;
    width: 364px;
    text-align: right;
    border: 1px solid black;
    background-color: #e6e6ff;
    color: black;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 4px 1px 4px;
    border-radius: 2px;
    margin: 2px 0 6px 0;
}

.target {
    display: block;
    width: 364px;
    text-align: center;
    border: 1px solid black inset;
    color: black;
    font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
    font-size: 30px;
    padding: 0px 4px 1px 4px;
    border-radius: 2px;
    margin: 0 0 12px 0;
}

/* Shadows */

.largeshadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    -ms-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
}

.smallshadow {
    -moz-box-shadow: 3px 3px 3px #666666;
    -webkit-box-shadow: 3px 3px 3px #666666;
    box-shadow: 3px 3px 3px #666666;
}


/* Gradients */

.navy {
background-color: navy;
}

.blackgradient {
    background: rgb(149,149,149); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}

.darkbluegradient {
    background: rgb(63,76,107); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}

.bluegradient {
    background: rgb(30,87,153); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

.graygradient {
    background: rgb(236,242,249); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(236,242,249,1) 0%, rgba(236,242,249,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(236,242,249,1)), color-stop(100%,rgba(236,242,249,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(236,242,249,1) 0%,rgba(236,242,249,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(236,242,249,1) 0%,rgba(236,242,249,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(236,242,249,1) 0%,rgba(236,242,249,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(236,242,249,1) 0%,rgba(236,242,249,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

.yellowgradient {
    background: rgb(255,255,136); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,255,136,1) 0%, rgba(255,255,136,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,136,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 */
}



/* Windows Phone-size phone */

@media screen and (min-width:321px) and (max-width: 480px) {

    .display {
        width:364px;
    }

}


/* iPhone-size smartphone, portrait */

@media screen and (max-width : 320px) {

    .display {
        width: 364px;
        font-size: 1.2em;
    }
}


/* iPhone-size smartphone / landscape */

@media screen and (max-height : 320px) and (orientation : landscape) {
    .display {
        width: 364px;
        font-size: 1.2em;
    }
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav li {
    padding: 1px 1px 1px 50px;
    text-decoration: none;
    font-size: 20px;
    color: #f1f1f1;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}