/* 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;
}
h4 {
font-family: "Akzidenz Grotesk CE Roman";
font-size: 10pt;
}
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: 1000px;
height: 2850px;
float: left;
clear: both;
}
.infoContainment {
width: 40.00%;
padding: 30px 30px 0px 20px;
height: 26pt;
float: left;
}
.celluar {
width: 60%;
height: 14pt;
float: left;
clear:both;
}
.email {
width: 32%; /* A little bit weird for when phone number is being used in here instead, it can wrap. */
height: 14pt;
float: left;
}
.mainName {
width: 75.5%;
height: 22pt;
float: left;
}
.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 {
/* 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: 3%;
height: 50px;
}
.second {
width: 30%;
}
.profile {
margin: -25px 0px 5px 0px;
float: left;
clear: both;
width: 100%;
/* 550px height */
height: 630px; /* Updated for extra spacing */
}
.academic {
/*height: 630px;*/
float: left;
clear: both;
}
.external{
/*height: 430px;*/
float: left;
clear: both;
}
.work {
margin: 5px 0px 5px 0px;
width: 100%;
height: 550px;
float: left;
clear: both;
}
.education {
width: 100%;
height: 210px;
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: 0px 5px 15px 5px;
width: 100%;
float: left;
clear: both;
}
.school {
margin: 0px 0px 15px 0px;
width: 100%;
float: left;
clear: both;
}
.imageHolder{
width: 100%;
height: 600px;
float: right;
}
embed {
width: 100%;
height: 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;
}
/*
tag in essence*/
.break {
width: 1%;
height: 12pt;
float: left;
clear: both;
}
/* education labels need a slightly differnet width
70.35%;
*/
/*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;
}
/*
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;
}
/* 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%;
}
/* 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: 70.35%;*/
width: 64.59%;
}
.bolda, .boldasmall, .indented, .uniqueIndent{
display: inline-block;
}
.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. */
}
.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. */
width: 0px;
height: 0px;
display: none;
visibility: hidden;
}
.noMobile{
/** For smaller pages, because we're not using the dedicated mobile page, we may want to use this.
**/
}
@media screen and (max-width: 995px){
/* Okay, this all *should* work, at least does on Desktop devices, but it absolutely breaks Mobile devices responsiveness.
Thing is, that is why this was here to begin with...or rather, this works on "Local file" css, but not on "Actual website" css.
*/
.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: 995px;
height: 3600px;
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;
}
.skills{
}
/* 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%;
height: 200px;
float: left;
clear: both;
}
.prologue {
width: 53%;
float:left;
}
/*This is to pad between the two prologue pieces */
.padded {
width: 2px;
height: 50px;
}
.second {
width: 30%;
}
.profile {
height: 675px;
}
.academic {
height: 1100px;
}
.external{
height: 740px;
}
.work {
margin: 5px 0px 5px 0px;
width: 100%;
height: 650px;
float: left;
clear: both;
}
.education {
width: 100%;
height: 255px;
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;
}
/*
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: 73.0%;
}
/*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;
}
.noMobile{
/** For smaller pages, because we're not using the dedicated mobile page, we may want to use this.
**/
display: none;
visibility: hidden;
}
}
@media screen and (max-width: 979px){
br {
display: none;
}
a {
margin-right: 0px;
}
.noMobile{
/** For smaller pages, because we're not using the dedicated mobile page, we may want to use this.
**/
display: none;
visibility: hidden;
}
}