/* for nav overlays */

@media all ( min-width: 35em) {
    /* wrap on wide viewports once open */
    
    .ui-panel-page-content-open.ui-panel-page-content-position-left {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right {
        margin-left: 17em;
    }
    .ui-panel-page-content-open {
        width: auto;
    }
    /* disable "dismiss" on wide viewports */
    
    .ui-panel-dismiss {
        display: none;
    }
    /* same as the above but for panels with display mode "push" only */
    
    .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
        margin-right: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
        margin-left: 17em;
    }
    .ui-panel-page-content-open.ui-panel-page-content-display-push {
        width: auto;
    }
    .ui-panel-dismiss-display-push {
        display: none;
    }
}
/* for 1px or more */

@media all and (min-width: 1px) {
    a:link {
        color: #A10006;
        text-shadow: none;
        text-decoration: none;
    }
    .ui-page-theme-a a,
    html .ui-bar-a a,
    html .ui-body-a a,
    html body .ui-group-theme-a a {
        color: #A10006;
        text-shadow: none;
        text-decoration: none;
    }
    .ui-page-theme-a a:hover,
    html .ui-bar-a a:hover,
    html .ui-body-a a:hover,
    html body .ui-group-theme-a a:hover {
        color: #FF0000;
        text-shadow: none;
        text-decoration: none;
    }
    .ui-page-theme-a a:visited,
    html .ui-bar-a a:visited,
    html .ui-body-a a:visited,
    html body .ui-group-theme-a a:visited {
        color: #A10006;
        text-shadow: none;
        text-decoration: none;
    }
    a:visited.ui-link {
        color: #A10006;
        text-shadow: none;
        text-decoration: none;
    }
    a:hover.ui-link {
        color: #FF0000;
        text-shadow: none;
        text-decoration: underline;
    }
    h2 {
        display: inline;
        font-size: 14pt;
        text-shadow: none;
    }
    .header {
        background: #FFF;
        border-bottom: 4px solid #FFD700;
        text-align: center;
        overflow: none;
        position: fixed;
        width: 100%;
        z-index: 99;
    }
    .headbuttons {
        float: right;
        padding-top: .6em;
    }
    .menubuttons {
        display: none;
    }
    .logo {
        padding-top: .4em;
        float: none;
        display: inline-block;
        text-align: left;
        margin-bottom: -.5em;
    }
    .logo1 {
        font-size: 22pt;
        font-style: oblique;
        font-variant: small-caps;
        font-weight: bold;
        color: #A10006;
        padding-bottom: 0pt;
        margin-bottom: 1em;
        margin-top: .1em;
    }
    .logomove{
    position:relative;
    top:-3pt;
    }
    .established {
    display: block;
    font-size: 6pt;
    text-align: right;
    margin-top:-5em;
    color: #A10006;
    margin-right: -3pt;
    }
    .logo2 {
        font-size: 10pt;
        font-variant: small-caps;
        font-weight: bold;
        color: #008000;
        position: relative;
        top: -.5em;
    }
    .animatedlogo {
        background-image: url(49ersfootball.gif);
        background-position: -12px 3px;
        background-size: 120px 30px;
        background-repeat: no-repeat;
    }
    #animatedlogo a:hover {
        color: #000;
        text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    }
    #animatedlogo a {
        -webkit-transition: background-position 1s linear, color 1s ease-in-out, background-color 1s ease-in-out, text-shadow 1s ease-in-out;
        -moz-transition: background-position 1s linear, color 1s ease-in-out, background-color 1s ease-in-out;
        -o-transition: background-position 1s linear, color 1s ease-in-out, background-color 1s ease-in-out;
        -ms-transition: background-position 1s linear, color 1s ease-in-out, background-color 1s ease-in-out;
        transition: background-position 1s linear, color 1s ease-in-out, background-color 1s ease-in-out, text-shadow 1s ease-in-out;
    }
    #animatedlogo a {
        background-image: url(49ersfootball.gif);
        background-position: -12px -30px;
        background-repeat: no-repeat;
        background-size: 120px 30px;
    }
    #animatedlogo a:hover {
        background-position: 100px 3px;
        -webkit-transition: background-position 1s linear, color 1s ease-in-out, background-color 1s ease-in-out, text-shadow 1s ease-in-out;
        -moz-transition: background-position 1s linear, background-color 1s ease-in-out;
        -o-transition: background-position 1s linear, background-color 1s ease-in-out;
        -ms-transition: background-position 1s linear, background-color 1s ease-in-out;
        transition: background-position 1s linear, color 1s ease-in-out, background-color 1s ease-in-out, text-shadow 1s ease-in-out;
    }
    #animatedlogo {
        -webkit-transition: 1s ease-in-out;
        -moz-transition: 1s ease-in-out;
        -o-transition: 1s ease-in-out;
        -ms-transition: 1s ease-in-out;
        transition: 1s ease-in-out;
        -webkit-transition-property: color, background-color, text-shadow;
        -moz-transition-property: color, background-color, text-shadow;
        -o-transition-property: color, background-color, text-shadow;
        -ms-transition-property: color, background-color, text-shadow;
        transition-property: color, background-color, text-shadow;
    }
    .palm {
        display: inline-block;
        margin-top: .2em;
    }
    .palmtree {
        height: 50px;
        padding-bottom: .1em;
        padding-left: .2em;
        vertical-align: bottom;
    }
    .subheader {
        background: #A10006;
        height: 41px;
        width: 100%;
        padding: .2em;
        padding-top: .6em;
        padding- right: 1em;
        margin-left: -.5em;
        overflow: none;
        position: fixed;
        z-index: 98;
        display: block;
    }
    .subheaderbuttons {
        float: left;
        padding: .5em;
    }
    .minibutton {
        border-bottom: #FF0000 solid 6px;
        color: #FFF;
        text-shadow: none;
        font-size: 12pt;
        padding: .4em;
        padding-top: .5em;
        text-decoration: none;
    }
    a:link.minibutton {
        border-bottom: #FF0000 solid 6px;
        color: #FFD700;
        text-shadow: none;
        font- size: 12pt;
        padding: .4em;
        text-decoration: none;
    }
    a:visited.minibutton {
        border-bottom: #FF0000 solid 6px;
        color: #FFD700;
        text-shadow: none;
        font-size: 12pt;
        padding: .4em;
        text-decoration: none;
    }
    a:hover.minibutton {
        border-bottom: #000000 solid 6px;
        color: #FFFFFF;
        text-shadow: none;
        font-size: 12pt;
        padding: .4em;
        text-decoration: none;
    }
    .navmenu {
        float: left;
        padding-left: .5em;
        padding-top: .6em;
    }
    .push {
        margin: 1em;
    }
    .tabcontent {
        padding-top: 1em;
    }
    .eightpoint {
        font-size: .8em;
    }
    ul {
        list-style-type: none;
        padding: 0px;
        margin: 0px;
    }
    .sectionhead {
        display: block;
        color: #FFFFFF;
        background: #A10006;
        width: 100%;
        padding-left: .2em;
        font-size: 14pt;
        line-height: 1.5em;
        font-weight: normal;
    }
    .ui-tabs-panel,
    ui-wrapper-overlay,
    ui-mobile-viewport,
    ui-corner-all,
    .ui-overlay-a,
    .ui-page-theme-a,
    .ui-page-theme-a .ui-panel-wrapper {
        background: #FFFFFF;
    }
    .ui-responsive-panel .ui-page .ui-page-theme-a .ui-page-active .ui-overlay-a,
    .ui-page-theme-a,
    .ui-page-theme-a .ui-panel-wrapper {
        text-shadow: none;
    }
    .mytab1 {
        margin: 0px;
        padding: 0px;
        text-align: center;
        vertical-align: top;
    }
    .hop {
        display: inline-block;
        width: 44%;
        margin-left: .75%;
        line-height: 1.4em;
        text-align: left;
        height: 57.2em;
        overflow: hidden;
        vertical-align: top;
    }
    .ppress {
        display: inline-block;
        width: 30%;
        margin-left: .75%;
        text-align: left;
        height: 57em;
        overflow: hidden;
        vertical-align: top;
    }
    .right {
        display: inline-block;
        width: 20%;
        margin-left: .75%;
        margin-right: .75%;
        text-align: left;
        height: 57em;
        overflow: hidden;
        vertical-align: top;
    }
    .overflowppress {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 44em;
        vertical-align: top;
    }
    .standings {
        width: 100%;
        padding: 0;
        font-style: normal;
        margin: 0;
        border-collapse: collapse;
    }
    .standings td {
        font-style: normal;
    }
    .standings a {
        font-weight: normal;
    }
    .sdi-datahead-sub {
        border-bottom: 1px solid #91DC5A;
    }
    .card {
        border-top: 3px solid #91dc5a;
        width: 98%;
        margin: 0 auto;
        margin-bottom: 16px;
    }
    .card-forum {
        border-top: 3px solid #91dc5a;
        width: 48%;
        margin-bottom: 1em;
        margin-right: 1em;
        float: left;
    }
    .shadow {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }
    .shadow:hover {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }
    .card span {
        display: block;
    }
    .card-title {
        background: #E8DA99;
        padding: 2px;
    }
    .card-date {
        font-size: 8pt;
        display: inline;
        text-align: right;
        padding: 2px;
    }
    .card-post {
        padding: 2px;
    }
    .card-links {
        font-size: 8pt;
        display: inline-block !important;
        padding: 4px;
        border: 1px solid #91dc5a;
        margin-bottom: 4px;
    }
    .card-placement {
        text-align: right;
        padding-right: 4px
    }
    .panelheader {
        margin-bottom: 14px;
        border-bottom: 2px solid #91dc5a;
    }
    .close {
        font-size: 8pt;
        padding: 4px;
        margin-bottom: 4px;
        float: Right;
        border: 1px solid #91dc5a;
    }
    .membership {
        font-size: 12pt;
    }
    .footer2 {
        font-size: 8pt;
        font-style: none;
        text-shadow: none;
        border-top: 4px solid #FFD700;
        padding: top: 4px;
        margin-top: 4px;
    }
    .rightbuttons {
        padding: 10px;
        border: 1px solid #91dc5a;
        background: #E8DA99;
    }
    .dpSocialTimelineText {
        font-size: 14pt;
    }
    .connect {
        display: inline-block;
        border: 1px solid #91dc5a;
    }
    .socialbuttons {
        float: right;
    }
    .socialfilter {
        float: left;
    }
    .ui-panel-inner {
        padding: .9em
    }
    .block {
        display: block;
        border-bottom: 1px solid #91dc5a;
    }
    .menup {
        margin: 0px;
    }
    .h4 {
        display: block;
        text-shadow: none;
    }
    .ui-accordion-header {
        border-bottom: #FFD700 solid 2px;
        color: #A10006;
        border-radius: none;
        padding: 4px;
        border-bottom-left-radius: initial;
        border-bottom-right-radius: initial;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    .ui-accordion-header-active {
        background: #A10006;
        color: #FFFFFF;
        border-bottom: #A10006 solid 2px;
        font-weight: normal;
        text-shadow: none;
    }
    .ui-accordion-content-active {
        background: #E8DA99;
        border-bottom: #A10006 solid 2px;
        padding: 4px;
    }
}
.ui-state-focus {
    outline: none !important;
}
/* for 800px or less */

@media all and (max-width: 800px) {
    .logo {
        min-width: 200px;
        max-width: 409px;
        min-height: 50px;
    }
    .logo2 {
        position: relative;
        top: -.25em;
    }
    .navmenu {
        padding-top: .6em;
    }
    .menubuttons {
        display: none;
    }
    .minibutton,
    .font-size-control {
        font-size: 14pt;
    }
    .mytab1 {
        display: table;
        margin: 0px;
        padding: 0px;
        text-align: center;
        vertical-align: top;
    }
    .hop {
        display: table-footer-group;
        width: 97%;
        margin-left: .75%;
        line-height: 1.4em;
        text-align: left;
        height: 49em;
        overflow: hidden;
    }
    .ppress {
        display: table-header-group;
        width: 97%;
        margin-left: .75%;
        text-align: left;
        height: 14.5em;
        overflow: hidden;
    }
    .right {
        display: block;
        width: 97%;
        margin-left: .75%;
        margin-right: .75%;
        text-align: left;
        height: auto;
        overflow: hidden;
    }
    .overflowppress {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 14.5em;
    }
    .card-forum {
        width: 98%;
    }

}
/* for 575px or less */

@media all and (max-width: 575px) {
    .logo {
        min-width: 55px;
        min-height: 50px;
        margin-top:1pt;
    }
    .logo2 {
        position: relative;
        top: -.6em;
    }
    .headbuttons {
        display: none;
    }
    .menubuttons {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding-bottom: .5em;
    }
    .minibutton {
        font-size: 12pt;
    }
    .font-size-control {
        font-size: 12pt;
    }
    .subheaderbuttons {
        padding: .3em;
    }
}
/* for 390px or less */

@media all and (max-width: 390px) {
    .logo {
        margin-top: .5em;
    }
    .logo1 {
        font-size: 18pt;
    }
    .logo2 {
        font-size: 9pt;
        position: initial;
    }
    .palm {
        float: right;
    }
    .navmenu {
        padding-top: .5em;
    }
    .headbuttons {
        display: none;
    }
    .menubuttons {
        display: inline-block;
    }
    .minibutton {
        font-size: 10pt;
    }
    .font-size-control {
        font-size: 11pt;
    }
    .subheaderbuttons {
        padding: .3em;
        font-size: 10pt;
    }
    .subheader {
        padding-top: .6em;
    }
}
/* for 350px or less */

@media all and (max-width: 350px) {
    .logo {
        margin-bottom: -1em;
    }
    .logo1 {
        font-size: 18pt;
    }
    .logo2 {
        font-size: 9pt;
    }
    .palm {
        display: none;
    }
    .palmtree {
        display: none;
    }
    .header {
     padding-bottom: 4pt;}
    .headbuttons {
        display: none;
    }
    .menubuttons {
        display: inline-block;
    }
    .subheaderbuttons {
        padding: .3em;
    }
    .subheader {
        padding-top: .6em;
    }

}
    }
}