/**
	Liz Kerrison
	Primary Screen and Print Styles
	
	@author		Thomas J Bradley <theman@thomasjbradley.ca>
	@link		http://thomasjbradley.ca
	@version	$Id: screen+print.css 102 2008-10-08 04:12:04Z thomasjbradley $
	
	
	COLOURS:
		Masthead PURPLE: 5b56a6
		Content OFF-WHITE: f6f5fa
		Brown: 321709
	
	
	CONTENTS:
		General
			Clear
		Layout
		Typography
		Forms
		Images
		Elements
			Masthead
			Footer
			Work
		Misc
	
*/


/*----- =General -----*/

@media screen,print {

body {
	margin: 0;
	padding: 0;
	
	font: normal 100.01%/135% arial,corbiel,verdana,sans-serif;
	}

/*--- =General Clear -----*/
.wrapper:after,
#masthead ul:after,
ul.photos:after,
div.work:after,
div.work div.info:after {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	
	content: ".";
	font-size: 0;
	}
	
} /* END MEDIA: screen,print */	



/*----- =Layout -----*/

@media screen {

.wrapper {
	margin: 0 auto;
	padding: 0;
	width: 960px;
	}
	
#content {
	margin: 0;
	padding: 0;
	
	background: #f6f5fa url("../../images/common/content-bg.gif") repeat-x left bottom;
	
	color: #321709;
	}
	
	#content .wrapper {
		padding: 1px 30px;
		width: 900px;
	
		background: #fefefe url("../../images/common/content-wrapper-bg.gif") repeat-x left bottom;
		}
		
.col-primary {
	display: inline;
	float: left;
	width: 580px;
	}
	
.col-secondary {
	display: inline;
	float: right;
	width: 290px;
	}
	
.col {
	display: inline;
	float: left;
	width: 275px;
	}
	
.col.second {
	margin-left: 30px;
	}
	

} /* END MEDIA: screen */



/*----- =Typography -----*/

@media screen,print {

h1 {
	margin: 1em 0;
	padding: 0;
	
	color: #5b56a6;
	font-size: 1.5em;
	line-height: 1.375em;
	}
	
h2 {
	margin: 1em 0;
	padding: 0;
	
	color: #321709;
	font-size: 1.3125em;
	line-height: 1.375em;
	}
	
p {
	margin: 0 0 1.375em 0;
	padding: 0;
	}
	
a,
a:link {
	color: #321709;
	font-weight: bold;
	text-decoration: underline;
	}
	
a:visited {
	color: #4e3e35;
	font-weight: bold;
	text-decoration: underline;
	}
	
a:focus,
a:hover,
a:active {
	color: #5b56a6;
	font-weight: bold;
	text-decoration: underline;
	}
	
a[rel="external"]:after {
	content: " ""\2197 ";
	
	color: inherit;
	font-size: 65%;
	font-weight: normal;
	line-height: 1em;
	vertical-align: top;
	}
	
a[rel="external"][hreflang]:after {
	content: " ""\2197" " (" attr(hreflang) ")";
	
	color: inherit;
	font-size: 65%;
	font-weight: normal;
	line-height: 1em;
	vertical-align: top;
	}
	
a[rel="external"].no-mark-external:after {
	content: "";
	}
	
span.amp {
	font: italic normal 0.9em "Baskerville","Goudy Old Style","Palatino","Book Antiqua",serif;
	}
	
} /* END MEDIA: screen,print */

@media print {

/*----- =Typography -----*/

a:link:after,
a:visited:after,
a:hover:after,
a:active:after {
	content: " <http://lizkerrison.ca/"attr(href)"> ";
	
	color: #808080;
	font-style: italic;
	font-weight: normal;
	}

a[href^="/"]:after {
	content: " <http://lizkerrison.ca"attr(href)"> ";
	}
	
a[href^="http"]:after {
	content: " <"attr(href)"> ";
	}

/* Use this one if the link text does not have the e-mail address inside */
a[href^="mailto"]:after {
	content: " <"attr(href)"> ";
	}

/* Use this only if the link text always has the e-mail address inside */
/*
a[href^="mailto"]:after {
	content: "";
	}
*/

} /* END MEDIA: print */



/*----- =Forms -----*/

@media screen,print {

form,
fieldset {
	display: block;
	margin: 0;
	padding: 0;
	
	border: 0;
	}

input,
select,
textarea {
	font-size: 1em;
	vertical-align: middle;
	}

label {
	display: block;
	margin: 0 0 0.2em 0;
	padding: 0;
	
	vertical-align: middle;
	}
	
	form div.name,
	form div.email {
		display: inline;
		float: left;
		width: 49%;
		}
		
	form div.name input,
	form div.email input {
		margin: 0;
		width: 94%;
		}
		
	form div.subject,
	form div.message {
		clear: both;
		padding: 0.6em 0 0 0;
		}
		
		form div.subject input,
		form div.message textarea {
			margin: 0;
			max-width: 95%;
			width: 95%;
			}
			
	form div.button {
		padding: 1em 0.9em 0 0;
		
		text-align: right;
		}
		
		form div.button small {
			display: inline;
			float: left;
			
			font: italic 0.875em georgia,times,serif;
			}
			
.error {
	margin: 0 1.2em 0.5em 0;
	padding: 0.5em;
	
	background-color: #ffc;
	border-bottom: 1px solid #e8c91d;
	border-top: 1px solid #e8c91d;
	
	color: #333;
	font: italic 1em georgia,times,serif;
	}
	
	.error b {
		display: block;
		
		color: #333;
		}

label.error {
	margin-bottom: 0.3em;
	
	font-size: 0.875em;
	}

p.success {
	font-size: 1.5em;
	color: #fff;
	}
	
} /* END MEDIA: screen,print */
	


/*----- =Images -----*/

@media screen,print {

img {
	margin: 0;
	padding: 0;
	
	border: 0;
	}
	
img.profile {
	margin-top: 2.3em;
	}
	
} /* END MEDIA: screen,print */



/*----- =Elements Masthead -----*/

@media screen,print {

#masthead {
	margin: 0;
	padding: 30px 0 0 0;
	
	background: #5b56a6 url("../../images/common/masthead-bg.gif") repeat;
	}

	#masthead .wrapper {
		position: relative;
		}
	
	#masthead a.logo {
		display: inline;
		float: left;
		height: 208px;
		width: 670px;
		}
	
	#masthead ul {
		bottom: 4px;
		margin: 0;
		padding: 0;
		position: absolute;
		right: 0;
		
		list-style-type: none;
		}
	
		#masthead ul li {
			display: inline;
			float: right;
			margin: 0 0 0 10px;
			padding: 0;
			}
			
			#masthead ul a,
			#masthead ul a:link,
			#masthead ul a:visited {
				display: block;
				height: 68px;
				margin: 0;
				overflow: hidden;
				padding: 0;
				width: 138px;
				
				background: transparent url("../../images/common/nav-bg.gif") no-repeat;
				
				text-indent: -999em;
				}
				
			#masthead ul #nav-about a,
			#masthead ul #nav-about a:link,
			#masthead ul #nav-about a:visited {
				background-position: top left;
				}
				
			#masthead ul #nav-about a:focus,
			#masthead ul #nav-about a:hover,
			#masthead ul #nav-about a:active {
				background-position: bottom left;
				}
				
			#masthead ul #nav-about a.active,
			#masthead ul #nav-about a.active:link,
			#masthead ul #nav-about a.active:visited {
				background-position: center left;
				}
				
			#masthead ul #nav-portfolio a,
			#masthead ul #nav-portfolio a:link,
			#masthead ul #nav-portfolio a:visited {
				background-position: top right;
				}
				
			#masthead ul #nav-portfolio a:focus,
			#masthead ul #nav-portfolio a:hover,
			#masthead ul #nav-portfolio a:active {
				background-position: bottom right;
				}
				
			#masthead ul #nav-portfolio a.active,
			#masthead ul #nav-portfolio a.active:link,
			#masthead ul #nav-portfolio a.active:visited {
				background-position: center right;
				}
	
} /* END MEDIA: screen,print */


/*----- =Elements Footer -----*/

@media screen,print {

#footer {
	margin: 0;
	padding: 0 0 30px 0;
	
	background: #321709 url("../../images/common/footer-bg.gif") repeat;
	
	color: #fff;
	}
	
	#footer .wrapper {
		padding: 1px 30px;
		width: 900px;
		}
		
	#footer h2 {
		color: #fff;
		}
		
ul.photos {
	margin: 0 0 0.5em -5px;
	padding: 0;
	
	list-style-type: none;
	}
	
	ul.photos li {
		display: inline;
		float: left;
		margin: 0 0 5px 5px;
		padding: 0;
		}
		
		ul.photos a,
		ul.photos a:link,
		ul.photos a:visited {
			display: block;
			height: 75px;
			margin: 0;
			padding: 5px;
			width: 75px;

			border: 4px solid #fff;
			}
			
		ul.photos a:focus,
		ul.photos a:hover,
		ul.photos a:active {
			border-color: #5b56a6;
			}

} /* END MEDIA: screen,print


/*----- =Element Work -----*/

@media screen,print {

div.work {
	clear: both;
	margin: 0 0 1.375em 0;
	padding: 0;
	position: relative;
	}
	
	div.work h2 {
		margin-top: 0.8em;
		width: 540px;
		
		color: #5b56a6;
		}
	
	div.work h2 span.info {
		display: block;
		
		font: italic normal 0.875em georgia,cambria,times,serif;
		}
	
.work-link {
	margin: 0;
	position: absolute;
	right: 0;
	top: 1.9em;
	width: 400px;

	color: #6763ad;	
	font: italic normal 1em georgia,cambria,times,serif;
	text-align: right;
	}

a.work,
a.work:link,
a.work:visited,
a.work:focus,
a.work:hover,
a.work:active,
span.work {
	display: block;
	height: 300px;
	margin: 0 0 15px 0;
	padding: 0;
	
	text-decoration: none;
	}
	
div.work div.info {
	padding: 0 0 2.75em 0;
	position: relative;
	}
	
div.work table {
	display: inline;
	float: right;
	margin: 0.1em 0 0 0;
	padding: 0;
	width: 390px;
	
	border-collapse: collapse;

	font-size: 0.75em;
	line-height: 1.8em;
	}
	
	div.work table th {
		margin: 0;
		padding: 0 4px 0 0;
		width: 91px;
		vertical-align: top;
		
		color: #999;
		text-align: right;
		}
		
	div.work table td {
		margin: 0;
		padding: 0;
		
		vertical-align: top;
		}
	
div.work p {
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
	width: 430px;
	
	font-size: 0.875em;
	}
	
} /* END MEDIA: screen,print */



/*----- =Misc -----*/

@media screen,print {
	
hr {
	clear: both;
	height: 45px;
	margin: 1em 0 0 0;

	background: transparent url("../../images/common/hr.gif") no-repeat center top;
	border: 0;
	clip: rect(5px 100% 6px 0);
	}
	
.resume {
	clear: both;
	}
	
	
ul.skills {
	margin: 1.375em 0;
	padding: 0;
	
	list-style-position: outside;
	}
	
a.feautre,
a.feature:link,
a.feature:visited {
	text-decoration: none;
	}
	
p.feature {
	font: italic normal 1em georgia,times,serif;
	}
	
} /* END MEDIA: screen,print */