/* Net-book screen category */
@media screen and (max-height: 768px) {
    .important{
        font-size: 135%;
    }

    header{
        font-size: 230%;
        padding-top: 100px;
    }

    footer{
        font-size: 230%;
        padding-bottom: 600px;
    }

    article{
        font-size: 173%;
    }

    article > h1{
        font-size: 230%;
    }

    /* Set padding,list height except for last list element */
    article ul > li:not(:last-child) {
        padding-bottom: 25px;
        line-height:110%;
    }
}

/* Commonly-used screen category */
@media screen and (min-height: 769px) and (max-height: 945px) {
    .important{
        font-size: 135%;
    }

    header{
        font-size: 240%;
        padding-top: 100px;
    }

    footer{
        font-size: 230%;
        padding-bottom: 600px;
    }

    article{
        font-size: 165%;
    }

    article > h1{
        font-size: 250%;
    }

    /* Set padding,list height except for last list element */
    article ul > li:not(:last-child) {
        padding-bottom: 25px;
        line-height:110%;
    }
}

/* Large screen category */
@media screen and (min-height: 946px) and (max-height: 2000px) {

    .important{
        font-size: 150%;
    }

    header{
        font-size: 300%;
        padding-top: 150px;
    }

    footer{
        font-size: 300%;
        padding-bottom: 600px;
    }

    article{
        font-size: 220%;
    }

    /* headings on articles */
    article > h1{
        font-size: 270%;
    }

    /* Set padding,list height except for last list element */
    article ul > li:not(:last-child) {
        padding-bottom: 40px;
        line-height:125%;
    }
}

/* Presentation default properties */
@media screen{

    body {
        font-family: "Helvetica Neue";
        color: black;
        overflow: hidden;
    }

    html {
        background: url("images/background.gif");

    }

    .bold, .important {
        font-weight: bold;
    }

    /* Header (aka title) defaults */
    header{
        text-align: center;
    }

    /* Title slide: Only h1 header is bold */
    header > h3, header > h4{
        font-weight: normal;
    }

    header > h4{
        padding-bottom: 170px;
    }

    /* Footer (aka thanks) defaults */
    footer{
        text-align: center;
    }

    footer > p{
        padding-bottom: 300px;
    }

    article > h1{
        text-align: center;
        border-bottom: black dashed;
    }

    article ul > li {
        list-style: square;
    }

    article ol > li:first-child {
        padding-top: 5px;
    }

    li.image{
        text-align: center;
        list-style: none;
    }

    li.disadvantage{
        list-style-image: url(images/thumbs-down.png);
    }

    li.advantage{
        list-style-image: url(images/thumbs-up.png);
    }

    li.table{
        list-style: none;

    }

    /* Table formatting */
    table, td, th
    {
        border-style: solid;
    }

    table
    {
        border-width: 0 0 1px 1px;
        border-spacing: 0;

    }

    td{
        padding-left: 10px;
        padding-right: 10px;

    }

    td,th
    {
        border-width: 1px 1px 0 0;
    }

    th{
        background-color: black;
        text-transform: uppercase;
        text-align: center;
        color: #dea540;
        padding-left: 10px;
        padding-right: 10px;
    }

    tr:nth-of-type(2n){

        background-color: #dea540;
        color: black;
    }

    tr:nth-of-type(2n+1){
        background-color: #debc59;

        color: black;
    }
}