/* My additional styling on top of Zen Garden 220 Garments */
html {background-color:#e8ecf0;}
html,body {min-height:98%;}
body {
	background-position:10% 80%;
	padding:1em;
	color: #222; /* for accessibility */
}

a, a:visited {
	color: #170F61;/* for accessibility */
	text-decoration: underline;
}
a:hover {
	text-decoration: dashed;
}

.hide {
	display: none;
}

h1 {
    text-shadow: 3px 3px 4px #999;
	text-transform:none;
}
.desktopOnly {display:none;}
@media screen and (min-width: 780px) {
	h1 {
		padding-left:460px;
		text-align:left;
		text-shadow: 2px 2px 2px #999;
	}
	.desktopOnly {display:block;}
	span.desktopOnly {display:inline-block;}
}

h3 {font-size:1.5em}

.details ul {
	background:#fff;
	border-bottom:1px solid #999;
	border-radius:8px;
	margin:.5em 0 2em 0;
	padding:.1em 0;
}
.details ul li:before {
	background: url(i/tick.gif) no-repeat 6px 3px;
	content: " ";
	display:inline-block;
	height: 18px;
	vertical-align:-10%;
	width: 30px;
}
.details li {
	border-bottom:1px solid #999;
	padding:.3em;
}
.details li:last-child {
	border-bottom:0;
}

.details>ul>li.subList {
	padding-bottom: 0;
}
.details>ul>li.subList span{
	text-decoration-line: underline;
}
.details ul li.subList:before {
	background-image:none;
	width:0;
}

.details>ul>li.subList>ul.subListCollection {
	margin-top: 0;
	margin-bottom:.25em;
	padding-left:1em;
	border-bottom:0;
}



ul:empty,li:empty {display:none}

header, noscript {
	background: url(i/eyes.gif) no-repeat center top;
	background-size:cover;
	border-radius:8px;
	margin:0 auto;
	max-width:100em;
	position:relative;
	text-align:center;
}
header p {
	background:rgba(90, 90, 90, .5);
	font-weight:bold;
	text-shadow: 1px 1px 1px #ccc;
}
header a {
	display:block;
	left:5px;
	position:absolute;
	top:40px;
}
header a img {
	width:3em;
}
noscript h1, noscript h2, noscript p {
	text-align:center;
	padding:0;
}
@media screen and (min-width: 780px) {
	header, noscript {
		background: url(i/eyes.gif) no-repeat left 0;
		background-size: auto;
	}
	header p {
		background:none;
		color: #333;
		padding-left:460px;
		text-align:left;
		text-shadow: 1px 1px #ccc;
	}
	header a { 
		left:5px;
		top:5px;
	}
}


	
.container {
	border:1px solid #999;
	border-radius:8px;
	margin:0 auto;
	max-width:100em;
	min-height:400px;
	/*overflow:auto;*/
	overflow:hidden; /* to stop the vertical scroll sometimes appearing as I scroll down*/
	/*background-color: #fff; /* for accessibility */
}
.nonBootstrap .container {
	margin:0 auto;
	max-width:100em;
}

.col {
	max-width:60em;
	padding:.5em .75em 0;
}
.nonBootstrap .col {
	/*max-width:60em;*/
	padding:.5em .75em 0;
}

@media screen and (min-width: 780px) {
	.col {
		float:left;
		max-width:48%;
	}
	.contract {
		float:right;
	}
	.nonBootstrap .col {
		float:left;
		/*max-width:48%;*/
	}
}

.details h2.tech:after {
	background: url(i/spanner.gif) no-repeat 0 0;
	content: " ";
	display:inline-block;
	height:20px;
	width:39px;
}

.wordDoc:before {
	background: url(../../mul_images/icons/word.gif) no-repeat 0 0;
	content: " ";
	display:inline-block;
	height: 16px;
    width:21px;
}

.contract>div {
	background:#C3DDDE;
	/*background-color: #fff; /* for accessibility */
	border:1px solid #999;
	border-radius:8px;
	margin:0 0 1em;
	overflow:hidden;
	padding:.5em;
}
.contract>div:nth-child(2n+1) {
	background-color:#E8ECF0;
	background-image: url(i/denim2.png);
	background-position:50% center;
	/*background: #fff; /* for accessibility */
}
.contract h3 {font-weight:normal;}
.contract img {
    background-color: #ccc;
	border-right: 2px solid #999;
    border-bottom: 2px solid #999;
	float: left;
	height:auto;
    margin: 5px 5px 1px 0;
	max-width:50%;
}
.contract img[src$=".svg"] { /* fudge needed for some IE browsers not able to scale SVG files properly */
	background-color:#930; /* Random colour that I liked for the background of Barton Willmore logo */
	width: 100%; 
}
.svg img.purpleSynergix{background-color:#4c3664; padding:3px;} /* Synergix purple colour */
.svg img.greyGuardian {background-color:rgb(233,239,241); padding:5px;} /* Grey for Guardian */
.svg img.blueCamelot {background-color:#479CFD; padding:5px;} /* Blue for Camelot */
.svg img.blackMO {background-color:#000; padding:5px;} /* Black for Main Objective */

.contractLink {
	margin:0;
	display: block; /* to counter the hide class */
}


/* Tabular page styling */
.tabular {
	border:0;
	max-width:none;
	overflow:visible;
}
.tabular button,
.tabular input,
.tabular select {
	margin:0 1em 1em 0;
	padding:0 .25em;
}
.tabular select,
.tabular input {
	padding:.25em;
}
.form-control {
	padding:.25em;
}
.tabular a:hover {
	cursor:pointer;
}
.tabular table {
	font-size:12px;
	/*width:100%;*/
}
.tabular table p {
	font-size:12px;
}
.tabular th, .tabular td {
	border:1px solid #aaa;
	padding:.25em;
}

.imgCol {
	text-align:center;
}
.imgCol img {
	background-color: #999;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
	display:inline-block;
	margin:0;
	max-width:3em;
}
.imgCol, .dateCol, .roleCol {
	/*max-width:75px;*/
	max-width:20%;
	overflow:hidden;
}

/*@media screen and (min-width: 40.5em) {*/
@media screen and (min-width: 780px) {
	.tabular {
		border: 1px solid #999;
		padding:1em;
	}
	.tabular th, .tabular td {
		padding:.5em;
	}
	.imgCol {
		max-width:none;
		min-width:229px;
		padding: 0.25em .5em;
	}
	.imgCol img {
		max-width:10em;
	}
	.dateCol {
		min-width:11em;
	}
	.tabular table {
		font-size:16px;
	}
	.tabular table p {
		font-size:16px;
	}
}

/* styling for work-map.html */
.workMap {padding:1em}
#map {
	padding:0;
	margin-bottom:15px;
	width:800px;
	min-height:600px;
	position:relative;
}
#map_canvas {
	width:800px; 
	height:600px;
	border:1px solid #999;
}
.workMap p {text-align:left;}
.workMap .legend {
	display:inline; 
	margin-bottom:0;
	vertical-align:-20%;
}


/* Tests page */
.testsPage .container h1 {
	padding-left:0;
	text-align:center;
}
.testsPage article p {
	padding-left:.5em;
}
.testsPage .col {
	min-width:38em;
}

/* Animation scrolling styling */
.item {
    width: 237px;
    min-height: 200px;
    text-align: center;
    color: #FFF;
    font-size: 3em;
}
.item--secondary {
    /*position: fixed;*/
	position:absolute;
    top: 1074px;
    margin: auto;
    left: 0px;
	padding-left:10px;
    display:none;
}
.item--secondary a {
	display:block;
	height:200px;
	background-image: url(../../mul_images/misc/misc_front_sleeve_netscape.jpg);
	background-repeat:no-repeat;
	background-size:contain;
}
.item--secondary a:after {
	display:none;
}
.item--secondary a.carousel {
	background-image: url(../../mul_images/carousel-screenshot.png);
}
.item--secondary a.map {
	background-image: url(../../mul_images/work-google-map-v2.gif);
}
@media screen and (min-width: 1500px) {
	.item--secondary {
		display:block;
	}
}


/* Table Arrows & A>Z code*/
.arrow-up {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid black;
	display: inline-block;
}

.arrow-down {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid black;
	display: inline-block;
}

.a2z, .z2a {
	display: inline-block;
	width:2em;
	height:1em;
}
.a2z:before {
	content:"A>Z";
}
.z2a:before {
	content:"Z>A";
}