/* 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 of selectors */
.all {

}
.title {

}
.nav {
	width: 19%;
	height: 85px;
	float: left;

}
/* Meant to override the linking from the default page if required. It'll likely stay this default no text-decoration mode for now, but just in case. */
.navLink1 {
	width: 65%;
	height: 36pt;
	float: left;

}

.navLink2 {
	width: 20%;
	height: 36pt;
	float: left;

}

.main {	
	width: 1500px;
	height: 900px;
	float: left;
	clear: both;

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

}
.celluar {
	width: 65%;
	height: 14pt;
	float: left;

}
.email {
	width: 20%;
	height: 14pt;
	float: left;

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

}

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

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

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

}
.leftBottom {
	/* Add background-image here	*/
	background-image: url('driftOfA4.gif');
	background-repeat: no-repeat;	/* This image shouldn't repeat at all, anywhere.
 					Just in this one specific place, once. */
	background-position: bottom left; 
	width: 5px;
	height: 18pt;
	float: left;
	clear: both;
	
}
.rightBottom {
	background-color: #000000;
 	/* Keep this colour */
	width: 5px;
	height: 46pt;

}

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

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

}
/* Refers to each of the blocks of proficient data; 
may or may not be refering to the same data, as the 
resume demands, but allows for the same format. */
.programming {
	float: left;
	clear: both;
	width: 23%;
	height: 160px;
	margin: 20px 5px 10px 0px;

}
.web {
	float: left;
	width: 23%;
	height: 160px;
	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;

}
/* Prepares the opening data for usually the resume */
.preparation {
	width: 100%;
	float: left;
	clear: both;

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

}
/*This is to pad between the two prologue pieces */
.padded {
	width: 6%;
	height: 50px;

}
.second {
	width: 30%;

}
.profile {
	margin: 5px 0px 5px 0px;
	float: left;
	clear: both;
	width: 100%;
	height: 450px;

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

}
.work {
	margin: 5px 0px 5px 0px;
	width: 100%;
	height: 800px;
	float: left;
	clear: both;

}
.education {
	width: 100%;
	height: 125px;
	float: left;
	clear: both;
	margin: 5px 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 {
/* At the moment, empty - there's no need to distingush 
between summary and indepth data - may change, hence the class */
}
.subject {
	margin: 5px 5px 20px 5px;
	width: 100%;
	float: left;
	clear: both;

}
.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;

}
/* For indented data that is also using the label information - this way, everything indents a bit;
 also allows for indentation of information on the right. */
.indented {
	width: 71.65%;

}
/*Remove or add summaries as prefered */
.sum {
	display: none;
	visibility: hidden;

}
/* These two are about bolding - used in spans that need bolding, and two sizes, to indicate hierarchy */
.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;

}
.printExtension{
	width: 0px;
	height: 0px;
	display: none;
	visibility: hidden;
	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. */
}

/* 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;
	}