a:link{text-decoration:inherit;color:inherit;}
a:active{text-decoration:inherit;color:inherit;}
a:visited{text-decoration:inherit;color:inherit;}

@font-face
{
    src:url(Fonts/FreshdlyThinking.ttf);
    font-family:freshlythinking;
}

@font-face
{
    src:url(Fonts/CooperHewitt-Book.ttf);
    font-family:CooperHewittBook;
}

@font-face
{
    src:url(Fonts/CooperHewitt-Medium.ttf);
    font-family:CooperHewittMedium;
}

@font-face
{
    src:url(Fonts/Gabrielle.ttf);
    font-family:Gabrielle;
}

@font-face
{
    src:url(Fonts/granola.ttf);
    font-family:granola;
}

@font-face
{
    src:url(Fonts/MJ.ttf);
    font-family:MJ;
}

@font-face
{
    src:url(Fonts/Sugar.TTF);
    font-family:Sugar;
}

@font-face
{
    src:url(Fonts/Celtic.ttf);
    font-family:Celtic;
}

@font-face
{
    src:url(Fonts/Lobster.otf);
    font-family:Lobster;
}

html,body
{
    margin:0;
    font-family: Helvetica;
    font-weight:300;
    color: #5b5b5b;
    background-color: #fcfcfc;
    -webkit-font-smoothing: subpixel-antialiased;
}

td
{
    padding:10px;
}



.AddBorder
{
    border-top:0;
    border-left:0;
    border-right:0;
    border-bottom:2px solid skyblue;
}

#Banner
{
    position:relative;
    background-color: #363f47;
    padding:20px;
    z-index:50;
    color:white;
}

.BannerHeading
{
    position:absolute;
    font-size:300%;
    font-family:Helvetica;
    color:white;
}

.BannerTabContainer
{
    position:absolute;
    left:60px;
    bottom:0;
}

.BannerTab
{
    text-align:center;
    padding:10px 20px;
    width:100px;
    font-size:80%;
    display:inline-block;
}

.BannerTabSelected
{
    color:white;
    border-bottom:2px solid yellow;
    font-weight:500;
}

.BannerTabNoSelect
{
    color:lightgrey;
    border-bottom:2px solid transparent;
    font-weight:300;
}

.Bottom_Navigation
{
    background-color:black;
    padding:10px;
    margin-top:10px;
    text-align:center;
}

.ButtonHighlight
{
    width:10px;
    height:10px;
    border-radius:20px;
    margin-right:10px;
    display:inline-block;
    vertical-align:middle;
}

.Card_Button_Raised
{
    display:inline-block;
    width:100px;
    text-align:center;
    border:1px solid lightgrey;
    padding:20px;
    margin:-5px -5px;
}

.Card_Row
{
    background-color:white;
    font-size:80%;
    font-weight:500;
    padding:20px;
}

.Card_Row_Small
{
    padding:7px 0 7px 10px;
    font-size:80%;
}

.Card_Heading
{
    text-align:center;
    font-size:100%;
    background-color: #e6e6e6;
}

.Card_Heading_Small
{
    font-size:90%;
    padding:10px;
    font-weight:500;
    background-color: #e6e6e6;
}

.Card
{
    margin:20px;
    box-shadow: 1px 2px 3px 1px #9b9b9b;
    background-color:white;
    position:relative;
}

.Card_Flat
{
    margin:20px;
    border-radius:3px;
    background-color:white;
    position:relative;
    border:1px solid lightgrey;
    display:inline-block;
}

.Card_Button
{
    display:inline-block;
    width:100px;
    text-align:center;
    border:1px solid lightgrey;
    padding:20px;
    margin:-1px -1px 0 0;
}

.Card_Row_Item
{
    display:inline-block;
    margin:0 10px;
    vertical-align:top;
}

.Card_Row_List
{
    margin-top:-1px;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
    font-size:80%;
    background-color:white;
    padding:10px 20px;
}

.Card_Row_List_Small
{
    font-size:80%;
    background-color:white;
    padding:2px;
}

.Card_Row_Staff_Image
{
    width:40px;
    max-height:40px;
    overflow:hidden;
    border:1px solid grey;
    border-radius:40px;
    display:inline-block;
}

.Card_Title
{
    text-align:center;
    background-color: #40C6F0;
    padding:20px 0;
    font-size:100%;
    color:white;
    margin:0 auto;
    font-weight:500;
}

.Card_Title_Highlight
{
    background-color: #5b7bf0;
    color:white;
}

.Card_Title_Highlight_Grey
{
    background-color: #e6e6e6;
    color:black;
}

.Card_Title_Border
{
    border-bottom: 1px solid #5b7bf0;
}

.Card_Title_Standard
{
    background-color:white;
    color:black;
}

.Card_Title_NoHighlight
{
    background-color: #f4f4f4;
    color:black;
}

.Card_Title_Small
{
    padding:10px 0;
    margin:0 auto;
    font-weight:500;
    font-size:80%;
}

.ClearButton
{
    border:transparent;
    background-color:transparent;
    cursor:pointer;
}

.Circle
{
    border-radius:50px;
    height:30px;
    width:30px;
    overflow:hidden;
    text-align:center;
    line-height:2.35;
    margin:5px;
    border:1px solid lightgrey;
    display:inline-block;
}

.Columns
{
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

.ColumnsTwo
{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 100px;
    -moz-column-gap: 100px;
    column-gap: 100px;
}

.ColumnsFour
{
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
}

.ColumnsSix
{
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
    -webkit-column-gap: 75px;
    -moz-column-gap: 75px;
    column-gap: 75px;
}

.Completed
{
    background-color:limegreen;
}

.Delete
{
    display:inline-block;
}

.DeleteContainer
{
    border-radius:10px;
    height:15px;
    width:15px;
    border:2px solid lightgrey;
    display:inline-block;
    vertical-align:middle;
    margin:0 10px 2px 0;
    cursor:pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.DeleteContainerSelected
{
    border-radius:10px;
    height:17px;
    width:17px;
    border:1px solid #bb0000;
    background-color:red;
    display:inline-block;
    vertical-align:middle;
    margin:0 10px 2px 0;
    cursor:pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.DeleteIcon
{
    width:11px;
    margin:3px 0 0 3px;
}

#Filter
{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0,0,0,0.8);
    display:none;
    z-index:99;
}

.HideOverflow
{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.NoScroll
{
    overflow:hidden;
}

form
{
    margin:0;
    padding:0;
}

.TextOutline
{
    text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
}

.code
{
    font-family: "Courier";
    color:black;
    font-weight:500;
}

.commentCode
{
    font-family: "Courier";
    color: #8a96a0;
}

.indent
{
    padding-left:20px;
}

.indentDouble
{
    padding-left:40px;
}

.indentTriple
{
    padding-left:60px;
}

.indentQuad
{
    padding-left:80px;
}

.GraphBar
{
    margin-top:-1px;
    border-top:1px solid #efefef;
    border-bottom:1px solid #efefef;
    border-right:1px solid #efefef;
    font-size:80%;
    border-bottom-right-radius:10px;
    border-top-right-radius:10px;
    padding:10px 20px;
}

.GraphColumn
{
    border-top-right-radius:5px;
    border-top-left-radius:5px;
    margin-left:-1px;
}

.Highlight
{
    background-color: #f6f6f6;
}

.HighlightDark
{
    background-color: #efefef;
}

.HighlightBorder
{
    border-bottom:2px solid #40C6F0;
}

.HighlightText
{
    background-color: lightgoldenrodyellow;
}

.HighlightBehaviour
{
    background-color: #ffbd6f;
}

.HighlightDelete
{
    background-color: #ffdadd;
}

.Icon
{
    width:15px;
    vertical-align:middle;
    margin-right:5px;
}

.Icon_Nav
{
    width:20px;
    vertical-align:middle;
}

.Indicator
{
    width:20px;
    height:20px;
    border-radius:20px;
    display:inline-block;
}

.LinedInput
{
    border-bottom:1px solid lightgrey;
    border-top:0;
    border-left:0;
    border-right:0;
}

.InputRound
{
    border-radius:20px;
    border:1px solid lightgrey;
    padding:5px;
    text-align:center;
    width:100%;
}

input:focus,textarea:focus,select:focus,button
{
    outline:0;
}

input[type='text'],input[type='password'],input[type='date'],input[type='number'],input[type='url'],textarea, select
{
    padding:5px;
    border:1px solid lightgrey;
    font-size:100%;
}

input[type='submit'],button
{
    font-size:100%;
    font-weight:300;
    color: #5b5b5b;
}

textarea
{
    resize:vertical;
    width:100%;
}

.Paragraph
{
    padding:5px 0;
}

select
{
    background-color:#FFFFFF;
    width:auto;
    text-align:center;
    border-radius:0;
    -webkit-border-radius:0;
    -webkit-appearance: none;
}

.InputForm
{
    border-bottom:1px solid lightgrey;
    border-top:0;
    border-left:0;
    border-right:0;
    padding:5px;
    text-align:center;
    width:100%;
}

#MainMenu
{
    position:fixed;
    left:-245px;
    top:0;
    bottom:0;
    background-color:white;
    width:240px;
    z-index:101;
    box-shadow: 1px 2px 2px 1px #888888;
}

.MenuPanel
{
    height:100%;
    margin-top:-3px;
    display:inline-block;
    vertical-align:top;
    background-color:white;
    position:absolute;
    left:0;
    width:350px;
    z-index:3;
}

.MenuPanelRight
{
    height:100%;
    margin-top:-3px;
    display:inline-block;
    vertical-align:top;
    background-color:white;
    position:absolute;
    right:0;
    width:350px;
    z-index:3;
}

.Cell
{
    display:table-cell;
}

.Shadow
{
    box-shadow: 1px 3px 5px 1px #888888;
}

.ShadowSmall
{
    box-shadow: 1px 2px 3px 1px #888888;
}

.Tag
{
    border-radius:20px;
    border:1px solid #162ba2;
    background-color: #f1f8ff;
    padding:3px 10px;
    display:inline-block;
    margin:5px;
}

.Sub_Heading_Row
{
    font-weight:600;
    background-color: #d7e6f7;
}

.MenuItem
{
    padding:10px 0 10px 20px;
}

.MenuHeading
{
    font-family:Gabrielle;
    font-size:200%;
    text-align:center;
    margin:20px;
    border-bottom:1px solid lightgrey;
}

.MenuSelected
{
    background-color: #40C6F0;
    color:black;
}

.ButtonSelected
{
    background-color: lightgoldenrodyellow;
    color:black;
}

.summaryHeading
{
    font-weight: 500;
    padding:0;
    margin-bottom:5px;
}

.Nav_Selector
{
    float:right;
    margin-top:13px;
    opacity:0.5;
}

.NoSelect
{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.PopAction
{
    margin:20px;
    box-shadow: 1px 2px 4px 1px #888888;
    vertical-align:top;
    background-color:white;
    display:none;
    position:absolute;
    z-index:5;

}

.PopActionItem
{
    padding:20px;
    text-align:left;
    color: #5b5b5b;
}

.PopActionButton
{
    background:transparent;
    width:100%;
    border:transparent;
    padding:0;
    text-align:left;
}

.ProjectMenuItemTitle
{
    font-size:80%;
    margin:10px;
    font-weight:500;
    display:inline-block;
    width:150px;
    height:30px;
    vertical-align:top;
    margin-top:20px;
}

.SubMenu
{
    position:fixed;
    top:0;
    bottom:0;
    left:-100%;
    background-color:white;
    padding:20px;
    z-index:100;
}

.SubMenuPanel
{
    position:relative;
    z-index:1;
    display:inline-block;
    vertical-align:top;
    width:calc(100% - 350px);
    margin-left:350px;
    background-color:white;
    padding-bottom:200px;
}

.SubMenuItem
{
    font-size:80%;
    margin:10px;
    font-weight:500;
}

.Student_Picture
{
    border-radius:75px;
    overflow:hidden;
    width:75px;
    max-height:75px;
    border:1px solid grey;
    margin:0 auto;
}

.Student_Profile_Picture
{
    border-radius:100px;
    overflow:hidden;
    width:150px;
    height:150px;
    border:1px solid grey;
    margin:0 auto;
}

.Student_Picture_Small
{
    border-radius:50px;
    overflow:hidden;
    width:50px;
    height:50px;
    border:1px solid grey;
    margin:0 auto;
}

.SubmitDiv
{
    border-radius:50px;
    height:40px;
    width:40px;
    overflow:hidden;
    position:absolute;
    right:10px;
    background-color:greenyellow;
}

.SubmitImg
{
    width:30px;
    margin:6px 0 0 5px;
}

.Thumbnail
{
    border:1px solid lightgrey;
    width:200px;
    float:left;
    margin-right:25px;
}

.CheckDiv
{
    border-radius:20px;
    height:20px;
    width:20px;
    overflow:hidden;
    background-color:greenyellow;
}

.CheckImg
{
    width:15px;
    margin:3px 0 0 3px;
}

.EventDiv
{
    border-radius:40px;
    height:40px;
    width:40px;
    overflow:hidden;
    background-color:greenyellow;
}

.EventImg
{
    width:30px;
    margin:5px 0 0 5px;
}

table
{
    border-collapse:collapse;
}

.TextHeading
{
    padding:10px 0;
    margin:0 10px;
    font-weight:100;
    background-color:white;
    font-size:100%;
    border-bottom:1px solid lightgrey;
}

.TextHeadingLarge
{
    font-weight:100;
    font-size:125%;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid lightgrey;
}

.TextSubHeading
{
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
}

.Tick
{
    position:absolute;
    border-radius:50px;
    margin:-1px 0 0 -1px;
    height:44px;
    width:44px;
    border:4px solid #b90003;
    text-shadow: 2px 0 0 #b90003, 0 -2px 0 #b90003, 0 2px 0 #b90003, -2px 0 0 #b90003;
    background-color:rgba(255,255,255,0.85);
    color:lightcoral;
    font-size:500%;
}

.toggle
{
    cursor:pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noSelect
{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.Urgent
{
    color:black;
    background-color:lightcoral;
    border:transparent;
}

.User_Button
{
    width:150px;
    min-height:175px;
    overflow:hidden;
    display:inline-block;
    position:relative;
    background-size:cover;
    margin:5px;
    box-shadow: 1px 3px 5px 1px #888888;
}

.User_Button_Label
{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:5px 2px;
    color:white;
    background-color:rgba(0,0,0,0.5);
    font-weight:500;
    overflow:hidden;
}

.Opacity
{
    opacity:0.25;
}

label
{
    cursor:pointer;
}