canvas {
    display: block;
	height: 310px; /* sets card to appear the same size as in an iPhone 6 */
}
body{
	font-family: Raleway, Tahoma, Geneva, sans-serif;
	font-size: 18px;
	color:#222222;
	background:white;
	width:100%;
	height:100%;
	margin:0px;
}
table#cardholder {
	overflow:auto;
	background-color:white;
	width: 100%; 
	height:310px;
}
#competencies dl.credentials {
	padding:0px;
	margin:0;
	width:100%;
	overflow: scroll;
	height:100%;
}
#competencies dl.credentials dt:first-of-type, .credentials dd:first-of-type {
	font-weight:bold;
}
#competencies dl.credentials dt {
	float:left;
	width:75%;
}
#competencies dl.credentials dd {
	float:left;
	text-align:right;
	width:15%; 
}

dt, dd  {
	margin:0px;
	padding:10px 4px;
}
dt.comment {
	font-size: 14px;
	padding-top:0px;
}
dt.highlighted {
	color:blue;
}
dt span, dd span {
	text-decoration: underline;
	cursor: pointer;
}

.back .component{
	width:150px;
	height:150px;
	margin:4px;
	padding:0px;
	vertical-align:center;
	text-align:center;
	font-weight:bold;
	cursor: pointer;
	vertical-align: bottom;
}
.inductions {
	background: white url('/images/inductions.png') no-repeat center;
}
.courses {
	background: white url('/images/courses.png') no-repeat center;
}
.licenses {
	background: white url('/images/licenses.png') no-repeat center;
}
.qualifications {
	background: white url('/images/qualifications.png') no-repeat center;
}
.assessments {
	background: white url('/images/assessments.png') no-repeat center;
}
.assign {
	background: white url('/images/assign.png') no-repeat center;
}

#emergency_contact {
	font-size:14px;
	text-align:center;
}

td#kpi {
	min-width:68px;
	background-color:transparent;
	font-weight:bold;
	vertical-align:bottom;
	text-align:center;
	color:transparent;
	cursor: pointer;
}
dt.kpi {
	border-left-width: 15px;
	border-left-style: solid;
	border-left-color: transparent !important; /* ensures column is padded correctly */
}
dt.kpi_green 		{ border-left-color: #29C532 !important;}
dt.kpi_amber 		{ border-left-color: #FFC030 !important;}
dt.kpi_red   		{ border-left-color: rgb(255,38,1) !important;}
dt.kpi_historical  	{ border-left-color: lightgray !important;}
td#kpi.kpi_red 		{ color:white; border:none; background-color:  rgb(255,38,1);}
td#kpi.kpi_amber 	{ color:white; border:none; background-color:  #FFC030;}
td#kpi.kpi_green 	{ color:black; border:none; background-color:  #29C532;}
td#kpi.kpi_historical  	{ color:black; border:none; background-color: lightgray;}

dd span.ui-icon { /* exclaimation alert icon for expiring credentials */
	/* because they want it red! */
	background-image: url("/jquery-ui-1.10.4.custom/css/ISNZ/images/ui-icons_F16231_256x240.png");
	height:13px;
	display:inline-block;
	margin-left:5px;
}

.expired {
	color:red;
	font-weight:bold;
}

.archived {
	color:lightgray;
}


/* landscape iPhone6 */
@media (width: 667px) and (height: 375px){
	canvas, #competencies {
		height: 380px;
	}	
	.back .component {
		width: 180px;
		height:180px;
	}
}
/* portrait iPhone6 */
@media (width: 375px) and (height: 559px){
	canvas, #competencies {
		height: 310px;
	}
	#cardholder {
		min-width:559px;
		-webkit-transform: translate(-92px, 124.5px) rotate(-90deg);
		
	}
}
/* landscape iPhone5 */
@media (width: 568px) and (height: 320px){
	canvas, #competencies {
		height: 320px;
	}
}
/* portrait iPhone5 */
@media (width: 320px) and (height: 460px){
	canvas, #competencies {
		height: 250px;
	}
	
	#cardholder {
		min-width:559px;
		-webkit-transform: translate(-119px, 124.5px) rotate(-90deg);
	}
}

/* landscape iPhone4 */
@media (width: 480px) and (height: 320px){
	canvas, #competencies {
		height: 265px;
	}
}
/* portrait iPhone4 */
@media (width: 320px) and (height: 372px){
	canvas, #competencies {
		height: 240px;
	}
	.back .component {
		width: 150px;
		height:150px;
	}
	
	#cardholder {
		min-width:559px;
		-webkit-transform: translate(-119px, 124.5px) rotate(-90deg);
	}
}

/* landscape iPad */
@media (width: 1024px) and (height: 704px){
	body {
		font-size: 24px;
	}
	#cardholder {
		min-height:704px;
	}
	canvas, #competencies {
		height: 557px;
		margin-top: 0;
	}
	td#kpi{
		min-width:150px;
		height:100%;
	}
	.back .component {
		width: 250px;
		height:250px;
	}
}