@charset "utf-8";

html {
    /* Prevent font scaling in landscape while allowing user zoom */
    -webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	color: #646466;
	font-family: Calibri, Tahoma, sans-serif;
	font-size: 1em;
	line-height: 140%;
	background-color: #FFFFFF;
}
a:link {
	color: #002D56;
}
a:visited {
	color: #003399;
}
a:hover, a:active, a:focus {
	color: #6990A8;
}


/* resets the box model */
.row, 
.column {
    box-sizing: border-box;
}

/* clears the floating elements on the row to maintain the structure of the layout  */
.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}

/* clear the floating elements on the row to maintain the structure of the layout */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* sets the container */
.container {
	width: 100%;
	margin: auto;
	background-color: #ffffff;
}

/* Columns */
/* defines the column common styles */
.column {
    position: relative;
    float: left;
		display: block;
}
.column + .column { /* sets the gutters except column 1 */
	margin: 0 1.6%;
}

/* using a 12 column grid */
.column-1 {
	width: 6.86666666667%;
}
.column-2 {
	width: 15.3333333333%;
}
.column-3 {
	width: 23.8%;
}
.column-4 {
	width: 32.2666666667%;
}
.column-5 {
	width: 40.7333333333%;
}
.column-6 {
	width: 49.2%;
}
.column-7 {
	width: 57.6666666667%;
}
.column-8 {
	width: 66.1333333333%;
}
.column-9 {
	width: 74.6%;
}
.column-10 {
	width: 83.0666666667%;
}
.column-11 {
	width: 91.5333333333%;
}
.column-12 {
	width: 100%;
}

/* Main html styles */
h1 {
	font-size: 1.5em;
	color: #0058B0;
	margin: 16px 0 0 8px;
}
h2 {
	font-size: 1.4em;
	color: #0058B0;
	margin-left: 12px;
}
h3 {
	font-size: 1.3em;
	color: #0058B0;
	margin-left: 12px;
}
h4 {
	font-size: 1.1em;
	color: #0058B0;
	margin-left: 12px;
}
p {
	margin: 8px 12px;
}
cite {
	color: #0058b0;
	line-height: 100%;
}
address {
	font-weight: bold;
	font-style: normal;
	font-size: 110%;
	line-height: 130%;
	color: #004677;
	margin: 20px 0 12px 12px;
}

/* Header area */
header {
	background-color: #0058B0;
	text-align: right;
	color: #FFF;
}
#logo {
	float: left;
	margin: -16px 0 16px 12px;
}
header p {
	padding: 100px 12px 0 0;
}
header p a:link, header p a:visited {
	color: #c5daec;
}
header p a:hover, header p a:active {
	color: #fff;
}

/* Footer area */
footer {
	text-align: center;
	border-top: 2px solid #0058B0;
}
footer ul {
	padding: 0;
	margin: 8px 0;
}
footer li {
	display: inline;
	padding: 0px;
	margin: 0px;
}
footer a:link, footer a:visited {
	border-right: 1px solid #0058B0;
	margin: 0px;
	padding: 0px 12px;
}
footer a.alt:link, footer a.alt:visited {
	border: none;
}

/* Right hand box on main pages */
.rightbox {
	float: right;
	width: 40%;
	margin-left: 24px;
	background-color: #e6eff7;
	margin-right: 12px;
	padding-bottom: 12px;
}
.rightbox h3 {
	color: #0058B0;
	margin-bottom: 0px;
	margin-left: 12px;
}
.rightbox blockquote {
	margin-left: 18px;
	margin-top: 12px;
}
.rightbox ul {
	margin-left: -12px;
}
.rightbox li {
	list-style-type: none;
	margin-left: 0px;
}

.proofinglist { /* List of jobs for proofing on Proofing page */
	float: left;
	width: 180px;
	margin-left: 160px;
}

/* Start Portfolio pages */
.portf ul { /* Website portfolio examples list */
	margin: 0;
}
.portf li {
	list-style-type: none;
	font-size: 90%;
	clear: left;
	padding-top: 0.5em;
	display: block;
}
.portf h3 {
	margin: 12px 0 6px 0;
}
.portf h4.disciplines {
	margin: 0 0 6px 6px;;
}
.portf p {
	font-size: 100%;
	line-height: 130%;
	margin-top: 0px;
	margin-bottom: 0.25em;
}
.portf li li { /* Disciplines used list */
	display: block;
	width: 70px;
	background-image: url(../images/tick.gif);
	background-repeat: no-repeat;
	text-align: left;
	float: left;
	padding-left: 28px;
	height: 28px;
	line-height: 130%;
	font-size: 100%;
	clear: none;
	background-position: left top;
	margin-left: 10px;
	margin-bottom: 20px;
}
.portf .image {
	float: left;
	margin-left: 0px;
	margin-right: 1em;
}
.portf .image img {
	margin-bottom: 4px;
}
.portf blockquote {
	margin-bottom: 1em;
}
.portf cite {
	color: #6568E1;
	font-style: italic;
}
.portfolioimages { /*Centers the portfolio images */
	text-align: center;
}
.portfolioimage { /* Formats the actual image */
	background-color: #E6EFF7;
	padding: 4px;
}
/* End Portfolio pages */

/* Miscellaneous classes */
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.floatleft {
	float: left;
}
.floatright{
	float: right;
	margin-left: 6px;
}
.clearleft {
	clear: left;
}

@media only screen and (max-width: 1024px) {
	footer a:link, footer a:visited {
		padding: 0px 6px;
	}
	.portf h4.disciplines { /* Moves the 'Disciplines' below the image */
		clear: left;
		text-align: left;
	}
}

@media only screen and (max-width: 800px) {
		/* sets the container */
		.container {
			width: 100%;
		}
		.column-1, 
    .column-2, 
    .column-3, 
    .column-4, 
    .column-5, 
    .column-6, 
    .column-7, 
    .column-8, 
    .column-9, 
    .column-10, 
    .column-11, 
    .column-12 {
        width: auto;
        float: none;
				margin: 0;
    }
		
		/* removes left gutters */
    .column + .column { 
        margin: 0;
		}
		
		/* creates the hamburger icon */		
		.hamburger {
			cursor: pointer;
			padding: 15px;
			display: block;
		}
		.line {
	border-bottom: 4px solid #fff;
	width: 35px;
	margin-bottom: 6px;
		}
		.line:last-child {
			margin-bottom: 0;
		}
		/* formats the menu for mobile */		
		.menu {
			float: left;
			width: 320px;
			height: 0;
			overflow: hidden;
			transition: height 0.3s;
			border: none;
			margin-top: 0;
		}
		.open {
			height: 340px;
		}
		.menu li {
			width: 320px;
			float: none;
		}
		.menunodisplaymobile { /* Footer menu not displayed */
			display: none;
		}
		.portf li {
			margin-left: -24px;
		}
		.portfolioimage {
			margin-top: 8px;
		}
}

@media only screen and (max-width: 768px) {
		.column-1 {
			height: 0;
		}
		header {
			text-align: center;
		}
		header p {
			padding: 0;
		}
		#logo {
			float: none;
		}
}

/* adjusts the width of the columns to fit full width */
@media only screen and (max-width: 640px) {
		.portf li {
			text-align: center;
		}
		.portf .image {
			float: none;
		}
		.nodisplayvisitwebsite {
			display: none;
		}
		.portf li {
			margin-left: -36px;
		}
		.portf blockquote {
			text-align: left;
			margin-left: 0;
		}
		.portf h4.disciplines { /* Moves the 'Disciplines' below the image */
			margin-top: -40px;
		}
}

@media only screen and (max-width: 480px) {
		p {
			margin-right: 8px;
		}
		
		.rboxnodisplaymobile { /* don't display righthand box on small mobile */
			display:none;
		}
		.nofloatmobile { /* don't float righthand box on small mobile */
			float: none;
			width: 89%;
			margin-left: 16px;
		}
		.portf {
			margin-left: 0px;
		}
		.portf h3 {
			margin-right: 8px;
		}
}

@media only screen and (max-width: 360px) {
		.portfolioimage {
			width: 320px;
			height: 212px;
		}
}

@media only screen and (max-width: 320px) {
		.portfolioimage {
			width: 290px;
			height: 192px;
		}
}