html{height:100%;min-height:100%;-webkit-text-size-adjust:none}
abbr,article,aside,details,figure,footer,header,hgroup,main,mark,menu,nav,output,progress,section,time {display:block}
html,body,ul,li,p,blockquote,h1,h2,h3,h4,h5,form,fieldset,legend,div,span,img, button{border:0;margin:0;padding:0;font-family: helvetica, arial, tahoma; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust:none; list-style: none;}
body { background: #e8e8e8 url('../images/bg-2.png'); padding-bottom: 40px; font-size: 14px;body {
  overflow: auto; /* Hide scrollbars */
} }

main { overflow: hidden; width: 960px; border-radius: 2px; overflow:hidden; position: relative; margin: 14px auto; background: #FFF; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),0 3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 2px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2); -ms-box-shadow: 0 0 2px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2); -o-box-shadow: 0 0 2px rgba(0,0,0,0.3),0 3px 5px rgba(0,0,0,0.2); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),0 3px 5px rgba(0, 0, 0, 0.2); }
footer { width: 960px; margin: 14px auto; text-align: right;  }
footer a { font-weight: 700; color: #4A9ABD; text-decoration: none; }
h1 { font-size: 22px; margin: 2px 0 6px 0; color: #000; }
h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px 0; }
h2 span { color: #4A9ABD; }
h3 { font-size: 16px; clear: both; margin: 10px 0; }
h4 { font-size: 14px; }
p { font-size: 14px; line-height: 20px;}
a { font-size: 14px; text-decoration: none; border-bottom: 2px solid #fff; } 
label { font-size: 12px; } 
.printable { display: none; }

article { position: relative; width: 660px; padding: 20px; }
article p { color: #666; }
article p.intro { line-height: 22px; }
article .profile { width: 130px; height: 160px; float: left; margin: 0 20px 20px 0; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 3px rgba(0,0,0,0.15); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); border: 6px solid #fff; }
article strong { color: #000; }
article h3:after { border-top-color: #eee; }

aside { width: 220px; background: #4a9abd; color: #fff; padding: 20px; position: absolute; top: 0; bottom: 0; right: 0;}
aside:hover h3:before,
aside:hover h3:after { display: block;}
aside h3 { border-bottom: 1px solid #fff; padding-bottom: 4px; }
aside h4 { margin-bottom: 5px; color: #222; }
aside ul {display: block; overflow: hidden; margin-bottom: 20px; }
aside li { height: 20px; line-height: 20px; font-size: 14px; margin-bottom: 2px; }
aside a { color: #fff; }
aside p { padding-bottom: 20px; }

.contact-info { overflow: auto; clear: both; margin: 10px 0 16px 0;  padding-bottom: 10px;  border-bottom: 1px solid #E7E7E7; line-height: 27px; font-size: 12px; color: #888; }
.contact-info strong { color: #888; padding-right: 2px; }
.contact-info span { padding-right: 10px;  }
.contact-info span a { font-size: 12px; color: #888; text-decoration: underline;}

.button { float: right; font-size: 12px; font-weight: bold;  display: inline-block; line-height: 26px; height: 26px; padding: 0 12px; background: #4ABD6D; border: 1px solid #4ABD6D; color: #fff; border-radius: 2px;  cursor: pointer; outline: none; text-align: center; text-decoration: none; }
.button:hover { -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
.button:active { box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.5) inset !important; } 

.link-list { margin-bottom: 40px; }
.link-list li { list-style: initial !important; display: list-item; margin: 0 0 30px 20px !important; list-style-type: disc; line-height: 20px; }

.timeline { position: relative; padding-left: 100px; margin-top: 14px; z-index: 1; }
.timeline:before { background: #f3f3f3; bottom: 0; content: ''; left: 55px; margin-left: -8px; position: absolute; top: 0; width: 4px; z-index: -1; }
.timeline .event { position: relative; background: #f3f3f3; margin: 0 0 26px;  border-bottom: solid 4px #eee; padding: 12px 16px;}
.timeline .event:before { position: absolute; top: 8px; left: -10px; content: ''; height: 0; width: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #f3f3f3; }
.timeline .event:after { position: absolute; bottom: 4px; left: -14px; content: ''; height: 0; width: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left:10px solid #f3f3f3; }
.timeline h4 { position: relative; margin: 0 0 16px 0; }
.timeline h5 { margin: 0 0 4px 0; }
.timeline .period { position: absolute; width: 86px; top: 0; left: -100px; bottom:-5px; text-align: center; font-size: 12px; }
.timeline .period span { display: block; line-height: 26px; background: #fff; }
.timeline .period .from { border-radius: 10px; border: 5px solid #f3f3f3; }
.timeline .period .duration { line-height: 16px; position: absolute; top: 50%; margin-top: -12px; right: 0; left: 0; color: #ccc; padding: 4px 0; }
.timeline .period .to { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 10px; border: 5px solid #f3f3f3; }
.timeline ul, .timeline p { margin: 0 0 12px 0; } 
.timeline li { line-height: 20px; display: list-item; margin: 0 0 20px 20px; list-style-type: disc; }
.timeline .company { position: relative; color: #888; font-weight: 400; float: right; }
.company[data-location]:after { display: block; position: absolute; top: 20px; right: 0; left: auto; line-height: 16px; content: attr(data-location)!important; font-size: 12px; text-align: right; width: 360px; }


.tech-used { text-align: right; color: #666; font-size: 12px; font-weight: 700; }

#toTop { position:fixed; background: #777; border: 0; bottom: 80px; right: -50px; overflow:hidden;width:50px;height:44px;text-indent:-9999px;z-index:10; cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;cursor:pointer; -webkit-transition: right .1s ease-out .1s; transition: right .1s ease-out .1s; }
#toTop:after { content: ''; position: absolute; top: 16px; left: 16px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; cursor:pointer;}
#toTop.show { right: -2px; !important; }

.ie7 .contact-info { position: relative; }
.ie7 aside:hover h3:before,
.ie7 aside:hover h3:after { margin-bottom: 20px; }
.ie7 .timeline .company { position: static !important; padding-left: 10px; float: none;}

.ie8 aside:hover h3:before,
.ie8 aside:hover h3:after { margin-bottom: 20px; }

@media print {
	.page-break { page-break-before: always; page-break-inside:avoid; }
	#achievements { padding-top: 140px; }

	body { background: #fff; padding-bottom: 0 !important; }
	main { margin: 0 auto; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
	aside { background: #333; }
	aside h4 { color: #ccc; }
	h2 span { color: #666 !important; }

	.profile { outline: 1px solid #CCC; }
	.contact-info span a { text-decoration: none; }

	/* remove interactive elements */
	#toTop,
	.button { display: none; }
	
	footer { text-align: center; }
	.printable { display: inline; }

	/* change time line colours to ensure its visible when printed */
	.timeline:before { background: #eee !important; }
	.timeline event { background: #eee !important; border-bottom-color: #cecece !important; }
	.timeline h4:after { border-right-color: #eee; }
	
	/* convert font sizes to points */
	body, a, p { font-size: 11pt; }
	h1 { font-size: 18pt; }
	h2 { font-size: 13pt; }
	h3 { font-size: 14pt; }
	h4 { font-size: 12pt; }
	h5 { font-size: 11pt; }
	.timeline h4:before { font-size: 8pt !important; }
	
	/*a { border: 0;}*/
}

@media only screen and (max-width: 1000px) and (min-width: 700px) {

	h2 { font-size: 16px; }
	.profile { display: none; }
	article .contact { top: 200px; }
	article p { margin-bottom: 20px; }
	main, footer { width: 700px; }
	article { width: 420px; }
	aside { width: 200px; }
}



@media	only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
		only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
		only screen and (max-device-width: 480px) and (orientation: portrait),
		only screen and (max-device-width: 480px) and (orientation: landscape),
		only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
		only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  
	aside:hover h3:before,
	aside:hover h3:after { display: none !important; }
}


@media only screen and (max-device-width: 480px) and (orientation: landscape){

	h2 { font-size: 16px; }
	.profile, .timeline:before, .timeline h4:before , .timeline h4:after { display: none; }
	.timeline { padding: 0; }
	.timeline .company { display: block; float: none; }
	article .contact { top: 278px; }
	article p { margin-bottom: 20px; }
	main { width: 480px; }
	footer, article, aside { width: 440px; }
	article h3 { text-indent: -44px; overflow: hidden; }

	aside { position: static !important; }

	.event h4 { margin-bottom: 4px; }
	.timeline .period { position: static !important; border: 0 !important; background: transparent; width: auto; border-radius: 0; text-align: left; margin-bottom: 6px;}	
	.timeline .period .from, .timeline .period .to { display:none; }
	.timeline .period .duration:before { content: "Duration: "; padding-right: 4px; }
	.timeline .period .duration { margin: 0 !important; top: 8px; right: 14px; width: auto; background: transparent; text-align: right;  }
	
	.timeline .event:before,
	.timeline .event:after,
	.company[data-location]:after,
	aside:hover h3:before,
	aside:hover h3:after ,
	#toTop { display: none !important; }

}

@media only screen and (max-device-width: 480px) and (orientation: portrait) {
		
	h2 { font-size: 16px; }
	.profile, .timeline:before, .timeline h4:before , .timeline h4:after { display: none; }
	.timeline { padding: 0; }
	.timeline .company { display: block; float: none; }
	article .contact { top: 278px; }
	article p { margin-bottom: 20px; }
	main { width: 300px; }
	footer, article, aside { width: 260px; }
	article h3 { text-indent: -44px; overflow: hidden; }

	aside { position: static !important; }

	.event h4 { margin-bottom: 4px; }
	.timeline .period { position: static !important; border: 0 !important; background: transparent; width: auto; border-radius: 0; text-align: left; margin-bottom: 6px;}
	.timeline .period .from, .timeline .period .to { display:none; }
	.timeline .period .duration { margin: 0 !important; top: 8px; right: 14px; width: auto; background: transparent; text-align: right;  }
	
	.timeline .event:before,
	.timeline .event:after,
	.company[data-location]:after,
	aside:hover h3:before,
	aside:hover h3:after ,
	#toTop { display: none !important; }
}