/* I Am Kathryn
 * Cascading Style Sheet
 */

/* Reset */
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
cite, code, del, dfn, em, img, ins, kbd, q, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, 
ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline; }
body { line-height: 1; }
ol, ul { list-style: none; }
table {
	border-collapse: separate;
	border-spacing: 0; }
caption, th, td {
	text-align: left;
	font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a { /* remove unwanted focus outlines from links */
	text-decoration: none;
	noFocusLine: expression(this.onFocus=this.blur()) !important;
	outline: none !important; }
*:focus { outline: none !important; }


/* HTML */
body {
	color: #333;
	font: normal 100% "Andale Mono", "Lucida Console", monospace;
	background-color: #fff; }


/* Type */
h1 {
	display: block;
	margin-bottom: 27px; }
h1 a { 
	display: block;
	width: 174px;
	height: 115px;
	background: url(/img/kathryn-scott-mark.png) left top no-repeat;
	text-indent: -7777px; }
h2 {
	display: block;
	height: 181px;
	font-size: 52px;
	text-transform: uppercase; }
h3, h4 {
	display: block;
	width: 228px;
	margin-bottom: 28px;
	color: #fff;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase; }
h4 {
	margin: 0;
	line-height:13px;
	border-top: 1px solid #fff;
	text-transform: none; }


/* Layout */
#page {
	width: 906px;
	margin: 24px 0 0 30px; }
#menu {
	float: left;
	width: 174px; }
#content {
	position: relative;
	float: left;
	width: 714px;
	margin: 142px 0 0 18px; }

/* Menu */
#menu li { 
	font-size: 12px;
	text-transform: uppercase; }
#menu li a {
	display: block;
	line-height: 16px; }
#menu .personal li { 
	padding-bottom: 11px;
	border-top: 1px solid #3344ac; }

/************************************************************************/
/* START EDITING... */
/* Personal Link Colour */
#menu .personal li a { color: #555555; }
#menu .personal li.sel a, #menu .personal li a:hover { color: #3344ac; }

#menu .work { margin-top: 13px; }
#menu .work > li { 
	padding-bottom: 11px;
	border-top: 1px solid #3344ac; }

/* Work Link Title Colour */
#menu .work > li > a {
	line-height: 16px;
	color: #000; }
#menu .work > li > a:hover { color: #000; }

#menu .work li li {
	padding-bottom: 0;
	line-height: 14px;
	text-transform: none; }
#menu .work li ul { display: none; }
#menu .work li ul.open { display: block; }

/* Work Project Link Colour */
#menu .work li li a { 
	line-height: 14px;
	color: #555555; }
#menu .work li li.sel a { color: #3344ac; }
#menu .work li li a:hover { color: #3344ac; }

/* Content */
#content ul {
	position: absolute;
	top: 0;
	display: block;
	z-index: 1; }
#content #pieces li { margin-bottom: 6px; }
#content #pieces li.placeholder {
	width: 714px;
	height: 457px;
	background-color: #eee; }

#content #info {
	position: absolute;
	top: 0;
	width: 714px;
	color: #fff;
	background-color: #4053c1;
	filter:alpha(opacity=85);
	-moz-opacity:.85;
	opacity:.85;
	z-index: 2; }
#info h2 { text-indent: -999em; }
#info .col {
	float: left;
	width: 228px;
	margin: 0 6px 0 6px;
	padding-top: 1px;
	border-top: 2px solid #fff; }
#info .col:last-child { margin-right: 0; }
#info .col p {
	width: 228px;
	margin-bottom: 14px;
	color: #fff;
	font-size: 12px;
	line-height: 14px; }
#info .col strong { text-transform: uppercase; }
#info .col a {
	color: #fff;
	border-bottom: 1px solid #788fcd; }
#info .col a:hover { border-bottom-color: #fff; }