/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */

@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Condensed Bold'), local('OpenSans-CondensedBold'), url(https://themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xM6Eyu0BCqAfob_z3hhzRFzr7w4p9aSvGirXi6XmeXNA.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format('woff');
}


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; width: 100%; min-width: 1024px;height: 100%; min-height: 600px;}

html { font-family: 'Open Sans', sans-serif; color: #FFFFFF; }
button, input, select, textarea { font-family: 'Open Sans Condensed', sans-serif; color: #acacac;}

input, textarea{
    border-radius: 3px;
    border: none;
    display: block;
    padding: 4px;
    margin-bottom: 10px;
    font-size: .9em;
    width: 230px;
}

input + label {
    padding-left: 4px;
    vertical-align: middle;
}

input[type="checkbox"]{
    width: 19px;
    height: 19px;
    position:relative;
    z-index: 10;
    opacity: 0;
    vertical-align: middle;
    display: inline-block;
}

input[type="checkbox"] + label:before {
    content: " ";
    background: url(../img/ui/sprite-sheet.png) no-repeat -68px -72px;
    width: 19px;
    height: 19px;
    position: absolute;
    left:0px;
    top:6px;
    display:inline-block;
    z-index: 5;
}

input[type="checkbox"]:checked + label:before { background-position: -106px -72px; }
input[type="checkbox"]:checked.star + label:before { background-position: -163px -72px; }


.checkIcon {
    background: url(../img/ui/sprite-sheet.png);
    width: 19px;
    height: 19px;
    position: absolute;
    left:0px;
    top:4px;
    display:inline-block;
    z-index: 5;
}

input[type="checkbox"].include + .checkIcon { background-position: -87px -72px; }
input[type="checkbox"]:checked.include + .checkIcon { background-position: -106px -72px; }

input[type="checkbox"].exclude + .checkIcon { background-position: -125px -72px; }
input[type="checkbox"]:checked.exclude + .checkIcon { background-position: -144px -72px; }

.includeWrapper, .excludeWrapper{
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

input::-webkit-input-placeholder {
    color:    #acacac;
    font-family: 'Open Sans';
    font-weight: normal;
    font-size: 1em;
}
input:-moz-placeholder {
    color:    #acacac;
    font-family: 'Open Sans';
    font-weight: normal;
    font-size: 1em;
}
input:-ms-input-placeholder {
    color:    #acacac;
    font-family: 'Open Sans';
    font-weight: normal;
    font-size: 1em;
}

/***********************************************/
/* CUSTOM ANIMATION FOR LABEL
/***********************************************/
label { color: #FFFFFF; }
input + label:hover,
input:hover + label {
    color: #acacac;
}
/* DISABLED */
input:disabled + label {
    color: #999;
}



body { 	width: 100%; min-width: 1024px; height: 100%; min-height: 600px; margin: 0px;
    font-size: 1em; line-height: 1.4em;
    font-family: 'Open Sans Condensed', sans-serif;
    background-image: url('../img/ui/background_tile.gif');

    user-select: none;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #90bc1b; color: #fff; text-shadow: none; }
::selection { background: #90bc1b; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:hover { color: #e8e8e8; text-decoration: underline; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

.italic{
    font-style: italic;
    font-size: .9em;
}

h2{
    color: #FFFFFF;
    margin-top: 20px ;
    margin-bottom: 0px;
    font-size: 1em;
    font-family: 'Open Sans Condensed', sans-serif;
}



/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Re-set default cursor for disabled elements
 */

button[disabled], input[disabled] { cursor: default; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */



/* Navigation */
header#pageHeader{
    height: 65px;
    background: url(../img/ui/background_top-tile.gif) repeat-x bottom;
}

#main, header #content{
    margin-left: auto;
    margin-right: auto;
    width: 1024px;
}

header #content{
    position: relative;
}

#logo{
    margin-top: 18px;
    margin-left: 10px;
}

#classes-nav{
    float: left;
    height: 64px;
    cursor: default;
}

#classes-nav #home{
    width: 69px;
    height: 64px;
    background: url(../img/ui/home_normal.gif) no-repeat;
    z-index: 12;
}

#classes-nav #home:hover, #classes-nav #home.selected{
    background: url(../img/ui/home_selected.gif) no-repeat;
}

#classes-nav #home .divider{
    position: absolute;
    top: 0px;
    right: -14px;
    width: 14px;
    height: 64px;
    background: url(../img/ui/home-divider_normal.gif) no-repeat;
}

#classes-nav #home:hover .divider, #classes-nav #home.selected .divider{
    background: url(../img/ui/home-divider_selected.gif) no-repeat;
}



#classes-nav #category{
    background: url(../img/ui/cat_bg_normal.png) repeat-x bottom;
    height: 64px;
    line-height: 64px;
    padding-left: 14px;
    z-index: 11;
}

#classes-nav #category:hover, #classes-nav #category.selected{
    background: url(../img/ui/cat_bg_selected.png) repeat-x bottom;
}

#category .divider{
    position: relative;
    top: -2px;
    right: -15px;
    width: 15px;
    height: 64px;
    background: url(../img/ui/cat_divider_normal.png) no-repeat;
}

#classes-nav #category:hover .divider, #classes-nav #category.selected .divider{
    background: url(../img/ui/cat_divider_selected.png) no-repeat;
}

#classes-nav #category .label, #classes-nav #filter .label{
    margin-left: 10px;
}

#classes-nav #category .button{
    width: 21px;
    height: 22px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -108px -50px;
    margin-left: 10px;
    margin-right: 10px;
}

#classes-nav #category:hover .button,#classes-nav #filter:hover .button,#classes-nav #category.selected .button,#classes-nav #filter.selected .button{
    width: 21px;
    height: 22px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -129px -28px;
    margin-left: 10px;
    margin-right: 10px;
}

#classes-nav #filter{
    background: url(../img/ui/filter_bg_normal.png) repeat-x bottom;
    height: 64px;
    line-height: 64px;
    padding-left: 15px;
    z-index: 10;
}

#classes-nav #filter:hover, #classes-nav #filter.selected{
    background: url(../img/ui/cat_bg_selected.png) repeat-x bottom;
}

#classes-nav #filter .button{
    width: 21px;
    height: 22px;
    margin-left: 10px;
    margin-right: 10px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -129px -50px;
}

#userNav{
    float: right;
    display: inline-block;
    position: relative;
    white-space: normal;
    vertical-align: top;
    height: 63px;
    cursor: default;
}

#userNav > div, #classes-nav > div, #profile .icon, #profile .label, #profile .button, #email > div, #classes-nav .label, #classes-nav .button, #classes-nav .divider{
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

#userNav .divider, #classes-nav .endDivider {
    background: url(../img/ui/nav-divider.png) no-repeat bottom;
    width: 2px;
    height: 63px;
}

#email{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom;
    width: 78px;
    height: 63px;
    line-height: 63px;
    text-align: center;
    -webkit-user-select: none;
}

#email .icon{
    width: 26px;
    height: 28px;
    background: url(../img/ui/sprite-sheet.png) no-repeat;
}

#email.hasEmail .icon{
    background: url(../img/ui/sprite-sheet.png) no-repeat -26px 0;
}

#email.hasEmail:hover, #email.hasEmail.selected{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom,
    url(../img/ui/nav_selected_bg.gif) repeat-x bottom;
}

#email.hasEmail:hover .icon, #email.hasEmail.selected .icon{
    background: url(../img/ui/sprite-sheet.png) no-repeat -104px 0;
}

#email.hasEmail.urgent{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom;
}

#email.hasEmail.urgent .icon{
    background: url(../img/ui/sprite-sheet.png) no-repeat -52px 0;
}

#email.hasEmail.urgent:hover, #email.hasEmail.urgent.selected{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom,
    url(../img/ui/nav_urgent_selected_bg.gif) repeat-x bottom;
}

#email.hasEmail.urgent:hover .icon, #email.hasEmail.urgent.selected .icon{
    background: url(../img/ui/sprite-sheet.png) no-repeat -78px 0;
}

#profile{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom;
    line-height: 63px;
    height: 63px;
}

#profile .label{
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#profile:hover, #profile.nav-selected{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom,
    url(../img/ui/nav_selected_bg.gif) repeat-x bottom;
}

#profile .button{
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    width: 10px;
    height: 7px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -106px -28px;
}

#profile:hover .button, #profile.selected .button{
    position: relative;
    width: 10px;
    height: 7px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -96px -28px;
}

#profile .icon{
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    width: 28px;
    height: 28px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -130px -0px;
}

#profile:hover .icon, #profile.selected .icon{
    position: relative;
    width: 28px;
    height: 28px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -158px -0px;
}

#help{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom;

    width: 58px;
    line-height: 63px;
    height: 63px;
}

#help:hover, #help.selected{
    background: url(../img/ui/main_nav_bg.png) no-repeat right bottom,
    url(../img/ui/nav_selected_bg.gif) repeat-x bottom;
}

#help .icon{
    position: absolute;
    top: 18px;
    left: 14px;
    width: 29px;
    height: 29px;
    background: url(../img/ui/sprite-sheet.png) no-repeat 0 -43px;
}

#help:hover .icon, #help.selected .icon{
    position: absolute;
    top: 19px;
    left: 15px;
    width: 28px;
    height: 28px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -29px -44px;
}


/* Ads */
#adSpace{
    text-align: center;
}

/* Category List */
#categories-view{
    margin-bottom: 25px;
    position: relative;
}

#category_button_container{
    height: 376px;
    background: url('../img/ui/cat-bg-lines.gif') no-repeat center center;
}

#prev_category{
    position: absolute;
    width: 26px;
    height: 45px;
    left: 0px;
    top: 161px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -218px 0px;

}

#prev_category:hover{
    width: 32px;
    height: 52px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -186px 0px;
}

#next_category{
    position: absolute;
    width: 26px;
    height: 45px;
    right: 6px;
    top: 161px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -276px 0px;
}

#next_category:hover{
    width: 32px;
    height: 52px;
    right:0px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -244px 0px;
}

#category_button_btn0{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 38px;
    top: 30px;
    border: none;
    background-color: transparent;
}

#category_button_btn0:hover{ background-position: 0px 95px;  }

#category_button_btn1{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 360px;
    top: 30px;
    border: none;
    background-color: transparent;
}

#category_button_btn1:hover{ background-position: 0px 95px; }

#category_button_btn2{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 680px;
    top: 30px;
    border: none;
    background-color: transparent;
}
#category_button_btn2:hover{ background-position: 0px 95px; }


#category_button_btn3{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 38px;
    top: 141px;
    border: none;
    background-color: transparent;
}

#category_button_btn3:hover{ background-position: 0px 95px; }


#category_button_btn4{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 360px;
    top: 141px;
    border: none;
    background-color: transparent;
}

#category_button_btn4:hover{ background-position: 0px 95px; }

#category_button_btn5{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 680px;
    top: 141px;
    border: none;
    background-color: transparent;
}

#category_button_btn5:hover{ background-position: 0px 95px; }

#category_button_btn6{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 38px;
    top: 252px;
    border: none;
    background-color: transparent;
}

#category_button_btn6:hover{ background-position: 0px 95px; }

#category_button_btn7{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 360px;
    top: 252px;
    border: none;
    background-color: transparent;
}

#category_button_btn7:hover{ background-position: 0px 95px; }

#category_button_btn8{
    position: absolute;
    width: 309px;
    height: 97px;
    left: 680px;
    top: 252px;
    border: none;
    background-color: transparent;
}

#category_button_btn8:hover{ background-position: 0px 95px; }

#category_button_container button.nav-selected { background-position: 0px 95px; text-decoration:none;} 

/* CLASSES */

#main{
    color: #dfe0dd;
}

#classListHeader{
    height: 26px;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
}

#classTotal{
    float: right;
    font-size: 1.2em;
}

#upArrow{
    width: 39px;
    height: 26px;
    margin-left: auto;
    margin-right: auto;
    background: url(../img/ui/sprite-sheet.png) no-repeat -302px -26px;
}

#upArrow:hover{
    width: 41px;
    height: 26px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -303px 0px;
}

#downArrow{
    width: 39px;
    height: 26px;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
    background: url(../img/ui/sprite-sheet.png) no-repeat -344px -26px;
}

#downArrow:hover{
    width: 41px;
    height: 26px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -344px 0px;
}

#classes-view-container, #categories-view-container, #loading-container{
    height: 425px;
}

#classes-view{
    width: 534px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

#classDetails{
    margin-left: 50px;
    margin-top: 50px;
    width: 400px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    color: #aaaba3;
    font-family: 'Open Sans';
    font-weight: normal;
    font-size: 1em;
}

#thumbnail{
    display: inline-block;
    vertical-align: top;
}

#classLinks{
    display: inline-block;
    list-style: none;
    margin-top: 4px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 0px;
}

#classLinks li{
    display: block;
    width: 143px;
    height: 30px;
    margin: 2px 0px;
}

#hide{ background: url(../img/ui/buttons.gif) no-repeat -143px 0px; }
#hide:hover{ background: url(../img/ui/buttons.gif) no-repeat 0px 0px; }
#hide.disabled,#hide.disabled:hover{ background: url(../img/ui/buttons.gif) no-repeat -286px -0px; }

#favorite{ background: url(../img/ui/buttons.gif) no-repeat -143px -30px; }

#favorite:hover{ background: url(../img/ui/buttons.gif) no-repeat 0px -30px; }
#favorite.disabled,#favorite.disabled:hover{ background: url(../img/ui/buttons.gif) no-repeat -286px -30px; }

#favorite.remove{ background: url(../img/ui/buttons.gif) no-repeat -143px -120px; }
#favorite.remove:hover{ background: url(../img/ui/buttons.gif) no-repeat 0px -120px; }

#comments{ background: url(../img/ui/buttons.gif) no-repeat -143px -60px; }

#comments:hover{ background: url(../img/ui/buttons.gif) no-repeat 0px -60px; }
#comments.disabled, #comments.disabled:hover{ background: url(../img/ui/buttons.gif) no-repeat -286px -60px; }

#share{ background: url(../img/ui/buttons.gif) no-repeat -143px -90px; }

#share:hover{ background: url(../img/ui/buttons.gif) no-repeat 0px -90px; }
#share.disabled, #share.disabled:hover{ background: url(../img/ui/buttons.gif) no-repeat -286px -90px; }

#classDescription{
    margin-top: 20px;
}

#classes-view .row.selected{
    background-color: #90bc1b;
    color: #2d2c2c;
}

#upArrow + .row{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    height: 53px;
}

#classes-view .row{
    border-bottom: 1px solid #000;
    height: 53px;
    position: relative;
}

.cell1, .cell2, .cell3{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    height: 52px;
}

#classes-view .cell1{
    border-top: 1px solid #444242;
    border-right: 1px solid #444242;
    width: 103px;
}

#classes-view .cell2{
    border-top: 1px solid #444242;
    border-left: 1px solid #000000;
    width: 337px;
    line-height: 1.1em;
}

#classes-view .cell3{
    border-top: 1px solid #444242;
    border-left: 1px solid #000000;
    width: 90px;
}

#classes-view .row.selected .cell1{
    border: none;
    padding-right: 1px;
    padding-top: 1px;
}
#classes-view .row.selected .cell2{
    border: none;
    padding-left: 1px;
    padding-top: 1px;
}
#classes-view .row.selected .cell3{
    border: none;
    padding-left: 1px;
    padding-top: 1px;
}

#classes-view .row.selected .cell4{
    position: absolute;
    right: -12px;
    top: 0px;
    width: 13px;
    height: 53px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -385px 0px;
}

.date{
    margin-left: 20px;
    margin-top: 7px;
}

.new{
    width: 32px;
    height: 12px;
    margin-left: 20px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -186px -60px;
}

#classes-view .row.selected .new{
    background: url(../img/ui/sprite-sheet.png) no-repeat -218px -60px;
}

.title{
    margin-top: 10px;
    margin-left: 10px;
}

.instructor{
    margin-left: 10px;
}

.instructor .italic{
    font-family: 'Open Sans', sans-serif;
}


.playBtn{
    position: relative;
    display: inline-block;
    top: 8px;
    left: 11px;
    width: 25px;
    height: 24px;
    background: url(../img/ui/sprite-sheet.png) no-repeat -83px -48px;
}

.progress{
    position: relative;
    display: inline-block;
    top: 14px;
    left: 10px;
}

.indicator{
    height: 7px;
    background-color: #4d4d45;
}

.time{
    font-size: .8em;
    text-align: center;
}

#thumbnail{
    background:#444242;
    padding:1px;
    border:1px solid #000000;
}

#classes-view .selected .indicator{
    border-color: #ffffff;
}

.p0, .p1, .p2, .p3{
    border-left: 0px solid #95c21f;
    width: 30px;
}

.p4, .p5, .p6{
    border-left: 1px solid #95c21f;
    width: 29px;
}

.p7, .p8, .p9{
    border-left: 2px solid #95c21f;
    width: 28px;
}

.p10, .p11, .p12, .p13{
    border-left: 3px solid #95c21f;
    width: 27px;
}

.p14, .p15, .p16{
    border-left: 4px solid #95c21f;
    width: 26px;
}

.p17, .p18, .p19{
    border-left: 5px solid #95c21f;
    width: 25px;
}

.p20, .p21, .p22, .p23{
    border-left: 6px solid #95c21f;
    width: 24px;
}

.p24, .p25, .p26{
    border-left: 7px solid #95c21f;
    width: 23px;
}

.p27, .p28, .p29,{
    border-left: 8px solid #95c21f;
    width: 22px;
}

.p30, .p31, .p32, .p33{
    border-left: 9px solid #95c21f;
    width: 21px;
}

.p34, .p35, .p36{
    border-left: 10px solid #95c21f;
    width: 20px;
}

.p37, .p38, .p39{
    border-left: 11px solid #95c21f;
    width: 19px;
}

.p40, .p41, .p42, .p43{
    border-left: 12px solid #95c21f;
    width: 18px;
}

.p44, .p45, .p46{
    border-left: 13px solid #95c21f;
    width: 17px;
}

.p47, .p48, .p49{
    border-left: 14px solid #95c21f;
    width: 16px;
}

.p50, .p51, .p52, .p53{
    border-left: 15px solid #95c21f;
    width: 15px;
}

.p54, .p55, .p56{
    border-left: 16px solid #95c21f;
    width: 14px;
}

.p57, .p58, .p59{
    border-left: 17px solid #95c21f;
    width: 13px;
}

.p60, .p61, .p62, .p63{
    border-left: 18px solid #95c21f;
    width: 12px;
}

.p64, .p65, .p66{
    border-left: 19px solid #95c21f;
    width: 11px;
}

.p67, .p68, .p69{
    border-left: 20px solid #95c21f;
    width: 10px;
}

.p70, .p71, .p72, .p73{
    border-left: 21px solid #95c21f;
    width: 9px;
}

.p74, .p75, .p76{
    border-left: 22px solid #95c21f;
    width: 8px;
}

.p77, .p78, .p79{
    border-left: 23px solid #95c21f;
    width: 7px;
}

.p80, .p81, .p82, .p83{
    border-left: 24px solid #95c21f;
    width: 6px;
}

.p84, .p85, .p86{
    border-left: 25px solid #95c21f;
    width: 5px;
}

.p87, .p88, .p89{
    border-left: 26px solid #95c21f;
    width: 4px;
}

.p90, .p91, .p92, .p93{
    border-left: 27px solid #95c21f;
    width: 3px;
}

.p94, .p95, .p96{
    border-left: 28px solid #95c21f;
    width: 2px;
}

.p97, .p98, .p99{
    border-left: 29px solid #95c21f;
    width: 1px;
}

.p100{
    border-left: 30px solid #95c21f;
    width: 0px;
}

.loading #classes-view-container, .loading #categories-view-container, .loading #classes-nav {
    display: none;
}

.viewCategories #classes-nav, .viewCategories #classes-view-container, .viewCategories #loading-container{
    display: none;
}

.viewClasses #logoLink, .viewClasses #categories-view-container, .viewClasses #loading-container{
    display: none;
}


/* base nav styles */
nav { position:relative; }


nav .popup {
    position:absolute;
    top: 64px;
    background-color: #2d2c2b;
    border: 1px solid #3d3b3b;
    box-shadow: 1px 1px 0px #060505;
    z-index: 500;
    display: none;
}

.popHelpTop{
    padding: 24px;
    border-bottom: 1px solid #3d3b3b;
    border-left: 1px solid #060505;
}

.popHelpBottom{
    background: url(../img/ui/background_tile.gif);
    padding: 24px;
    border-top: 1px solid #060505;
    border-left: 1px solid #060505;
}

#helpPopup{
    right: 0px;
    line-height: normal;
    min-width: 250px;
}

#profilePopup{
    right: 0px;
    line-height: 1.4em;
    white-space:nowrap;
    min-width: 100%;
}

#filterPopup, #categoryPopup, #createFilterPopup{
    left: 0px;
    line-height: 1.4em;
    white-space:nowrap;
}

#filterSubMenu{
    background-color: #95c21f;
    display: none;
    position: absolute;
}

#filterSubMenu .arrow{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -324px -51px;
    width: 12px;
    height: 24px;
    position: absolute;
    left: -12px;
    top:14px;
    z-index: 75;
}

#deleteAlert{
    position:absolute;
    top: 300px;
    width: 200px;
    background-color: #2d2c2b;
    border: 1px solid #3d3b3b;
    box-shadow: 1px 1px 0px #060505;
    z-index: 500;
    padding: 25px;
    text-align: center;
    left : 50%;
    margin-left: -100px;
    display: none;
}

#delYesBtn{
    margin-top: 20px;
    width:61px;
    height: 33px;
    background:  url(../img/ui/buttons.gif) no-repeat -245px -282px;
    display: inline-block;
}

#delYesBtn:hover{
    background-position: -184px -282px;
}

#delNoBtn{
    margin-top: 20px;
    width:61px;
    height: 33px;
    background:  url(../img/ui/buttons.gif) no-repeat -367px -282px;
    display: inline-block;
}

#delNoBtn:hover{
    background-position: -306px -282px;
}

#filterSubActions{
    list-style: none;
    margin: 15px;
    padding: 0px;
}

#filterSubActions li{
    color: #2d2c2c;
    text-shadow: 1px 1px #b9fd72;
    line-height: 1.8em;
}

#filterSubActions li:hover{
    color: #FFFFFF;
    text-shadow: none;
}
#filterSubActions .icon{
    display: inline-block;
    vertical-align: middle;
}

#filterSubActions .edit .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -307px -56px;
    width: 17px;
    height: 16px;
    margin-right: 5px;
}

#filterSubActions .edit:hover .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -307px -72px;
}

#filterSubActions .delete .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -295px -54px;
    width: 12px;
    height: 18px;
    margin-right: 10px;
}

#filterSubActions .delete:hover .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -295px -72px;
}

#filterSubActions .default .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -281px -60px;
    width: 14px;
    height: 12px;
    margin-right: 8px;
    margin-top: -4px;
}

#filterSubActions .default:hover .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -281px -72px;
}


#login{
    padding: 24px;
    border-bottom: 1px solid #3d3b3b;
    border-left: 1px solid #060505;
    line-height: normal;
}

#signUp{
    margin-top: 15px;
}

#userSettings{
    border-bottom: 1px solid #3d3b3b;
    border-left: 1px solid #060505;
    line-height: normal;
}

#categoryPopup li{
    position: relative;
    display: block;
    padding: 1px 20px 1px 20px;
}

#filterPopup li{
    position: relative;
    display: block;
    padding: 1px 40px 1px 20px;
}

#filterPopup ul{
    padding-top: 14px;
    padding-bottom: 14px;
}

#categoryPopup li .label, #filterPopup li .label{
    vertical-align: top;
}

#categoryPopup .icon{
    position: relative;
    left: 0px;
    top:1px;
    display: inline-block;
    width: 11px;
    height: 14px;
}

#filterPopup .icon{
    position: relative;
    left: 0px;
    top:0px;
    display: inline-block;
    width: 14px;
    height: 13px;
}


#categoryPopup li:hover, #categoryPopup li.selected, #filterPopup li:hover{
    background-color: #1f1e1f;
}

#categoryPopup li.selected .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -56px -28px;
}

#categoryPopup li:hover .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -67px -28px;
}

#filterPopup li.selected .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -40px -78px;
}

#filterPopup .icon{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -54px -78px;
}

#category_list{
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #3d3b3b;
    border-left: 1px solid #060505;
}

#filter_list1{
    border-bottom: 1px solid #3d3b3b;
    border-left: 1px solid #060505;
}

#filter_list2{
    border-bottom: 1px solid #3d3b3b;
    border-left: 1px solid #060505;
}

#filter_list3{
    border-bottom: 1px solid #3d3b3b;
    border-left: 1px solid #060505;
}

#filterPopup div.default{
    display: none;
}

#filterPopup .default div.default{
    position: relative;
    top: -1px;
    background:  url(../img/ui/sprite-sheet.png) no-repeat -268px -61px;
    width: 13px;
    height: 11px;
    display: inline-block;
}

#filterPopup .more{
    margin-right: 8px;
    margin-left: 8px;
    position: absolute;
    right: 0;
    top:2px;
    background:  url(../img/ui/sprite-sheet.png) no-repeat 0px -72px;
    width: 20px;
    height: 19px;
    display: inline-block;
}

#filterPopup .more:hover, #filterPopup .more.selected{
    background:  url(../img/ui/sprite-sheet.png) no-repeat -20px -72px;
}

#createFilterPopup{
    display: none;
}

#createFilter, #logoutBtn{
    position: relative;
    width: 100%;
    height: 32px;
    border: none;
    background:  url(../img/ui/background_tile.gif)
}

#createFilter:hover, #logoutBtn:hover{
    background:  url(../img/ui/button_select_bg.gif)
}

#createFilter .btnLabel{
    position: relative;
    top: 8px;
    background:  url(../img/ui/transparent-buttons.png) no-repeat 0px -16px;
    width: 144px;
    height: 16px;
    margin-left: 20px;
    margin-right: 20px;
}

#createFilter:hover .btnLabel{
    background:  url(../img/ui/transparent-buttons.png) no-repeat 0px -32px;
}

#createFilterInput, #filterActions, #filterSelection{
    padding: 24px;
}

#filterSelection{
    padding-top: 10px;
}

#createFilterInput, #filterActions, #filterSelection,#filterTabs{
    border-bottom: 1px solid #0b0b0b;
    border-left: 1px solid #060505;
}

#filterActions, #filterSelection, #filterTabs{
    border-top: 1px solid #444242;
}

#filterTabs{
    padding-left: 24px;
    padding-right: 24px;
}

#filterTabs li{
    position: relative;
    padding: 10px;
    display: inline-block;
    color: #a8aba3;
    text-transform: uppercase;
}

#filterTabs li:hover{
    color: #FFFFFF;
    text-shadow: 2px 2px 0px #000;
}

#filterTabs li.selected{
    color: #FFFFFF;
    text-shadow: 2px 2px 0px #000;
    background-color: #222121;
}

#filterTabs li.selected #filterSelectionIndicator{
    display: block;
}

#filterSelectionIndicator{
    left:50%;
    margin-left: -12px;
    background:  url(../img/ui/sprite-sheet.png) no-repeat -182px -77px;
    width: 24px;
    height: 14px;
    display: none;
    position: absolute;
    bottom: -13px;
}

#filterInclude li{
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

#defaultFilterContainer{
    position: relative;
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-size: .9em;
    color: #FFFFFF;
    margin-left: 75px;
}

#filterName{
    width: 300px;
    margin-left: 10px;
    display: inline;
    border: solid 1px #2d2c2b;
}

#filterName.error{
    font-family: 'Open Sans Condensed',sans-serif;
    color: rgb(172, 172, 172);
    border: solid 1px #FF0000;
}

#availableFilterTags{
    width:717px;
    margin-bottom:20px;
    margin-top:20px;
    overflow:hidden;
}

#availableFilterTags li{
    width:33.333%;
    line-height:1.5em;
    float:left;
    display:inline;
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}

#selectAllBtn{
    background:  url(../img/ui/buttons.gif) no-repeat -92px -216px;
    width: 92px;
    height: 33px;
    display: inline-block;
}

#selectAllBtn:hover{
    background:  url(../img/ui/buttons.gif) no-repeat 0px -216px;
}

#deselectAllBtn{
    background:  url(../img/ui/buttons.gif) no-repeat -293px -216px;
    width: 109px;
    height: 33px;
    display: inline-block;
}

#deselectAllBtn:hover{
    background:  url(../img/ui/buttons.gif) no-repeat -184px -216px;
}

#saveFilterBtn{
    background:  url(../img/ui/buttons.gif) no-repeat -92px -183px;
    width: 92px;
    height: 33px;
    display: inline-block;
}

#saveFilterBtn:hover{
    background:  url(../img/ui/buttons.gif) no-repeat -0px -183px;
}

#saveFilterBtn.disabled,#saveFilterBtn.disabled:hover{ background: url(../img/ui/buttons.gif) no-repeat -184px -183px; }

#applyFilterBtn{
    background:  url(../img/ui/buttons.gif) no-repeat -209px -315px;
    width: 209px;
    height: 33px;
    display: inline-block;
}

#applyFilterBtn:hover{
    background:  url(../img/ui/buttons.gif) no-repeat 0px -315px;
}

#cancelFilterBtn{
    background:  url(../img/ui/buttons.gif) no-repeat -92px -249px;
    width: 92px;
    height: 33px;
    display: inline-block;
}

#cancelFilterBtn:hover{
    background:  url(../img/ui/buttons.gif) no-repeat 0px -249px;
}

#filterActions{
    position: relative;
}

#filterErrorMessage{
    position: absolute;
    top:24px;
    right:24px;
    bottom: 24px;
    display: inline-block;
    height: 33px;
    line-height: 33px;
    text-align: center;
    color: #FF0000;
}


#logoutBtn .btnLabel{
    position: relative;
    top: 8px;
    background:  url(../img/ui/transparent-buttons.png) no-repeat 0px 0px;
    width: 90px;
    height: 16px;
    margin-left: 20px;
    margin-right: 20px;
}

#logoutBtn:hover .btnLabel{
    background:  url(../img/ui/transparent-buttons.png) no-repeat -90px 0px;
}



#popShadow{
    position: absolute;
    top:65px;
    bottom: 0px;
    right: 0px;
    left:0px;
    min-width: 1024px;
    min-height: 600px;
    background-color: #000000;
    opacity: 0.75;
    filter: alpha(opacity=75);
    display: none;
    z-index: 0;
}

.customerService{
     color: #95c21f;
     text-shadow: 2px 2px 0px #000;
 }

.customerService a{
    color: #95c21f;
    text-shadow: 2px 2px 0px #000;
}

.customerService a:hover{
    color: #ffffff;
}

.sendBtn{
    width: 92px;
    height: 33px;
    border: none;
    background: url(../img/ui/buttons.gif) no-repeat -92px -282px;
}

.sendBtn:hover{background: url(../img/ui/buttons.gif) no-repeat 0px -282px;}

.loginBtn{
    width: 104px;
    height: 33px;
    border: none;
    background: url(../img/ui/buttons.gif) no-repeat -288px -249px;
}

.loginBtn:hover{background: url(../img/ui/buttons.gif) no-repeat -184px -249px;}

.popIcon{
    position: absolute;
    width: 28px;
    height: 15px;
    background: url(../img/ui/sprite-sheet.png) no-repeat 0px -28px;
    display: none;
    z-index: 1000;
}

.selected .popIcon{
    display: block;
}

#help .popIcon, #profile .popIcon{
    right: 14px;
    bottom: -15px;
}

.inputRow{
    position: relative;
    margin-bottom: 10px;
}

.error{
    color: #ff0000;
    font-family: 'Open Sans', sans-serif;
}

#vPlayerModal{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    min-width: 1024px;
    min-height: 700px;
    background-color: rgba(0, 0, 0, 0.85);

    display: none;
    z-index: 1000;
}

#vPlayerContainer{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background-color: rgba(0, 0, 0, 1);
    border: solid 1px #404040;
    width: 640px;
    padding: 25px;
}

#closeBtn{
    position: absolute;
    width: 24px;
    height: 24px;
    top: -12px;
    right: -12px;
    background-image: url(../img/ui/close.png);
}

#loader{
    position: absolute;
    width: 31px;
    height: 31px;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    background-image: url(../img/ui/loader.gif);
}

#playerTitle{
    float: left;
}

#playerCount{
    float: right;
}

#playerMessage{

}

#catPromo{
    text-align:center;
    margin-top: 20px;
}

*:active, object:focus, embed:focus, div:focus, li:focus
{
    outline: none;
}

/* -----------------  notification elements for css bug ---------------------*/
#ios-notice-overlay {
    position: absolute;
    height:100vw;
    width:100vw;
    background: rgba(0,0,0,.8);
    top:0;
    left:0;
    display: none;
}
#ios-notice {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 10%;
    width:80%;
    padding:2rem;
    background:red;
    display: none;
}

#ios-notice h1 {
    text-align: center;
    line-height: normal;
    font-size: 1.6em;
}
/* ------------------  custom css for addtohomescreen  -------------------- */
.ath-android {
	top: 1.8em;
    bottom:initial;
}
.ath-container {
    color:black;
    text-shadow:none;
}
.ath-action-icon {
    height:1rem !important;
    width:1rem !important;
}

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* h5bp.com/t */
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}