/* order is important. Put the widest screen style first.*/

/* Ipad landscape mode  */
@media screen and (max-width: 1024px)
{
    #menu > li div.submenu
    {
        margin: 0px 0 0 -512px; /* Half of the width of the container */
        width: 982px; /* Adjust down from container size based on left/right padding */
    }
}

/* Ipad portrait*/
@media (min-width: 768px) and (max-width: 979px)
{

    #menu > li div.submenu
    {
        margin: 0px 0 0 -384px; /* Half of the width of the container */
        width: 726px; /* Adjust down from container size based on left/right padding */
    }

    body
    {
        padding: 10px;
    }

    #menu > li
    {
        padding: 0px 0px 0px 15px;
    }
}


/* Iphone landscape*/
@media (max-width: 480px)
{
    body
    {
        padding: 0px;
    }

    #menu > li
    {
        margin: 0px 0px;
    }

    #menu > li > span
    {
        color: #ffffff;
        cursor: default;
        font-size: 12px;
        text-shadow: 0 -1px 0 #00344C;
        padding: 11px 16px;
        cursor: pointer;
    }

    #menu > li div.submenu
    {
        margin: 0px 0 0 -240px; /* Half of the width of the container */
        width: 458px; /* Adjust down from container size based on left/right padding */
        padding-left: 10px;
        padding-right: 10px;
        background-image: none;
    }

    #menu > li div.submenu > div
    {
        margin: 0px;
        margin-right: 25px;
    }

    #menu > li div.submenu > div:first-child
    {
        margin-left: 0px;
    }

    .menuDescription a
    {
        margin: 0px;
        padding: 0px;
    }

    .menuDescription h5
    {
        -webkit-margin-before: 0px;
        border-bottom-width: 0px;
        margin-bottom: 0px;
    }

    div.menuDescription span
    {
        display: none;
    }

    .sectionHeader
    {
        font-size: 13px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        display: none;
    }

    .menuDescription h5
    {
        white-space: normal;
    }

    #indexTabs
    {
        margin-left: 0px;
        margin-bottom: -5px;
    }

    #indexTabs li
    {
        display: inline;
        padding: 2px 2px 2px 2px;
        margin-bottom: -15px;
        border-left: 1px solid #CCC;
        border-right: 1px solid #CCC;
        border-top: 1px solid #CCC;
        white-space: pre;
    }

    .contentColorData
    {
        margin-top: 0px;
    }

    .contentPaddingSidebar
    {
        padding: 5px 15px;
    }

    .blog .youtube
    {
        min-height: 360px;
        min-width: 418px;
        width: 100%;
    }
}


/* Iphone portrait*/
@media (max-width: 320px)
{
    body
    {
        padding: 0px;
    }

    #menu > li
    {
        width: 81px;
        margin: 0px 0px;
        padding: 0px 0px 0px 22px;
    }

    #menu > li > span
    {
        color: #ffffff;
        cursor: default;
        font-size: 12px;
        text-shadow: 0 -1px 0 #00344C;
        padding: 11px 0px;
        cursor: pointer;
    }

    #menu > li div.submenu
    {
        margin: 0px 0 0 -160px; /* Half of the width of the container */
        width: 298px; /* Adjust down from container size based on left/right padding */
        padding: 0px 10px;
        background-image: none;
    }

    #menu > li div.submenu > div
    {
        margin: 0px;
    }

    #menu > li div.submenu > div:first-child
    {
        margin-left: 0px;
        margin-right: 5px;
    }


    .menuDescription
    {
        width: 200px;
        padding: 0px;
        margin: 0px;
    }

    .menuDescription a
    {
        margin: 0px;
        padding: 0px;
    }

    .menuDescription h5
    {
        -webkit-margin-before: 0px;
        border-bottom-width: 0px;
        margin-bottom: 0px;
    }

    div.menuDescription span
    {
        display: none;
    }

    .sectionHeader
    {
        font-size: 13px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        display: none;
    }

    .container
    {
        padding: 5px;
    }

    .contentColor
    {
        padding: 5px;
    }

    #highlighted_chart
    {
        margin-left: 15px;
    }

    #highlighted_chart_previous
    {
        left: 0px;
    }

    #highlighted_chart_next
    {
        left: 92%;
    }


    #loginList
    {
        margin-top: 15px;
    }

    #siteSearch
    {
        margin-top: -6px;
        width: 290px;
    }

    li.autocompleteItem
    {
        width: 290px !important;
    }

    .contentPaddingSidebar
    {
        padding: 5px 15px;
    }

    .blog .youtube
    {
        min-height: 200px;
        min-width: 290px;
        width: 270px;
    }
}