@charset "UTF-8";
/*
* comment_0.84.css
* Last updated: July 6, 2017
* ihand.ca 
* Stylesheet for teaching and projects pages (Three-column) 
*/

/* link : visited: hover: active */

/**
Subsections Menu
**/
div#sectionMenuColumn h2 {
	display:none;	
}

div#sectionMenuColumn {
	background-color:#929292;
}

div#sectionMenuColumn div.columnChild ul {
	margin:0em 0em;
	padding:0em 0em;
	position:relative;
}

div#sectionMenuColumn div.columnChild ul li{	
	margin:0 0;
	clear:right;
	/*background-image:url(../images/ui/arrowRight-32px-tonal75.gif);*/
	background-repeat:no-repeat;
	background-position:95% center;
	border-bottom:1px solid #aaa;
}
div#sectionMenuColumn li:first-child {
}

div#sectionMenuColumn li a {
	display:block;
	padding-top:1em;
	padding-bottom:1em;
	padding-left:0.5em;
	padding-right:0.5em;
	color:#ddd;
	text-decoration:none;
}



div#sectionMenuColumn li:hover {
	color:#333;
	background-color:#CCC;
}

div#sectionMenuColumn div#cases ul li {
	line-height:1;
	background-color:#eee;
	padding:1em;
}

div#sectionMenuColumn div#cases ul li.current {
	color:#000;
	background-color:#fff;
}
div#sectionMenuColumn div#cases ul li a span.id {
	color:#A9A9A9;
}
div#sectionMenuColumn div#cases ul li p {
	margin:0;
	padding:0;
}
div#sectionMenuColumn div#cases ul li.current p.caseTitleLi {
	color:#000 !important;
}
div#sectionMenuColumn div#cases ul li p a {
	margin:0;
	padding:0;
}
div#sectionMenuColumn div#cases ul li p.caseTitleLi {
	font-size:1em;
	margin-bottom:0.8em;
}
div#sectionMenuColumn div#cases ul li p.caseDescriptionLi {
	font-size:0.6em;
	margin-bottom:1.333333em; /* 1em/0.6em * 0.8em will match caseTitleLi margin in px */ 
	line-height:1.4;
}

div#sectionMenuColumn div#cases ul li p.caseKeywordsLi, div#sectionMenuColumn div#cases ul li p.caseTitleLi, div#sectionMenuColumn div#cases ul li p.caseDescriptionLi {
}

div#sectionMenuColumn div#cases ul li p.caseKeywordsLi {
	font-size:0.6em;
	margin-bottom:1.333333em;
	color:#999;
}

div#sectionMenuColumn div#cases ul li p.caseDownloadLi {
	font-size:0.6em;
	text-align:center;
}
div#sectionMenuColumn div#cases ul li p.caseDownloadLi {
	float:right;
	text-align:left;
	/*background-color:#DDD;*/
	padding-top:0em;
	
}
div#sectionMenuColumn div#cases ul li p.caseDownloadLi a {
	color:#666;
	display: block;
	padding-top:0.5em;
	padding-bottom:0.5em;
	padding-right:2em;
	padding-left:0.5em;
	margin-left:0.5em;
	background-image:url(../images/pdf/pdficon_small.png);
	background-repeat:no-repeat;
	background-position:right center;
	background-color:none;
}
div#sectionMenuColumn div#cases ul li p.caseDownloadLi a:hover {
	background-color:#FFF;
}
div#sectionMenuColumn div#cases ul li p.caseDownloadLi a img {
	padding-left:2em;
}

div.subsections h2 span {
	font-size:0.75em;
}

/*
*
*/
div#markerInfo {
	border:1px solid #CCC;
	border-left-width:1em;
	background-color:#FFF;
	font-family: "PT Sans", Arial, Helvetica, sans-serif;
	width:20em;
	padding:0.5em;
	/*box-shadow: h-shadow v-shadow blur spread color inset;*/
	box-shadow:0 0 0.5em 0em #666;
}
div#markerInfo p.caseDownloadLi {
	display:none;	
}
div#markerInfo p.caseTitleLi {
	font-size:1em;
	margin-bottom:0.8em;
}
div#markerInfo p.caseDescriptionLi {
	font-size:0.6em;
	margin-bottom:1.333333em; /* 1em/0.6em * 0.8em will match caseTitleLi margin in px */ 
	line-height:1.4;
}
div#markerInfo p.caseKeywordsLi {
	font-size:0.6em;
	margin-bottom:0em;
	color:#999;
}
/*
*
*/
div#footer p#legend {
	float:left;
	color:#333;
}
div#footer p#copyright {
	text-align:right;
}
p#legend span {
	
}
p#legend span a {
	border-radius:0.4em 0.4em;
	border:1px solid;
	padding-left:1em;
	padding-right:1em;
	color: black;
	text-decoration: none;
}

/*
* Hand Map Interface 
* Markers appearance
*/
div#handMaps {
	cursor:move;
}

/* 
* Basic
* http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */
div#handMaps a.mapMarker {
	position:absolute;
	display:block;
	width:10px;
	height:10px;
	border-radius:5px 5px;
	width:0.8em;
	height:0.8em;
	border-radius:0.4em 0.4em;
	background-color:#F00;
}
/* iPads (landscape) ----------- */
/*
See line 286 of userMain to understand why this isn't work
*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
div#handMaps a.mapMarker {
	width:0.5em;
	height:0.5em;
	border-radius:0.25em 0.25em;
}
}
/* For testing on laptop */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
div#handMaps a.mapMarker {
	width:0.5em;
	height:0.5em;
	border-radius:0.25em 0.25em;
}
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
/*@media only screen and (min-width: 481px) {
div#handMaps a.mapMarker {	

}
	
}*/

/* Desktop Layout: 769px to a max.  Inherits styles from: Mobile Layout and Tablet Layout. */

/*@media only screen and (min-width: 1025px) {
div#handMaps a.mapMarker {	
	width:0.6em;
	height:0.6em;
	border-radius:0.3em 0.3em;
}
}*/


div#handMaps a.mapMarkerL0 {
	background-color:#FDD;
	border:1px solid #F33;
}
div#handMaps a.mapMarkerL0:hover {
	background-color:#F00;
	border:1px solid #F99;
}
div#handMaps a.mapMarkerL1 {
	background-color:#F30;
}
div#handMaps a.mapMarkerL2 {
	background-color:#00F;
}

li.caseListL0,  li.caseListL1, li.caseListL2 {
	/*border-left:0.5em solid #666;
	border-left:none;*/
}

li.category_0 { /* none assigned */
	border-left:0.5em solid #DDD;
}
div#handMaps a.mapMarker.category_0 { /* none assigned */
	background-color:#DDD;
	border-color:#fff;
}
li.category_1 { /* bone */
	border-left:0.5em solid #E5D8BD;
}
div#cases ul li.category_1.current {
	border-left: 0.5em solid #E6AB2E;
	/*background-color: #E6AB2E;*/
}
div#handMaps a.mapMarker.category_1, p#legend span a.category_1 { /* bone */
	background-color:#E5D8BD;
	border-color:#E2B681;
}
div#handMaps a.mapMarker.category_1:hover {
	background-color:#E6AB2E;
	border-color:#E6AB2E;
}
div#markerInfo.category_1 { /* roll over popup for bone */
	border-left-color:#E6AB2E !important;	
}

div#handMaps a.mapMarker.category_1.markerOver {
	background-color:#E2B681;
	border-color:#fff;
}

li.category_2 { /* tendon */
	border-left:0.5em solid #DECBE4;
}
div#cases ul li.category_2.current {
	border-left: 0.5em solid #BE44E3;
	/*background-color: #BE44E3;*/
}
div#handMaps a.mapMarker.category_2, p#legend span a.category_2 { /* tendon */
	background-color:#DECBE4;
	border-color:#BD9EE5;
}
div#handMaps a.mapMarker.category_2:hover {
	background-color:#BE44E3;
	border-color:#BE44E3;
}

div#markerInfo.category_2 { /* roll over popup for tendon */
	border-left-color:#BE44E3 !important;	
}

div#handMaps a.mapMarker.category_2.markerOver {
	background-color:#BD9EE5;
	border-color:#fff;
}

li.category_3 { /* nerve */
	border-left:0.5em solid #FFFFCC;
}
div#cases ul li.category_3.current {
	border-left: 0.5em solid #E6E617;
	/*background-color: #E6E617;*/
}
div#handMaps a.mapMarker.category_3, p#legend span a.category_3 { /* nerve */
	background-color:#FFFFCC;
	border-color:#FFF599;
}
div#handMaps a.mapMarker.category_3:hover {
	background-color:#E6E617;
	border-color:#E6E617;
}

div#markerInfo.category_3 { /* roll over popup for nerve */
	border-left-color:#E6E617 !important;	
}

div#handMaps a.mapMarker.category_3.markerOver {
	background-color:#FFF599;
	border-color:#fff;
}


li.category_4 { /* vascular */
	border-left:0.5em solid #FBB4AE;
}
div#cases ul li.category_4.current {
	border-left: 0.5em solid #FA5A4B;
	/*background-color: #FA5A4B;*/
}
div#handMaps a.mapMarker.category_4, p#legend span a.category_4 { /* vascular */
	background-color:#FBB4AE;
	border-color:#F9897D;
}
div#handMaps a.mapMarker.category_4:hover { /* vascular */
	background-color:#FA5A4B;
	border-color:#FA5A4B;
}
div#markerInfo.category_4 { /* roll over popup for vascular */
	border-left-color:#FA5A4B !important;	
}
div#handMaps a.mapMarker.category_4.markerOver {
	background-color:#F9897D;
	border-color:#fff;
}
	
li.category_5 { /* skin */
	border-left:0.5em solid #FFDFB3;
}
div#cases ul li.category_5.current { /* skin */
	border-left: 0.5em solid #FFA94D;
	/*background-color: #FFA94D;*/
}
div#handMaps a.mapMarker.category_5, p#legend span a.category_5 { /* skin */
	background-color: #FFDFB3;
	border-color: #FFB54D;
}
div#handMaps a.mapMarker.category_5:hover {
	background-color: #FFA94D;
	border-color: #FFA94D;
}
div#markerInfo.category_5 { /* roll over popup for skin */
	border-left-color:#FFA94D !important;	
}
div#handMaps a.mapMarker.category_5.markerOver { /* skin */
	background-color:#FCBD7E;
	border-color:#fff;
}

li.category_6 { /* joint */
	border-left:0.5em solid #B3CDE3;
}
div#cases ul li.category_6.current {
	border-left: 0.5em solid #228CE3;
}
div#handMaps a.mapMarker.category_6, p#legend span a.category_6 { /* joint */
	background-color:#B3CDE3;
	border-color:#75B6EA;
}
div#handMaps a.mapMarker.category_6:hover {
	background-color:#228CE3;
	border-color:#228CE3;
}
div#markerInfo.category_6 { /* roll over popup for joint */
	border-left-color:#228CE3 !important;	
}
div#handMaps a.mapMarker.category_6.markerOver {
	background-color:#75B6EA;
	border-color:#fff;
}

li.category_7 { /* complex */
	border-left:0.5em solid #ccc;
}
div#cases ul li.category_7.current {
	border-left: 0.5em solid #333;
}
div#handMaps a.mapMarker.category_7, p#legend span a.category_7 { /* complex */
	background-color:#ccc;
	border-color:#EEE;
}
div#handMaps a.mapMarker.category_7:hover {
	background-color:#333;
	border-color:#EEE;
}
div#markerInfo.category_7 { /* roll over popup for joint */
	border-left-color:#333 !important;	
}