/* ===========================================================*/
/* GLOBAL */
/* ===========================================================*/
body{ margin: 0px; padding:0px; margin:0px; width:100%; height:100%; background-color:#92278f; }
html { min-height: 100%; height: auto; border:0px; margin:0px; }

body,ul,ol,dl,h1,h2,h3,h4,h5,h6,td,th,
caption,pre,p,blockquote, a, label, input, textarea { font-family: Arial, Helvetica, sans-serif; color:#fff; font-size:13px; }

/* ===========================================================*/
/* Colours */
/* ===========================================================*/
#gallery p, #gallery h2  { color:#000; }
p.purple { color:#92278f!important; } 
/* ===========================================================*/
/* Typeography */
/* ===========================================================*/

/*base heading setup */
h1 {  } /* page title */
h2 { line-height:16px; font-weight:bold; }
h3 {  }

#subContent h2 { margin-top:10px; }

.contentLayer p, #subContent p { line-height:16px; margin:8px 0px;}
.contentLayer .textBlock p { font-size:13px; line-height:18px; font-weight:bold; }


/*==============================================================*/
/*   content page stylings */
/*==============================================================*/

/*==============================================================*/
/*    links */
/*==============================================================*/
a{ text-decoration:none; color:#92278f; }
a:hover { text-decoration:underline; }
a.dotted {  }
/*==============================================================*/
/*    layout */
/*==============================================================*/
/* main content areas*/
#wrap { width:100%; margin-top:100px; margin-bottom:100px;}

#head, #foot, .contentLayer, #content, #subContent { width:484px; display:block; margin:0 auto; }
#content { width:960px }
#head { width:486px; height:30px }
#head h1 { width:486px; height:30px; background:url(../images/tobiasBorthenDesign.jpg) no-repeat; text-indent:-900px; }


/* who what where blocks */
.contentLayer { margin:30px auto; }
.contentLayer .contentBlock { border:11px #fff solid; width:128px; height:128px; float:left; }
.contentLayer .contentBlock.left, .contentLayer .textBlock.left { margin-right:17px }
.contentLayer .contentBlock.mid { margin-right:17px }
.contentLayer .contentBlock.top { margin-bottom:17px;  }

/* container to hold 2 blocks in one vertical space in content layers */
.contentLayer .constraintBox { width:167px; float:left; }

/* who what where block Text replacement */
.contentLayer .contentBlock span { display:block; height:27px; with:128px; margin-top:50px; margin-bottom:51px; text-indent:-900px;}
.contentLayer .contentBlock.who span { background-image:url(../images/who.png);  }
.contentLayer .contentBlock.what span { background-image:url(../images/what.png);  }
.contentLayer .contentBlock.how span { background-image:url(../images/how.png);  }
.contentLayer .contentBlock.take span { background-image:url(../images/take.png);  }
.contentLayer .contentBlock.a span { background-image:url(../images/a.png);  }
.contentLayer .contentBlock.look span { background-image:url(../images/look.png);  }

/* who what where block background colours */
.contentLayer .contentBlock.green { background-color:#8dc63f; }
.contentLayer .contentBlock.teal { background-color:#13a89e; }
.contentLayer .contentBlock.lightOrange { background-color:#f7941e; }
.contentLayer .contentBlock.blue { background-color:#662d91; }
.contentLayer .contentBlock.orange { background-color:#f1592a; }

/* Large text blocks on layers background images */
.contentLayer .textBlock { width:317px; height:317px; float:left; position:relative; }
.contentLayer .textBlock.who { background-image:url(../images/whoLarge.png); }
.contentLayer .textBlock.what { background-image:url(../images/whatLarge.png); }
.contentLayer .textBlock.how { background-image:url(../images/howLarge.png); }
.contentLayer .textBlock.take { background-image:url(../images/takeLarge.png); }
.contentLayer .textBlock.a { background-image:url(../images/aLarge.png); }
.contentLayer .textBlock.look { background-image:url(../images/lookLarge.png); }

/* text positioning on large blocks */
.contentLayer .textBlock p { margin:0px; position:absolute; left:0px;}
.contentLayer .textBlock p.top { padding:26px 20px 0px 26px;  top:0px;  }
.contentLayer .textBlock p.bottom { padding:0px 20px 28px 28px;  bottom:0px;   } 

#lookLayer.contentLayer .textBlock p.bottom { bottom: 30px; }

/* detection Layer Blocks */
#detectionLayer { display:none; }
#detectionLayer.contentLayer .contentBlock { width:150px; height:150px; border:0px none; }

/* gallery layer   */
#gallery.contentLayer { width:960px; margin:0px; }
#gallery.contentLayer .item { margin:30px auto; }
#gallery.contentLayer .item img { width:960px; float:left; }
#gallery.contentLayer .item .text { width:200px; padding:20px 15px 15px 15px; float:right; background-color:#fff; height:282px; } 

/* gallery controls */
#back, #next, #home { display:none; }
#head #home { float:right; margin-right:-130px; margin-top:-60px;}
#foot #back { float:left; margin-left:-130px; }
#foot #next { float:right; margin-right:-130px; }
#galleryArrow { position:relative; top:250px; left:520px; cursor:pointer;}

/* foot */
#foot { height:75px; }
#foot p.phone { background:url(../images/directLine.png); margin:auto; width:481px; height:51px; text-indent:-900px; }
#foot p.email { background:url(../images/email.png); margin:auto; width:305px; height:36px; text-indent:-900px;  }
#foot p.email:hover { background:url(../images/emailHover.png); }
#foot a#mailto { display:block; width:305px; height:36px;  }
#foot a.linkedin { display:block; width:249px; height:32px; background:url(../images/linkedin.png) no-repeat top center; margin:0px auto; }
#foot a.linkedin:hover { background-position:bottom; }

/* SUB CONTENT */

#subContent { margin-top:150px; }
#subContent ul { list-style:outside; list-style-type:disc; margin-left:15px; }
#subContent ul li { line-height:16px;  }

.noWrap { white-space:nowrap; }