/* CSS Document */
@charset "utf-8";
@import url(boilerplate.css);
@import url(style_main.css);
@import url(style_responsive.css);

label { font-weight: bold; }
fieldset label { font-weight:normal; }
fieldset p { margin-left:.75em; }
fieldset { padding-top:0; }
fieldset > p { margin-top:.5em; }
fieldset fieldset legend, fieldset p label, label.subdued, legend.subdued, .subField legend { color:#465064; font-weight:bold; } 
fieldset p label.noBold { color:#243245; font-weight:normal; }

.subField { margin-left:12.25em; }
#simpleMain fieldset.subField, #simpleMain p.subField { max-width:52.5em; }

hr { clear:left; margin-top:.5em; margin-bottom:1.5em; }

ul.photos, ul.photos li { list-style:none; margin-left:0; padding-left:0; }
ul.photos { overflow:hidden; margin-bottom:2em; }
ul.photos li { width:30%; margin-right:2.5%; float:left; }
ul.photos li img, ul.photos li input[type="image"] { display:block; max-width:100%; } 
/* ul.photos li a { word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; } */
ul.photos p { clear:both; margin:.5em 2% 1.5em; height:6em; max-width:100%; 
              word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;
}

.profilePhoto {
    float: right;
    max-width: 50%;
}

.contact_items {
    font-weight: bold;
    color: #465064;
    padding-right:.5em;
}

h2 a:link, h2 a:visited { text-decoration:none; }
h2 a:hover, h2 a:active { text-decoration:underline; }
h2.plain { font-size:1.25em; color:#232323; }

/* Availability table styles - see .availability styles for max-width: 599px; */
.shift { text-align:left; min-width:7em; }
.Sunday, .Monday, .Tuesday, .Wednesday, .Thursday, .Friday, .Saturday { width:13%; line-height:1.8; }

table.calendar, table.availability { border-collapse:collapse; border-spacing:0; }
table.availability td, table.availability th { border:2px solid #fff; }
table.calendar th { border-bottom:2px solid #666; }
table.calendar td { border:1px solid #999; border-collapse:collapse; width:12%; padding:.5em 1%; }
table.calendar td .shift { color:#666; font-weight:bold; display:inline-block; }
/*table.calendar td .shift.cid { display:inline-block; border-top:1px dashed #999; padding-top:.2em; }*/
table.calendar td li.cid { border-top:1px dashed #999; padding-top:.2em; }

/* Styling for ASP.NET Calendar control */
table[title="Calendar"] td table { margin:0; }
table[title="Calendar"] td table td { text-align:center; padding:0; }
table[title="Calendar"] td { text-align: center; }

.dateBlock { overflow:hidden; }
.dateBlock span { float:right; padding-left:1.5em; }
.dateBlock span.holiday { color:#80379b; font-weight:bold; clear:both; float:none; padding-left:0; display:block; padding-bottom:.25em; }
.selectable span.date { font-weight:bold; font-size:1.25em; }
.unselectable span.date { font-weight:normal; }
.unselectable { background-color:#eee; }
.today { background-color:#e5f1f9; /* pale yellow:#fff8e7; outline:2px solid #999;  */}
.rideAlong { color:#007ac9; }

ul.shiftSchedule { list-style:none; margin-bottom:.5em; margin-left:0; padding-left:0; }
.shiftSchedule li { margin-bottom:1em; }
.shiftSchedule li.cidShift { border-top:1px dashed #999; padding-top:.2em; }
.shiftSchedule li.currentUser p.volunteer { background:#deedd1; /* 20% green */ border:1px solid #58a618; padding:.1em; /* margin-left:1em; */}
table.calendar td li.cid.hideCid { border-top:0; padding-top:0; margin-top:-.75em; }
.shiftSchedule li.hideCid span.shift {  position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

span.scheduleDate { display:block; font-size:1.25em; }
span.rideAlong { color:#007ac9; font-weight:bold; }
div.rideAlong { width:98%; margin-left:auto; margin-right:auto; }
div.rideAlong h2 { font-size:1em; color:#222; }
dl.rideAlong { color:#900; } 
dl.rideAlong dt { color:#900; float:left; clear:left; padding-right:1em; font-weight:bold; margin-bottom:.5em; }
dl.rideAlong dd { font-weight:normal; float:left; margin-left:0; margin-bottom:.5em; }

table.datePicker td table td { text-align:center; }

.redTest { position:absolute; top:10px; right:12px; color:#e20000; font-weight:bold; background:#fff; font-size:1.25em; }

/*  TEST STYLES ADD TO RESPONSIVE OR MAIN STYLESHEETS IF WORK HERE */


@media screen and (max-width: 1224px) {
    /* For pages with wide content, hide menu and provide toggle button to open. 
        Accomodated schedule and availability tables.  */
   body.wideContent .nav-mobile {
       font-size:1.3em;
   }
   body.wideContent #navMenu { margin-top:2.2em; }

   body.wideContent .nav {
		width:100%; max-width:100%; float:none;
		padding:0; margin:0 0 1em; 
        background:#007ac9; color:#fff; 
	}

	body.wideContent .nav-mobile {
		display:block;  
	}
	body.wideContent .nav-list {
		display:none;
	}
    body.wideContent .nav-item, body.wideContent .nav-list li {
		width:100%;
		float:none;
	}	
	body.wideContent .nav-active {
		display:block;
	}
	body.wideContent .nav-mobile-open {
		border-radius:5px/* 5px 0 0 */;
		-webkit-border-radius:5px/* 5px 0 0 */;
		-moz-border-radius:5px/* 5px 0 0 */;
		background-color:#007ac9;
	}
    body.wideContent .nav h2, body.wideContent .nav h3 { display:none; }
	body.wideContent ul.nav-list li { padding:0; margin:0; border-color:#ddd; }
	body.wideContent ul.nav-list2 { margin:0 0 0 1em; padding:0; list-style:none; }
	body.wideContent ul.nav-list li a, body.wideContent ul.nav-list li p
	 { display:block; padding:.2em .2em .2em .7em; background:#007ac9; color:#fff; text-decoration:none; }
	body.wideContent ul.nav-list li:last-child { border-bottom:none; }
	body.wideContent ul.nav-list li a:hover, body.wideContent li.nav-item a:hover, body.wideContent ul.nav-list li a.current, body.wideContent li.nav-item a.current { background:#468513/* updated for ADA: #58a618 */; color:#fff; }
	body.wideContent ul.nav-list li span { color:#fdc13b; padding-left:.2em; } 
	body.wideContent .nav input.logout[type="submit"] { background-image:none; background:#fff; display:block; width:98%; margin:0 auto; padding:.1em 0; }
}

@media screen and (max-width: 950px) {

    #banner h1 { margin-bottom:-1.25em; }

}

@media screen and (max-width: 767px) {
    body.wideContent .nav-mobile {
       font-size:1.1em;
   }
   body.wideContent #navMenu { margin-top:1.8em; }
   #banner h1 { margin-bottom:.25em; }

   .desktopOnly { display:none; }

    /* Force table to not be like table anymore, table, thead, tbody, th, , tr  */
	table.availability td, table.availability th { 
		float: left; width: 99%!important; border:none; padding-top:0; 
	}
	table.availability tr.header th { display:none; }
	table.availability .shift { width:99%; background:#fff; border-top:2px solid #999; }  
    .Sunday:before { content: "Sunday: "; font-size:.8em; display:block; font-weight:bold; color:#396fb7; }
	.Monday:before { content: "Monday: "; font-size:.8em; display:block; font-weight:bold; color:#396fb7; }
	.Tuesday:before { content: "Tuesday: "; font-size:.8em; display:block; font-weight:bold; color:#396fb7; }
    .Wednesday:before { content: "Wednesday: "; font-size:.8em; display:block; font-weight:bold; color:#396fb7; }
    .Thursday:before { content: "Thursday: "; font-size:.8em; display:block; font-weight:bold; color:#396fb7; }
    .Friday:before { content: "Friday: "; font-size:.8em; display:block; font-weight:bold; color:#396fb7; }
    .Saturday:before { content: "Saturday: "; font-size:.8em; display:block; font-weight:bold; color:#396fb7; }

    ul.nav-list li.noBullet { color:#c3d9f7; padding:.2em .2em .2em .7em; background:none; }
    ul.nav-list li.noBullet span { color:#c3d9f7; display:inline-block; white-space:nowrap; }

    /* Force table to not be like table anymore, table, thead, tbody, th, , tr  */
    table.calendar th { display:none; }
    table.calendar td { 
		float: left; width: 99%!important; border:none; padding:.5em 0; 
	}
    .unselectable { display:none; }
    table.calendar td { border-top:2px solid #999; overflow:hidden; }
    table.calendar td .shift { float:left; margin-right:1em; }
    .date:before { content: attr(title) " "; }
   
    .shiftSchedule li {
        clear: both;
    }
    .shiftSchedule li.currentUser p.volunteer { margin-left: 0; }
    .volunteer span { white-space:nowrap; }
    .volunteer { margin-bottom:0; }
    .shiftSchedule li.hideCid p.volunteer { margin-left:8.15em!important; }
}

@media screen and (max-width: 720px) {
    ul.photos li { width:47%; margin-right:2.5%; float:left; }
    .profilePhoto {
        float: none;
        max-width: 100%;
    }
    .advocates p { clear:both; }
    .subField { margin-left:0; }
    .subField label { font-weight:normal; }
}

@media screen and (max-width: 480px) {
    #banner h1 { margin-left:0; margin-right:0; padding-left:5%; padding-right:5%; }
    
    ul.photos li {
        width: auto;
        float: none;
        display: block;
    }
}

@media screen and (min-width: 1024px) {
    /*body.wide #banner, body.wide #ec_simple, body.wide #simpleMain, body.wide #appQuestions, body.wide #footerContainer {
        
    }  */

    table.availability, table.calendar { }
}