@charset "UTF-8";
/* CSS Document */  

img, object, embed, video { max-width: 100%; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img { width:100%; }
body { font-family:Arial, Helvetica, sans-serif; background-color:#FFF; color: #777; }
body, h1, h2, h3, h4, h5 { margin:0; padding:0; }
img { width:100%; }
audio { width:100%; }

.txt10 { font-size:10px; }
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt14 { font-size:14px; }
.txt16 { font-size:16px; }
.txt18 { font-size:18px; }
.txt20 { font-size:20px; }
.txt1em { font-size: 1em; }
.big { font-size: 1.15em; }
.big1 { font-size: 1.25em; }
.padTB10 { padding:10px 0; }
.padTB20 { padding:20px 0; }
.txtLeft, .textLeft { text-align:left; }
.txtRight { text-align:right; }
.txtCenter, .centerText { text-align:center; }
.letterSpacing-2 { letter-spacing: -2px; }
.normalH123456 { font-weight: normal; }
.hr80c { width:80%; margin:25px 10%; }
.item { margin-bottom: 15px; }
.caps { text-transform: capitalize; }
.clearB { clear:both; }
.gray { color: #777; }
a.noDeco, a.noDeco:visited { text-decoration:none; color:#09F; }
a.noDeco:hover { color:#C0C; }
.noDecoButton, .noDecoButton:visited { text-decoration:none; color:#09F; border:0px #000 solid; background-color: transparent; }
.noDecoButton:hover { color:#C0C; }

/* (1)AYMpurple (2)AYMblue (3) NA. */
.branding1 { color: #C0C; font-weight: bold; }
.branding2 { color: #09F; font-weight: normal; }
.branding3 { }
.AYMspace { font-size: 1px; }

.rounded_corners { 
    -moz-border-radius: 20px 20px 20px 20px; 
    -webkit-border-radius: 20px 20px 20px 20px; 
    -khtml-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
}

img.turn2grayIMG {
  filter: none;
  cursor: grab;
  cursor: -webkit-grab;
  -webkit-filter: grayscale(0%);
}
img.turn2grayIMG:hover, img.makeIMGgray {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}


.buttonROCK, .buttonROCK:visited {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake1 0.5s;
}
.buttonROCK2, .buttonROCK2:visited {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake2 0.9s;
}
a.buttonROCK, a.buttonROCK:visited, .buttonROCK2, .buttonROCK2:visited {
    background-color: #09F; /* AYM Blue */
    padding: 30px 40px;
    font-size: 2em;
    color: #FFF;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

a.buttonROCK:hover, a.buttonROCK2:hover, .AYMblueButton:hover { color: #FFF; background-color: #C0C; }

@keyframes shake1 {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  35% { transform: translate(1px, -1px) rotate(-0.5deg); }
  70% { transform: translate(-1px, 1px) rotate(-1deg); }
  100% { transform: translate(0px, -1px) rotate(0.5deg); }
}

@keyframes shake2 {
    
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

a.sideMENU, a.sideMENU:visited {
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    color: #000;
    background-color: #FFF;
    padding: 4px 10px;
    border-top: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-left: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
}
a.sideMENU:hover {
    color: #FFF;
    background-color: #555;
}

/* HEAD */
#head { margin: 15px auto 35px auto; width: 96%; }

    #head .logo { float: none; margin: 0 10px 0 0; width: 99%; }
    #head .logo h1 { font-weight: normal; font-size: 1.55em; color: #777; }
    #head .menu { float: none; margin: 6px 10px 0 0; width: 99%; text-align: center; color:#999; }
    #head .menu a,
    #head .menu a:visited { text-decoration:none; color:#999; padding: 0 10px 15px 6px; }
    #head .menu a:hover { color:#333; }
    #head .social { float: none; margin: 2px 10px 0 0; width: 99%; text-align: left; }
    #head .social img { width: 22px; margin: 0 1px; display: inline-block; }

    #classPage a, #classPage a:visited { text-decoration:none; color:#999; }
    #classPage a:hover { color:#333; }

/* Phone Mobile Layout 481px. */

    /* MAIN */
    #main { margin: 0 0 25px 1%; min-height: 10px; width: 99%; position: relative; font-size: 18px; }
    #main .showKeywords {  position: relative; bottom: 0; left: 0; margin-bottom: 0; width: 100%; }
    #main .mainXside { margin: 0 auto 5px 25px; width: 94%; display: inline-block; vertical-align: top; } 
    #main .mainSidebar { margin: 0 auto 0 25px; width: 92%; display: inline-block; vertical-align: top; }
    #main .mainSidebar h5 { margin: 0 auto 10px auto; font-size: 24px; color: #777; }
        a.sideMENU { width:90%; margin:0; vertical-align: text-top; display:inline-block; min-height: 5px; }
        .imgFloatRight { float: none; width: 90%; margin: 0 0 10px 5%; display: block; }
        #imgPageRight { color: #777; padding-bottom: 10px; margin: 45px auto 0 auto; }
        #imgPageRight .txt { padding: 20px 20px 0  20px; }
        a.pageLIKE2, a.pageLIKE2:visited { text-decoration:none; color:#999; font-size: 12px; }
        a.pageLIKE2:hover { color:#09F; }

        #tBody { display: table; }
        #tBody .tRow { display: table-row; }
        #tBody .tCell { display: table-cell; padding: 1px; }

        #tBody .tCell span { display: none; }
        #tBody .tCell b { font-weight: normal; font-size: 10px; }
        #tBody .theDay { font-size: 12px; }

        a.whereClasses, a.whereClasses:visited { background-color: #09F; color: #FFF; padding: 10px 0; margin: 0 0 5px 0; text-align: center; text-decoration: none; font-weight: bold; font-size: 12px; width: 32%; display: inline-block; }    
        a.whereClasses:hover { background-color: #CCC; color: #777; }

        .AYMblueButton, .AYMblueButton:visited {
            background-color: #09f;
            font-size: 12px;
            width: 100%;
            margin: 0 4px 10px 4px;
            padding: 10px 15px;
            color: #FFF;
            border: solid #FFF 0px;
            text-align: center;
            text-decoration: none;
            display: block;
        }

        /* Blog Page */
        #blogPage { width: 90%; margin: 35px auto 0 auto; }    
        #blogPage h2 { font-size: 16px; margin: 0 0 10px; }    
        #blogPage h6 { font-weight: normal; display: inline; }    
        #blogPage .postWrape { width: 100%; margin: 0 auto 15px auto; display: block; }       
        #blogPage .textWrape { width: 100%; margin: 0; vertical-align: top; display: block; }
        #blogPage .textWrapeIMG { width: 100%; margin: 0; vertical-align: top; display: block; }      
        #blogPage .imageWrape { display: none; }

        /* Videos On Page */
        #videoWrapPage { 
            background-image:none;
            color:#000;
            padding:0;;
            background-repeat: no-repeat;
            position: relative;
            background-position: right top; 
            display: block; 
        }
        #videoBOXPage { 
            margin:0 auto;
            width:100%;
        }
        #videoContentPage { padding:36px 0 0 0; }
        #videoContentPage {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 */
            padding-top: 25px;
            height: 0;
        }
        #videoContentPage iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .videoOnLeft, .videoOnRight {
            float: none;
            width: 96%;
            margin: 0 0 15px 2%;
            display: block;
        }

    /* FOOT */
    #footNotes { margin: 15px auto 0 auto; min-height: 150px; width: 98%; position: relative; color: #777; }
    #footNotes .pageIDs { text-align: center; width: 100%; margin: 0 auto; position: relative; }
    #footNotes .social img { width: 22px; margin: 0 1px; display: inline-block; } 
    #footNotes a, #footNotes a:visited { text-decoration:none; color:#999; } 
    #footNotes a:hover { color:#333; }

    /* You Might Also Like This... Main Page */
    .w80x60x100 { width: 60%; margin: 0 auto; position: relative; }

    /* Float Boxs web 3 pad 2 Phone 1 */
    .box121, .box211, .box221, .box311, .box321, .box321fa, .box321fc, .box221podT10, .box411, .box421, .box511, .box521, .box531, .box532 {
        margin:0 0 15px 0.5%;;
        vertical-align: text-top;
        display:inline-block;
    }
    .box121, .box211, .box221, .box311, .box321, .box321fa, .box321fc, .box221podT10, .box411, .box421, .box511, .box521, .box531 { width:98%; }
    .box532 { width:48.5%; }
    .box321fa, .box321fc { text-align: center; font-size: 18px; }
    .box321fb { display: none; }

    /* Show / No Show Div etc. #1 (>0<) iPhone #2 (0) iPad #3 (0) Computer */
    .show001, .showWebOnly { display:none; }
    .show100 { display:block; }
    .show101 { display:block; }
    .show010 { display:none; }
    .show011 { display:none; }
    .show110 { display:block; }
        
    #PageGray { color: #999; }
    #PageGray h1, 
    #PageGray h2, 
    #PageGray h3 {
        letter-spacing: -1px; 
        line-height: 90%; 
        margin: 5px 0 15px 0; 
    }
    #PageGray h1 { font-size: 1.15em; }
    #PageGray h2 { font-size: 1.35em; line-height: 85%; font-weight: normal; }
    #PageGray h3 { font-size: 1.15em; font-weight: normal; }



    #mySchedulePanel1, #mySchedulePanel2 { display:block; }
    .schedulePanel  {
        width: 0;
        position: fixed;
        z-index: 60;
        height: 100%;
        top: 0;
        right: 0;
        background-color: rgb(250,250,250);
        background-color: rgba(250,250,250, 0.96);
        overflow: scroll;
        transition: 0.5s;
        -webkit-transition: .5s;
        padding-top: 60px;
    }
    .schedulePanel #wraperTimes { margin:15% auto; width:100%; }

    #mySchedulePanel1 .closebtn, #mySchedulePanel2 .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; }
    .schedulePanel a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #900;
        display: block;
        transition: 0.3s;
    }
    #mySchedulePanel1 .closeDIV, #mySchedulePanel2 .closeDIV, #mySchedulePanel3 .closeDIV,  .closePage { text-align:right; }
    #mySchedulePanel1 .closeDIV a, #mySchedulePanel2 .closeDIV a, #mySchedulePanel3 .closeDIV a, .closePage a { color:#CCC; font-size: 35px; border:#CCC solid 1px; padding:5px 15px; margin-right:45px; display:inline-block; }
    #mySchedulePanel1 .closeDIV a:hover, #mySchedulePanel2 .closeDIV a:hover, #mySchedulePanel3 .closeDIV a:hover, .closePage a:hover { color:#F00; border:#F00 solid 1px; }


    #wraperTimes .AYMblueButton, #wraperTimes .AYMblueButton:visited, .AYMblueButton, .AYMblueButton:visited,
    #wraperTimes .AYMpurpleButton, #wraperTimes .AYMpurpleButton:visited {
        font-size: 12px;
        width: 100%;
        margin: 0;
        padding: 10px 0;
        color: #FFF;
        text-align: center;
        text-decoration: none;
        display: block;
    }
    #wraperTimes .AYMblueButton, #wraperTimes .AYMblueButton:visited, .AYMblueButton, .AYMblueButton:visited { background-color: #09f; }
    #wraperTimes .AYMpurpleButton, #wraperTimes .AYMpurpleButton:visited { background-color: #C0C; }

        
    #PageGray { color: #999; }
    #PageGray h1, 
    #PageGray h2, 
    #PageGray h3 {
        letter-spacing: -1px; 
        line-height: 90%; 
        margin: 5px 0 15px 0; 
    }
    #PageGray h1 { font-size: 1.15em; }
    #PageGray h2 { font-size: 1.35em; line-height: 85%; font-weight: normal; }
    #PageGray h3 { font-size: 1.15em; font-weight: normal; }

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
    
        #main .mainXside { margin: 0 auto 5px 25px; width: 94%; display: inline-block; vertical-align: top; } 
        #main .mainSidebar { margin: 0 auto 0 25px; width: 94%; display: inline-block; vertical-align: top; }
            a.sideMENU { width:28.5%; margin:0 0 5px 0.2%; min-height: 35px; vertical-align: text-top; display:inline-block; }
    
            #tBody .tCell span { font-size: 10px; display: inline; }    
            #tBody .tCell b { font-size: 14px; display: inline; }
            #tBody .theDay { font-size: 14px; }

            a.whereClasses { width: 19%; }

            /* Blog Page */    
            #blogPage h2 { font-size: 22px; margin: 0 0 15px; } 
            #blogPage .textWrapeIMG { width: 60%; margin: 0 auto; vertical-align: top; display: block; }

            /* Videos On Page */
            #videoWrapPage { background-image:none; }
            #videoBOXPage { margin:0 auto; width:100%; }
            #videoContentPage { margin:0; }

            .videoOnLeft, .videoOnRight {
                float: none;
                width: 90%;
                margin: 0 0 15px 5%;
                display: block;
            }
    
        /* You Might Also Like This... Main Page */
        .w80x60x100 { width: 96%; margin: 0 auto; }
    

        /* Float Boxs web 3 pad 2 Phone 1 */
        .box121, .box221, .box321, .box321fa, .box321fc, .box421, .box521 { width:48.5%; }
        .box211, .box411, .box221podT10 {
            width:98.5%;
            margin:0 0 15px 0.5%;
            vertical-align: text-top;
            display:inline-block;
        }
        .box321fa { text-align: left; font-size: 14px; }
        .box321fc { text-align: right; font-size: 14px; }
        .box531, .box532 { width:32%; }

        /* Show / No Show Div etc. #1 (0) iPhone #2 (>0<) iPad #3 (0) Computer */
        .show001, .showWebOnly { display:none; }
        .show100 { display:none; }
        .show101 { display:none; }
        .show010 { display:block; }
        .show011 { display:block; }
        .show110 { display:block; }
    
        #PageGray h1 { font-size: 1.9em;  }
        #PageGray h2 { font-size: 1.5em; }
        #PageGray h3 { font-size: 1.1em; }

        .schedulePanel #wraperTimes { margin:15% auto; width:70%; }

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */ 
@media only screen and (min-width: 769px) {
    
            #head { margin: 30px auto 70px auto; width: 96%; }
    
            /* You Might Also Like This... Main Page */
            .w80x60x100 { width: 70%; margin: 0 auto; }

            /* MAIN */
            #main { margin: 0 auto; width: 96%; }
            /* #main .showKeywords { position: absolute; bottom: 0; left: 0; margin-bottom: 25px; width: 100%; } */
            #main .showKeywords { margin: 0 0 5px 0.5%; width: 99%; }
            #main .mainXside { margin: 0 1% 5px 0; width: 78%; display: inline-block; vertical-align: top; }
            #main .mainSidebar { margin-bottom: 0; width: 18%; display: inline-block; vertical-align: top; }
                a.sideMENU { width:98%; margin:0 0 0 0.5%; vertical-align: text-top; display:inline-block; min-height: 5px; }
                .imgFloatRight { float: right; width: 45%; margin: 0 0 3px 15px; display: block; }
                #imgPageRight .txt { padding: 10px 0 0 0; }

                #tBody .tCell b { font-size: 16px; }
                #tBody .theDay { font-size: 16px; }

                a.whereClasses { width: 10%; } 
                .AYMblueButton, .AYMblueButton:visited { font-size: 16px; padding: 15px 15px; }

                /* Blog Page */
                #blogPage { width: 80%; max-width: 800px; margin: 35px auto 0 auto; }    
                #blogPage h2 { font-size: 28px; margin: 0 0 15px; }       
                #blogPage .textWrape { width: 75%; margin: 8px 0 0 0; vertical-align: top; display: inline-block; }      
                #blogPage .textWrapeIMG { display: none; }
                #blogPage .imageWrape { width: 24%; vertical-align: middle; display: inline-block; }

                /* Videos On Page */
                #videoWrapPage { }
                #videoBOXPage { margin:0 auto; width:100%; max-width: 800px; }
                #videoContentPage { margin:36px 0 0 0; }

                .videoOnLeft {
                    float: left;
                    width: 37%;
                    margin: 0 0 15px 5%;
                    display: block;
                }
                .videoOnRight {
                    float: right;
                    width: 57%;
                    margin: 0 0 15px 0;
                    display: block;
                }
    
            /* FOOT */
            #footNotes { margin: 15px auto 0 auto; min-height: 150px; width: 98%; position: relative; color: #777; }
            #footNotes .pageIDs { text-align: center; width: 100%; margin: 0 auto; position: absolute; bottom: 0; left: 0; }
    
            #head .logo { float: left; margin: 0 10px 0 0; width: 17%; }
            #head .logo h1 { font-weight: normal; font-size: 1.85em; color: #777; }
            #head .menu { float: right; margin: 3px 1px 0 0; width: 33%; text-align: right; color:#999; }
            #head .menu a,
            #head .menu a:visited { text-decoration:none; color:#999; padding: 0 8px 15px 5px; }
            #head .menu a:hover { color:#333; }
            #head .social { float: right; margin: 2px 10px 0 0; width: 9.5%; text-align: right; }
            #head .social img { width: 22px; margin: 0 1px; display: inline-block; }

            /* Float Boxs web 3 pad 2 Phone 1 */
            .box211, .box221, .box221podT10 { width:49%; }
            .box311, .box321 { width:32%; }
            .box321fa, .box321fb, .box321fc { width:31%; }
            .box321fa { text-align: left; }
            .box321fb { text-align: left; display: inline-block; }
            .box321fc { text-align: right; }
            .box411, .box421 { width:23.5%; }
            .box511, .box521, .box532, .box531 { width:19%; }
            .box121 {
                width:98%;
                margin:0 0 15px 0.5%;;
                vertical-align: text-top;
                display:inline-block;
            }

            /* Show / No Show Div etc. #1 (0) iPhone #2 (0) iPad #3 (>0<) Computer */
            .show001, .showWebOnly { display:block; }
            .show100 { display:none; }
            .show101 { display:block; }
            .show010 { display:none; }
            .show011 { display:block; }
            .show110 { display:none; }
        
            #PageGray h1 { font-size: 3.1em; line-height: 95%; }
            #PageGray h2 { font-size: 1.9em; }
            #PageGray h3 { font-size: 1.3em; }

            .schedulePanel #wraperTimes { margin:15% auto; width:50%; }


            #wraperTimes .AYMblueButton, #wraperTimes .AYMblueButton:visited, .AYMblueButton, .AYMblueButton:visited,
            #wraperTimes .AYMpurpleButton, #wraperTimes .AYMpurpleButton:visited { font-size: 16px; padding: 15px 0; }
    
}