/*Selectors and psuedo-classes*/

@font-face {   
   font-family: "Akzidenz Grotesk CE Roman";   
   src: url(fonts/AkzidenzGroteskCERomanBold.eot); 
   src: local("Akzidenz Grotesk CE Roman Bold"), url(fonts/AkzidenzGroteskCERomanBold.ttf) format("truetype");    
}


@font-face {   
   font-family: "Akzidenz Grotesk CE Light";   
   src: url(fonts/AkzidenzGroteskCELight.eot); 
   src: local("Akzidenz Grotesk CE Light"), url(fonts/AkzidenzGroteskCELight.ttf) format("truetype");    
}  


body {
	font-family: "Akzidenz Grotesk CE Light";
	font-size: 12pt;
}
div {
}
h1 {
	font-family: "Akzidenz Grotesk CE Roman";
	font-size:  20pt;
	width: 100%;
	height: 22pt;
	float: left;	

}
h2 {
	font-family: "Akzidenz Grotesk CE Roman";
	font-size:  16pt;

}
h3 {
	font-family: "Akzidenz Grotesk CE Roman";
	font-size:  12pt;

}
label {
	width: 64%;
	float: left;

}
legend {

}
a {
	color: #448888;	
	margin: 0px 5px 0px 0px;

}
a:link {
	text-decoration: none;

}
a:visited {
	text-decoration: none;

}
a:hover {
	text-decoration: none;

}
a:active {

}
/*End selectors */

.all {

}
.title {

}

.infoContainment {
	width: 40.00%;
	padding: 30px 30px 0px 20px;
	height: 26pt;
	float: left;
}	

.celluar {
	width: 60%;
	height: 14pt;
	float: left;
	clear:both;
}
.email {
	width: 35%;
	height: 13pt;
	float: left;
}

.mainName {
	width: 75.5%;
	height: 22pt;
	float: left;

}

.nav {

}
.name {
	width: 100%;
	height: 18pt;
	float: left;
	clear: both;

}

.profileHeader{
	width: 100%;
	float: left;
	clear: both;
}

.trail {
	float: left;
	width: 10px;
	height: 21pt;
}

.leftTop{
	background-color: #000000;
	width: 5px;
	height: 85px;
	float: left;
	clear: both;

}

.leftBottom {
	/*
	For printing, we just get rid of the image that lets the A character trail.
	It causes problems when printing.
	We still print this because the float:left; clear:both;
	allows for the information to tuck underneath the main header displaying my name.

	*/
	
	width: 5px;
	height: 18pt;
	float: left;
	clear: both;
	
}

.rightBottom {
	background-color: #000000; /* Keep this colour*/
	width: 4px;
	height: 46pt;
}

.main {	
	width: 1000px;
	height: 2630px;
	float: left;
	clear: both;
	margin: 0px;
	
	

}
.info {
	margin: 5px 0px 5px 0px;
	width: 100%;
	/*height: 150px;*/
	float: left;
	clear: both;

}
.important {
	/*background-color: #CCCCCC;*/
	width: 87%;
	height: 125px;
	float: left;
	clear: none;
}

.programming {
	float: left;
	clear: both;
	width: 23%;
	height: 180px;
	margin: 20px 5px 10px 0px;

}
.web {
	float: left;
	width: 23%;
	height: 180px;
	margin: 20px 5px 10px 0px;
}

.misc {
	float: left;
	width: 23%;
	height: 180px;
	margin: 20px 5px 10px 0px;

}
.adobe {
	float: left;
	width: 23%;
	height: 180px;
	margin: 20px 0px 10px 0px;

}
.preparation {
	width: 100%;
	float: left;
	clear: both;

}



.prologue {
	width: 53%;
	float:left;
}

.padded {
	width: 6%;
	height: 50px;
}

.second {
	width: 30%;
}


/*
.profile {
	margin: 5px 0px 5px 0px;
	float: left;
	clear: both;
	width: 100%;
	height: 475px;
}
*/
.profile {
	margin: -25px 0px 5px 0px;
	float: left;
	clear: both;
	width: 100%;
	/* 550px height */
	height: 540px; /* Updated for extra spacing */
}

.academic {
	height: 600px;
	float: left;
	clear: both;
}

.external{
	height: 550px;
	float: left;
	clear: both;
}

.work {
	margin: 7px 0px 5px 0px;
	width: 100%;
	height: 540px;
	float: left;
	clear: both;
}
.education {
	width: 100%;
	height: 150px;
	float: left;
	clear:both;
	margin: 7px 0px 5px 0px;

}

.awards {
	width: 100%;
	height: 125px;
	float:left;
	clear: both;
	
}
.languages {
	margin: 5px 0px 5px 0px;
	width: 100%;
	float: left;
	clear: both;

}
.references {
	width: 100%;
	float: left;
	clear: both;
	margin: 20px;

}
.pointOfInterest {
	width: 100%;
	height: 125px;
	float: left;
	clear: both;

}
.indepth {

}

.subject {
	margin: 0px 5px 14px 5px;
	width: 100%;
	float: left;
	clear: both;

}
.school {
	margin: 0px 0px 0px -5px;
	width: 100%;
	float: left;
	clear: both;

}

.school .data h4 {
	margin-top: 5px;
}

.detail {
	margin: 0px 0px 0px 0px;
	width: 100%;
	float: left;
	clear: both;

}
.data {
	padding: 0% 9% 0% 0%;
	width: 90%;
	float: left;

}

/* <br /> tag in essence*/
.break {
	width: 1%;
	height: 12pt;
	float: left;
	clear: both;

}



/*
Remove or add summaries as prefered 
- At least, the idea was that I could toggle summaries via javascript with this.
- Probably not going to implement this any time soon.
- More likely to used ids for each summary.
- Might also update the summaries and use them in lieu of detailed information on mobile.
- In other words, a work in progress.
*/

.sum {
	display: none;
	visibility: hidden;
}

.bolda {
	width: 64%;
	height: 16pt;
	font-family: "Akzidenz Grotesk CE Roman";
	float: left;
	clear: both;
	
}

.boldasmall {
	width: 64%;
	height: 10pt;
	font-family: "Akzidenz Grotesk CE Roman";
	float: left;
	clear: both;
}

/* 
	For making sure that we can get the same width range as the bolded text, but just as if it is indented text. 
	Involves slightly different styling than .indented.
*/
.boldaIndentation{
	width: 63%;
	padding-left: 1%;
	float: left;
	clear: both;
}

.indented {
	width: 71.65%;
}

/* Some stuff, specifically for the Education stuff with a multiple courses, seem to be off-align when normally indented.
Even when using the above width details.
So, a slight adjustment to make the dates align as otherwise.
 */

.uniqueIndent{
	width: 64.59%;
	/*width: 70.35%;*/

}

.bolda, .boldasmall, .indented, .uniqueIndent{
	display: inline-block;

}


.printExtension{
	width: 1px;
	height: 30px;
	float: left;
	clear: both;
}
.noPrint {
/* Indicates when not to print an object, such as a navigation bar. 
Why would this be needed? If there's no affordance for navigation 
linking, there's no need for it to take up space on the page. */
	display: none;
	visibility: hidden;
}

.noWeb {
/* Indicates when to print an object, such as a username descriptor. 
Why would this be needed? If there's a link to the profile page, it's redundant
But it is useful when printing and not, so...we keep it for then. */
}

/*
This is just for personal testing - to check for an end item in the page that's keeping it from being a "Two Page Resume"
That might need modification for later resumes, so it's a reference point for testing.
 */
.end_test{
    float: left;
	bottom: 10px;
    clear: both;
}

/* Okay, here we'll need more specific selectors */

/* These ones were just about if I needed to make more space in the second page of the resume - if I took one item out, I had plenty of extra space */

/*
.external.info > .name {
	margin-block-end: -10px;
}
.work.info > .name {
	margin-block-end: -5px;
}
*/

/*
Cool - so when printing to PDF on a mobile phone, of a smaller size, 
we...need to do additional adjustments to make Chrome on Android, 
at least, abide by what what would work on Desktop/Laptop computer.
*/

@media print and (max-width: 995px){
	/* Okay, this is a slight fix to where the alignment appears to break when widths get smaller, so we'll want to remove the br tags.
		They're kept in instead of using only the web browser alignment, since this allows avoiding widows.
	*/
	br {
		display: none;
	}
	/*
	.profile {
		height: 573px;

	}*/
	
	/* Negative margin here allows us to psuedo-creep up into the header above it - the margin-bottom of a header can create "Too much" space on mobile devices.
	   See: .academic .name h2 selector for an example of where this was relevant.
	
	*/
	.subject {
		margin: -4px 5px 14px 5px;
	}
	.school {
		margin: 20px 0px -30px 0px;
	}
	
	
	
	.academic {
		height: 600px;
	}
	
	/** **/
	.name h2{
		margin-top: 1.9em;
		/* Was basing these values based on what Chrome on Desktop reported for headers, 
		   but they didn't seem to work to be overriden - or at least well enough, even using 'em's 
		*/
		/*margin-block-start: 0px;
		margin-block-end: 10px;*/
	}
	
	
	.education {
		height: 150px;
		margin: -15px 0px 5px 0px;

	}
	
	.noMobile {
		/* For smaller pages, because we're not using the dedicated mobile page, we may want to use this.
		*/
		display: none;
		visibility: hidden;
	}
}