@charset "utf-8";

/* -------------------------------------------------------------------------- */
/* -- RESET ----------------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 			0;
  padding: 			0;
  border:			0;
  font-size: 		100%;
  font: 			inherit;
  vertical-align: 	baseline;
}

/* -------------------------------------------------------------------------- */
/* -- GLOBAL LAYOUT STYLES -------------------------------------------------- */
html {
	width: 				100%;
	height: 			100%;
}

body {
	margin: 			0;
	width: 				100%;
	background-color:	#502473;
	color: 				#000000;
	font-family:		Arial, Helvetica, sans-serif;
	font-size: 			16px;
	line-height: 		20px;
}

a {
	color: 				#960030;
}
a:focus, a:hover, a:active {outline:none;}

img {
	display: 			block;
	border: 			0px;
}

em {
	font-style: 		italic;
}

strong {
	font-weight: 		bold;
}


h1 {
    margin:             20px 0px;
    padding-bottom:     5px;
    text-align:         center;
    line-height:        2.0rem;
    font-size:          2.0rem;
    font-weight:        bold;
    color:              #441678;
}

h2 {
    margin:             5px 0px;
    text-align:         center;
    line-height:        1.2rem;
    font-size:          1.2rem;
    font-weight:        bold;
    color:              #000;
}

h2 i {
    margin-right:       10px;
}

main {
    display:            block;
}

/* -------------------------------------------------------------------------- */
/* -- HEADER ---------------------------------------------------------------- */
header {
    margin:             20px auto 0px auto;
    width: 				100%;
    max-width:			962px;
    height:             auto;
    background-color:   #FFF;
    border-bottom:      2px solid #441678;
}

header img {
    display:            block;
	margin:             0px auto;
    max-width:          481px;
    height:             auto;
}

header.interior {
    background-color:   transparent;
    border-bottom:      none;
}

.tutor {
    background-color: 	#441678;
	padding: 			10px;
    color:              #fff;
    text-align:         right;
}

.tutor a {
	color: 				#fff;
	text-decoration: 	none;
}

.tutor-button {
    border:             1px solid #441678;
    border-radius:      3px;
    box-shadow:         1px 1px 5px rgba(0,0,0,0.3);
    background-color:   #FFF;
    padding:            4px 10px;
    color:              #441678;
    font-weight:        bold;
    cursor:             pointer;
}

.tutor-button:hover {
    background-color:   #EEE;
    box-shadow:         none;
}


/* -------------------------------------------------------------------------- */
/* -- MENU ------------------------------------------------------------------ */
nav {
    margin-top:         167px;
	padding: 			15px 30px 0px 30px;
}

nav ul {
	list-style-type: 	none;
	display: 			flex;
	justify-content: 	center;
}

nav ul li {
	flex: 				        0 0 auto;
}

nav ul li a {
    display: 			        block;
    border:                     1px solid #fff;
    border-top-left-radius: 	5px;
    border-top-right-radius: 	5px;
    background-color:           #704A93;
    padding: 			        15px 30px;
    font-size: 			        1.6rem;
    color: 				        #fff;
    text-decoration: 	        none;
}

nav ul li a i {
	margin-right: 		       15px;
}

nav ul li a.current {
	border-top-left-radius: 	5px;
	border-top-right-radius: 	5px;
	background-color: 			#fff;
	color: 						#441678;
}

/* -------------------------------------------------------------------------- */
/* -- CONTENT AREAS --------------------------------------------------------- */
main {
	margin: 			0px auto;
    background-color:   #fff;
}

.content {
	box-sizing: 		border-box;
	width: 				100%;
	max-width:			962px;
    padding:            10px 100px;
}

/* -------------------------------------------------------------------------- */
/* -- TABLE ----------------------------------------------------------------- */
.table-results {
	width: 				100%;
	border-collapse: 	collapse;
}

.table-results th {
    border-top:         1px solid #704A93;
    border-right:       1px solid #704A93;
    border-left:        1px solid #704A93;
	border-bottom:		5px solid #a37cb4;
	background-color: 	#704A93;
	padding: 			10px;
	color: 				#fff;
	text-align: 		center;
	text-transform: 	uppercase;
}

.table-results td {
	border: 			1px solid #000;
	padding: 			10px;
    font-size:          0.8rem;
}

.table-results td.field {
	text-align:        right;
    font-weight:       bold;
}

.table-results td button {
    margin-left:        0px;
}

.table-details {
	width: 				100%;
	border-collapse: 	collapse;
	border: 			1px solid #000;
}

.table-details th {
    border: 			1px solid #000;
    background-color: 	#704A93;
	padding: 			5px;
	color: 				#fff;
	text-align: 		left;
	text-transform: 	uppercase;
}

.table-details td {
	border: 			1px solid #000;
	padding: 			5px;
}


/* -------------------------------------------------------------------------- */
/* -- INFO PANEL ------------------------------------------------------------ */
#student-info {
    display:            none;
}

.info-container {
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-between;
}

.info-contact {
    margin:             2% 0px;
    flex:               0 0 48%;
    box-sizing:         border-box;
    border:             5px solid #CCC;
    padding:            10px;
}

.summary {
    margin:             20px 0px;
}

.summary p {
    margin:             10px 0px;
    text-align:         center;
}

.summary p button {
    margin-left:        0px;
}

.pagination {
    margin:             20px 0px;
    text-align:         center;
    font-weight:        bold;
}

/* -------------------------------------------------------------------------- */
/* -- BUTTON ---------------------------------------------------------------- */
button {
	margin: 			0px 15px;
    border:             0;
    background-color:   #704A93;
    padding:            5px 10px;
    color:              #fff;
    font-size:          14px;
    cursor:             pointer;
}

button:hover {
    background-color:   #000;
}

button i {
	margin-right:		10px;
    transition:         transform 250ms ease;
}

button.full-width {
    margin:             5px 0px 5px 0px;
    width:              100%;
    text-align:         left;
}

.spin {
    transform:          rotate(180deg);
}

/* -------------------------------------------------------------------------- */
/* -- BACK LINKS ------------------------------------------------------------ */
.back-links {
    margin:             40px 0px 20px 0px;
    border-top:         1px solid #CCC;
    padding-top:        10px;
}

.back-links button {
    margin-left:        0px;
    margin-right:       20px;
}


/* -------------------------------------------------------------------------- */
/* -- MESSAGES -------------------------------------------------------------- */
.msg {
    padding:            10px;
    color:              #FFF;
}

.msg-error {
    background-color:   #660000;
}

.msg-success {
    background-color:   #006600;
}

.msg-warning {
    background-color:   #cb7400;
}


/* -------------------------------------------------------------------------- */
/* -- FORM LOGIN ------------------------------------------------------------ */
.form-login {
    margin:             30px auto;
    max-width:          320px;
}

.form-login p {
    margin:             15px 0px;
}

.form-login p label {
    margin-bottom:      5px;
    display:            block;
    font-size:          16px;
}

.form-login p input, .form-login p textarea {
    box-sizing:         border-box;
    width:              100%;
    border:             1px solid #CCC;
    border-radius:      3px;
    padding:            5px 10px;
    font-size:          16px;
}

.form-login p textarea {
    height:             100px;
}

.form-login p button {
    margin-left:        0px;
}

.form-login p input[type=submit] {
    margin-left:        0px;
    border:             0;
    width:              auto;
    background-color:   #704A93;
    padding:            5px 10px;
    color:              #fff;
    font-size:          14px;
    cursor:             pointer;
}

.form-login .form-notes {
    color:              #660000;
}

/* -------------------------------------------------------------------------- */
/* -- FORM CONTENT ---------------------------------------------------------- */
.form-content {
    margin:             20px 0px;
}

.form-content p {
    margin:             5px 0px 10px 0px;
}

.form-content p label {
    display:            inline-block;
    width:              180px;
    font-weight:        bold;
    vertical-align:     top;
}

.form-content p input, .form-content p select {
    box-sizing:         border-box;
    max-width:          100%;
    padding:            0px 5px;
    line-height:        1.2rem;
    font-size:          1.2rem;
}

.form-content input[type=submit] {
    margin-left:        0px;
    border:             0;
    background-color:   #704A93;
    padding:            5px 10px;
    color:              #fff;
    font-size:          14px;
    cursor:             pointer;
}


/* -------------------------------------------------------------------------- */
/* -- OVERLAY FORM ---------------------------------------------------------- */
.overlay {
    position:           fixed;
    display:            none;
    justify-content:    center;
    align-items:        center;
    top:                0;
    left:               0;
    z-index:            100;
    width:              100%;
    height:             100%;
    background-color:   rgba(255,255,255,0.7);
}

.overlay-show {
    display:            flex;
}

.overlay-content {
    box-sizing:         border-box;
    position:           relative;
    z-index:            101;
    flex:               0 1 500px;
    border:             1px solid #441678;
    border-radius:      3px;
    background-color:   #FFF;
    padding:            20px;
    color:              #000;
}

.overlay-content p {
    line-height:        24px;
    font-size:          18px;
    text-align:         justify;
    border-bottom:      3px solid #441678;
    padding-bottom:     10px;
}

.overlay-content form p {
    border-bottom:      none;
    padding-bottom:     0px;
}

.overlay-content form p label {
    font-weight:        bold;
}

button.overlay-close {
    box-sizing:         border-box;
    position:           absolute;
    top:                -30px;
    right:              -30px;
    width:              60px;
    height:             60px;
    margin:             0;
    border:             0;
    border-radius:      50%;
    background-color:   #441678;
    padding:            0;
    text-align:         center;
    color:              #FFF;
    font-size:          25px;
    line-height:        60px;
}

button.overlay-close:hover {
    background-color:   #000;
}


/* -------------------------------------------------------------------------- */
/* -- CALLOUT --------------------------------------------------------------- */
.callout {
    box-sizing:         border-box;
    position:           fixed;
    left:               0;
    bottom:             0;
    z-index:            50;
    margin:             0;
    width:              100%;
    background-color:   #000;
    padding:            20px;
    color:              #FFF;
    transition:         transform 500ms;
    transform:          translateY(160px);
}

.callout-show {
    transform:          translateY(0px);
}

.callout-content {
    box-sizing:         border-box;
    position:           relative;
    max-width:          720px;
    margin:             0 auto;
    line-height:        1.6rem;
    font-size:          1.6rem;
}

.callout-content h2 {
    text-align:         left;
    line-height:        2.4rem;
    font-size:          2.0rem;
    color:              #FFF;
}

.callout-content a {
    color:              #FFF;
}

.callout-content .overlay-close {
    top:                -50px;
}

/* -------------------------------------------------------------------------- */
/* -- MATERIALS ------------------------------------------------------------- */
.materials-container {
    margin-top:         40px;
}

.materials-header {
    margin: 			1px;
	background-color:	#666666;
	padding: 			5px;
	text-align: 		center;
	font-size: 			16px;
	border: 			1px solid #000000;
	color:				#FFFFFF;
}

.materials-list {
    display:            flex;
    flex-wrap:          wrap;
}

.materials-list .item {
    flex:               0 1 calc(25% - 2px);
    margin:             1px;
    box-sizing:         border-box;
    border: 			1px solid #000000;
    background-color:	#CCCCCC;
    padding: 			5px;
    text-align: 		left;
    cursor: 			pointer;
}

/* -------------------------------------------------------------------------- */
/* -- FOOTER ---------------------------------------------------------------- */
footer {
    box-sizing: 		border-box;
    margin:             0px auto;
	width: 				100%;
	max-width:			962px;
    background-color:   #fff;
    padding:            15px;
	text-align: 		center;

}

footer a {
	text-decoration: 	none;
}


/* -------------------------------------------------------------------------- */
/* -- COLORBOX -------------------------------------------------------------- */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}


/* -------------------------------------------------------------------------- */
/* -- COLORBOX -------------------------------------------------------------- */
#cboxOverlay{background:#fff;}

#colorbox{outline:0; border: 1px solid #bbb; box-shadow:0px 0px 10px #666;}
#cboxTopLeft{display:none;}
#cboxTopCenter{display:none;}
#cboxTopRight{display:none;}
#cboxBottomLeft{display:none;}
#cboxBottomCenter{display:none;}
#cboxBottomRight{display:none;}
#cboxMiddleLeft{display:none;}
#cboxMiddleRight{display:none;}
#cboxContent{background:#fff; background-color:#f5f5f5; padding:15px; overflow:hidden;}
    .cboxIframe{background:#fff;}
    #cboxError{padding:50px; border:1px solid #ccc;}

    #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
    #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
    #cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}

    /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
    #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

    /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
    #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

    #cboxLoadedContent{margin-bottom:0px;}
    #cboxClose{position:absolute; top:25px; left:25px; display:block; color:#000; height:30px; font-size:30px; line-height:30px; text-shadow: 0px 0px 5px #666;}



/* -------------------------------------------------------------------------- */
/* -- MOBILE PHONE RESIZE --------------------------------------------------- */
@media screen and (max-width: 767px) {

    body {
        font-size: 			12px;
        line-height: 		16px;
    }

    header {
        margin-top:         0px;
    	background: 	    none;
        height:             auto;
        background-color:   #fff;
    }

    .logo {
        display:            block;
        margin:             15px 0px;
    }

    .logo img {
        width:              160px;
        height:             auto;
    }

    .content {
        padding:            10px 20px;
    }

    /* ---------------------------------------------------------------------- */
    /* -- NAVIGATION -------------------------------------------------------- */
    nav {
        margin-top:         0px;
    	padding: 			5px 15px 0px 15px;
        background-color:   #704A93;
    }

    nav ul li a {
    	padding: 			7px 15px;
    	font-size: 			1.1rem;
    }

    nav ul li a i {
    	margin-right: 		5px;
    }

    /* ---------------------------------------------------------------------- */
    /* -- TABLES ------------------------------------------------------------ */
    .table-results th, .table-results td {
        padding: 			3px;
    }

    /* ---------------------------------------------------------------------- */
    /* -- BUTTONS ----------------------------------------------------------- */
    button {
        margin:             0px 2px;
    }

    .button-label {
        display:            none;
    }

    /* ---------------------------------------------------------------------- */
    /* -- STUDENT INFO ------------------------------------------------------ */
    .info-contact {
        flex:               0 0 100%;
    }

    /* ---------------------------------------------------------------------- */
    /* -- SESSION FORM ------------------------------------------------------ */
    .form-content {
        margin:             20px 0px;
    }

    .form-content p {
        margin:             5px 0px 10px 0px;
    }

    .form-content p label {
        display:            block;
        padding-left:       5px;
    }

    .form-content p input, .form-content p select {
        box-sizing:         border-box;
        max-width:          100%;
        padding:            0px 5px;
        line-height:        1.2rem;
        font-size:          1.2rem;
    }

    .form-content input[type=submit] {
        margin-left:        0px;
    }

    .materials-list .item {
        flex:               0 1 calc(100% - 2px);
    }

}