/* GLOBAL STYLES */

body { margin: 0; font-family: Helvetica, sans-serif; }
a { text-decoration: none; color: #a20016; }
a:hover { text-decoration: underline }

.clear { clear: both; }
.spacer-1 { height: 300px }
.spacer-2 { height: 150px }
.spacer-3 { height: 25px }

h1 { font-weight: 200; font-size: 2.8em; letter-spacing: -1px; padding-top: 15px; padding-bottom: 15px; color: #b1b1b1; }

code { position: absolute; visibility: hidden; }

.hidden {
    display: none;
}

/* MASTHEAD */

#topbar { margin: 0 auto; height: 10px; }

/* this should change depending on what the school color is
 Cristo Rey NYHS (A20016), Cristo Rey Jesuit HS (FCB034), Cristo Rey Brooklyn HS (005696) */

.school-color { background: #FCB034; }
/* masthead should change depending on school. link to...
cristoreybkhs.png, cristoreynyhs.png, cristoreyjesuit.png
*/
.masthead { width: 550px; height: 70px; no-repeat left; float: left; background-size:contain; }



/* INLINE LABELS */

/* user-defined settings */

label.inline-label {
  color: #333333;
}
label.inline-label-focus {
  color: #444444;
}

/* don't change any of this! */

label.inline-label {
  position: absolute !important;
  cursor: text !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-left: -1px !important;
  margin-top: -2px !important;
  border: 0 !important;
}

label.inline-label-has-text {
  visibility: hidden !important;
}

/*
 * Some styles based on those used in the Zurb inline form labels
 * http://www.zurb.com/playground/inline-form-labels
 */

label.zurb-inline {
  opacity: 1;
  color:#333333;
}

label.inline-label-focus.zurb-inline {
  opacity: 0.35;
  -webkit-transition-duration: 0.15s linear;
}

label.inline-label-has-text.zurb-inline {
  visibility: visible !important;
  opacity: 0.0;
  -webkit-transition-duration: 0s;
}



/* HEADER */

.headerwrapper { margin: 0 auto; height: 70px; border-bottom: 1px solid #CCC; background: #f3f3f3; }
.header { width: 850px; margin: 0 auto; }

.menu-container { width: 200px; float: right; margin-right: 25px; text-align: right; }


/* DROPDOWN MENU */

#mbtnavbar .arrowdown { font-size: 10px; }
#mbtnavbar { 
    width: 100%; 
	float: right;
	text-align: left;
    color: #000; 
    margin: 20px 0; 
    padding: 0; 
    position: relative; 
    border-top:0px; 
    height:35px;
}

#mbtnav { 
	float: right;
    margin: 0; 
    padding: 0; 
} 
#mbtnav ul { 
    float: right; 
    list-style: none; 
    margin: 0; 
    padding: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
} 
#mbtnav li { 
	float: right;
    list-style: none; 
	letter-spacing: -1px;
    margin: 0; 
    padding: 0; 
       
} 
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
    color: #333; 
    display: block; 
    font:700 1em Helvetica, sans-serif; 
    margin: 0; 
    padding: 9px 12px 11px 12px; 
    text-decoration: none; 
    border-right:0px;
} 
#mbtnav li a:hover, #mbtnav li a:active { 
    color: #333; 
    display: block; 
    text-decoration: none; 
    margin: 0; 
    padding: 9px 12px 11px 12px; 
}
#mbtnav li { 
    float: left; 
    padding: 0; 
} 
#mbtnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 150px; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li ul a { 
    width: 140px; 
} 
#mbtnav li ul ul { 
    margin: 0 0 0 140px; 
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
    left: auto; 
} 
#mbtnav li:hover, #mbtnav li.sfhover { 
    position: static; 
	float: right;
} 
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
    background: #FFFFFF; 
    width: 140px; 
    color: #333; 
    display: block; 
    font:normal 0.8em Helvetica, sans-serif; 
    margin: 0; 
    padding: 5px; 
	text-decoration: none; 
	z-index:9999; 
   
} 
#mbtnav li li a:hover, #mbtnav li li a:active { 
    background: #333; 
    color: #FFF; 
    display: block; 
   
}

#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {
    width: 120px; 
    display: block; 
    font:normal 0.8em Helvetica, sans-serif; 
    padding: 5px; 
	text-decoration: none; 
	z-index:9999; 
    margin: 0; 
   
   
} 
#mbtnav li li li a:hover, #mbtnav li li li a:active { 
    color: #FFF; 
    display: block; 
}


/* CONTENT */

#pagewrap { margin: 0 auto; width: 800px; color: #333; }
.subhead-text { padding-top: 10px; padding-bottom: 10px; letter-spacing: -1px; font-size: 1em; line-height: 1.2em; font-weight: 400; }


/* LOGIN FORM */

.username-field { position:relative; height: 30px; width: 270px; margin-top: 2px; margin-bottom: 2px; float: left; }
.inputfield { position:relative; height: 30px; margin-top: 2px; margin-bottom: 2px; float: left; }
.password-login {width: 270px; height: 30px;}
.loginbuttonwrap { float: right; margin-top: 4px; }

label.login  { position:absolute; top:0; left:0; padding-top: 8px; padding-left: 6px; font-size: 0.9em; }
input { font-family: Helvetica, sans-serif; font-size: 0.9em; }

input.username { width: 100%; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; }
input.password { width: 95%; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; }


/* CHANGE PASSWORD FORM */

.change-password { position:relative; height: 30px; width: 270px; margin-top: 2px; margin-bottom: 2px; float: left; }
.changepassbuttonwrap { margin-top: 4px; text-align: left;}
input.changepassword { width: 100%; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; }


/* VOLUNTEER FORM */

.volunteer-left { float: left; width: 400px; }
.volunteer-right { float: right; width: 400px; }
.volunteer-field { width: 80%; position:relative; margin-top: 2px; margin-bottom: 2px; float: left; }


.volunteer-city { width: 40%; position:relative; margin-top: 2px; margin-bottom: 2px; margin-right: 20px; float: left; }
.volunteer-state { width: 10%; position:relative; margin-top: 2px; margin-bottom: 2px; margin-right: 20px; float: left; }
.volunteer-zip { width: 19%; position:relative; margin-top: 2px; margin-bottom: 2px; float: left; }

.volunteer-superphone { width: 30%; position:relative; margin-top: 2px; margin-bottom: 2px; margin-right: 20px; float: left; }
.volunteer-superemail { width: 44%; position:relative; margin-top: 2px; margin-bottom: 2px; float: left; }

input.volunteer { width: 100%; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; }
textarea.volunteer-description { width: 100%; height: 75px; font: 0.9em Helvetica, sans-serif; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; resize: none; }
input.volunteer { width: 100%; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; }



/* TIMECARD FORM */

.timecard-date { padding: 0px; border-spacing: 0px; margin-top: 10px; margin-bottom: 10px; }
.timecard-date td{ width: 100px; font: 0.8em Helvetica, sans-serif; font-weight: 700; }
input.timecard-datefield { width: 80%; font: Helvetica, sans-serif; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; }
.timecard-options { font: 0.8em Helvetica, sans-serif; line-height: 1em; }

.timecard-comments {width: 100% }
.timecard-comments p{ font: 0.8em Helvetica, sans-serif; }
textarea.timecard-commentsbox { width: 80%; height: 80px; font: 0.8em Helvetica, sans-serif; border-radius: 3px; -webkit-border-radius: 3px; outline: none; display: inline-block; border: 1px solid #CCC; padding: 5px; resize: none; }

/* don't apply directly to select or IE 8 will have a spasm. http://stackoverflow.com/a/13185577 */
select.timecard-performance option { font: 1.2em Helvetica, sans-serif; }


/* SUBMITTED CARD TABLE */

.submitted-timecards { padding: 0px; width: 100%; border-spacing: 0px; padding-top: 5px; padding-bottom: 5px; font-size: 0.8em; }
.submitted-timecards th{ text-align: left; font-weight: bold; padding-top: 5px; padding-bottom: 15px; }
.submitted-timecards td{ padding-top: 6px; padding-bottom: 6px; }
.submitted-row1 { background: #e8e8e8; }
.submitted-row2 { }
.submitted-date { width: 125px; }
.submitted-company { width: 300px; }
.submitted-hours { width: 75px; }
.submitted-approved { width: 75px; }
.submitted-pay { width: 75px; }
.submitted-makeup { width: 75px; }
.submitted-edit { width: 50px; }

.submitted-edit-icon a{ display: block; background: url('images/submit-edit.png') no-repeat; height: 18px; width: 18px; }
.submitted-edit-icon a:hover{ background-position: 0px -19px; }


/* SUPERVISOR DASHBOARD */

.supervisor-student { width: 200px; }
.supervisor-date { width: 125px; }
.supervisor-hours { width: 75px; }
.supervisor-action { width: 75px; }
.supervisor-approve { width: 50px; }

.supervisor-create-student { width: 200px; }
.supervisor-create-workday { width: 125px; }
.supervisor-create-supervisor { width: 375px; }
.supervisor-create-timecard { width: 100px; }

.supervisor-view-icon { float: left; margin-right: 5px; }
.supervisor-view-icon a{ display: block; background: url('images/view.png') no-repeat; height: 18px; width: 18px; }
.supervisor-view-icon a:hover{ background-position: 0px -19px; }

.supervisor-delete-icon { float: left }
.supervisor-delete-icon a{ display: block; background: url('images/trash.png') no-repeat; height: 18px; width: 18px; }
.supervisor-delete-icon a:hover{ background-position: 0px -19px; }

.supervisor-newcard-icon a{ display: block; background: url('images/newtimecard.png') no-repeat; height: 18px; width: 18px; }
.supervisor-newcard-icon a:hover{ background-position: 0px -19px; }

.supervisor-viewapproved { float: left; }
.supervisor-submitwithoutapproval { float: right; }


/* GLOBAL FORMS */

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 0.75em Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #e9e9e9;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}


/* ERROR MESSAGES */

.errorlist { color: #FF0000; list-style-type: none; display: inline; letter-spacing: -1px; font-size: 1em; line-height: 1.2em; font-weight: 400; }


/* FOOTER */

.footer { border-top: 1px solid #CCCCCC; padding-top: 15px; font-weight: 400; font-size: 0.8em; letter-spacing: -1px; line-height: 1.2em; }


/* message area */
.message_area {
    text-align: center;
}
