@-ms-viewport{
  width: device-width;
}
html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}
#top {
    position: absolute;
}


p  {
    margin: 5px 50px 5px 50px;
    padding: 0.3em 0;
    font-family: cambria;
    font-size: 100%;
}
p class {
    margin: 0;
    padding: 0.3em 0;
    font-family: cambria;
    font-size: 100%;
}
h1 {
    font-family: Freestyle Script;
    color: #CC3300;
    font-size: 44px;
    margin: 5px 50px 5px 50px;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    text-align: center;
}
h2 {
    font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
    color: #CC3300;
    font-size: 20px;
    margin: 5px 50px 5px 50px;
    text-decoration: underline;
    font-style: normal;
    font-variant: normal;
}
h3 {
    margin: 0;
    padding: 0.3em 0;
    font-family: cambria;
    font-size: 13px;
    text-decoration: underline;
}
h4 {
    margin: 0;
    padding: 5px 50px 5px 50px;
    font-family: cambria;
    font-size: 14px;
    text-decoration: none;
}
h5 {
    margin: 0;
    padding: 0.3em 0;
    font-family: cambria;
    font-size: 13px;
    text-decoration: none;
}
a {
    color: #CC3300;
}
hr { 
    color: gray;
}
#container {
    min-height: 100%;
    margin-bottom: -36px;
    overflow: hidden;
    width: 100%;
}
#left-col {
      float: left;
      width: 50%;
      background-color: #E4ECF5;
      padding-bottom: 500em;
      margin-bottom: -500em;
      text-align: center;
    }
    #right-col {
      float: left;
      width: 50%;
      margin-right: -1px; /* Thank you IE */
      border-left: 1px solid black;
      background-color: #FCEED9;
      padding-bottom: 500em;
      margin-bottom: -500em;
      text-align: center;
    }
 * html #container {
    height: 100%;
}
#footer-spacer {
    height: 0px;
}
#footer {
    border-top: 1px solid #000;
    height: 35px;
    align: center
}
#colorstrip{
    width: 100%; height: 2px;
    border-style: solid;
    border-color: gray;
    background-color: gray;
}



/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (resolution: 163dpi) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (resolution: 163dpi) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (resolution: 163dpi) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

       .clear{ clear:both;}
        /*this will work for desktop*/
        @media only screen and (min-width: 801px){
        #container {
            position:relative;
            width:80%;
            margin: 0 auto; 
        }
      /*this will work for tablet*/
    @media only screen and (max-width: 800px) and (min-width: 521px) 
    {
    #container {
        position:relative;
        width:80%;
        margin: 0 auto; 
    }
        /*this will work for mobile*/
        @media only screen and (max-width: 520px) and (min-width: 320px) 
        {
        #container {
            position:relative;
            width:80%;
            margin: 0 auto; 
        }