@media (max-width: 900px) { /* for small tablets and phones */
    #leftMenu {
        display: none;
    }
    #content {
        margin: 0;
        padding: 10px 20px;
    }
    body {
        padding: 0;
    }
    #mainframe {
        width: 100%;
    }
    #iconLogoBar {
        width: 100%;
        /*height: 54px;*/
    }
    #iconLogoBar a.icon { /* this is the three-bar Menu Nav button */
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 11px;
        padding-bottom:10px;
        padding-left: 15px;
        padding-right: 15px;
        background-color: #DDDDDD;
    }
    #iconLogoBar a.icon span { /* These are each of the three bars (see below for transform) */
        display: block;
        width: 30px;
        height: 3px;
        border-radius: 3px;
        background-color: #111;
        margin: 6px 0;
        transition: all .2s ease-in-out;
    }
    .bar1 {
        transform: translateY(9px) rotate(45deg);
    }
    .bar2 {
        transform: scale(0);
    }
    .bar3 {
        transform: translateY(-9px) rotate(-45deg);
    }
    /*#logo h1 {
        background-image: url("img/shidaa_logo_green_foricon.png");
        width: 100%;
        height: auto;
        max-width: 900px;
        border-top: 0;
        border-bottom: 4px solid #e60000;
    }*/
    #logo img {
        width: 100%;
        height: auto;
        max-width: 900px;
        border-top: 0;
        border-bottom: 4px solid #e60000;
    }
    #logo img.foricon {
        display: block;
    }
    #logo img.widerscreen {
        display: none;
    }
    #bottombanner {
        padding: 8px 40px 8px 24px;
    }
}

@media (min-width: 901px) { /* for computer screens */
    body {
        padding: 0 0.5em;
    }
    #mainframe {
        border-left: 1px solid #000000;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
        margin: 0 auto;
        width: 900px;
    }
    #logo img.foricon {
        display: none;
    }
    #logo img.widerscreen {
        display: block;
    }
    #logo img {
        border-top: 4px solid #e60000;
        border-bottom: 4px solid #e60000;
    }
    #contentwrapper {
        text-align: left;
    }
    #content {
        border-left: 1px solid #000000;
        margin-left: 200px;
        padding: 24px;
    }
    #content p.spaceabove {
        padding-top: 100px;
    }
    #content ul.nomarkers {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    a.headingLink {
        text-decoration: none;
    }

    p.italics {
        font-style: italic;
    }
    p.bold {
        font-weight: bold;
    }
    .smallHeader {
        font-style: italic;
        font-weight: bold;
    }
/*    #slideshowContainer {
        margin-left: 200px;
    }*/
    #bottombanner {
        padding: 8px 45px 8px 8px;
    }
    #bottombanner p {
        margin-left: 220px;
    }
}

    body {
        background-color: #ffb400;
        color: #000000;
        font-family: arial,sans-serif;
        font-size: 12px;
        margin: 0;
    }
    #mainframe {
        background-color:  #fcd116;
        border-bottom: 1px solid #000000;
        margin: 0 auto;
        max-width: 900px;
        min-height: 600px;
    }
    #logo {
        padding: 0;
        margin: 0;
        border: 0;
    }
    h1 {
        padding: 0;
        margin: 0;
        border: 0;
    }
    a {
        padding: 0;
        margin: 0;
        border: 0;
    }
    #logo img {
        padding: 0;
        margin: 0;
        /*border-top: 4px solid #e60000;
        border-bottom: 4px solid #e60000;*/
        border-right: 0;
        border-left: 0;
    }
    #myLinks {
        display: none;
       /* background-color: rgb(15,194,15);*/
       background-color: #ffb400;
    }
    #myLinks ul {
        line-height: 120%;
        list-style: none outside none;
        padding: 10px;
        padding-left: 16px;
    }
    #myLinks ul li { /* for nested lists - overridden by outer list selector */
        /*color: #3399CC;*/
        color: #000000;
        font-family: Arial, sans-serif;
        font-size: 20px;
        /*padding: 6px;*/
        /*padding: 0.75em 0 0.75em 35px;*/
        padding: 0.4em 0 0.2em 20px;
    }
    #myLinks > ul > li { /* outer list - overrides previous */
        /*padding: 0.75em 35px;*/
        padding: 0.5em 0 0.5em 28px;
    }
    #myLinks ul li a {
        color: #003300;
        text-decoration: none;
    }
    #myLinks ul li.active {
        background: url("img/Star.png") no-repeat scroll 0px .2em transparent;
        text-decoration: none;
        color: #660000;
    }
    #leftMenu {
        /* border-right: 1px solid #000000; */
        color: #000000;
        float: left;
        left: 0;
        position: relative;
        top: 0;
        line-height: 150%;
        width: 200px;
        margin: 0 20px 0 0;
        padding: 20px 0 0;
    }
    #leftMenu ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #leftMenu ul li { /* for nested lists - overridden by outer list selector */
        color: #000000;
        font-size: 14px;
        font-weight: bold;
        line-height: 120%;
        margin: 0;
        padding: 0.75em 0 0.75em 35px;
    }
    #leftMenu > ul > li { /* outer list - overrides previous */
        padding: 0.75em 35px;
    }
    #leftMenu ul li.active {
        /* color: #cc0000; */
        /* line-height: 120%; */
        background: url("img/Star.png") no-repeat scroll 5px .4em transparent;
        color: #660000;
    }
    #leftMenu ul li a {
        color: #006600;
        text-decoration: none;
    }
    #leftMenu ul li a:hover {
        color: #009900;
    }

    #leftMenu ul ul {
        width: 100%;
    }
    #content {
        color: #000000;
        font-size: 130%;
        line-height: 1.6;
    }

    #bottombanner {
        background: none repeat scroll 0 0 #0fb520;
        min-height: 50px;
    }
    #bottombanner p {
        margin-top: 5px;
    }
    #bottombanner p#webdesigner {
        text-align:right;
    }
    div.clears {
        clear: both;
    }