/* home page styles */

 /*- body
----------------------------------------------------------------------*/
 
@font-face {
    font-family: 'Museo300';
    src: url('../design/typefaces/museo300-regular-webfont.eot?') format('eot'),
         url('../design/typefaces/museo300-regular-webfont.woff') format('woff'),
         url('../design/typefaces/museo300-regular-webfont.ttf') format('truetype'),
         url('../design/typefaces/museo300-regular-webfont.svg#webfontO7vpD0Pu') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo700';
    src: url('../design/typefaces/museo700-regular-webfont.eot?') format('eot'),
         url('../design/typefaces/museo700-regular-webfont.woff') format('woff'),
         url('../design/typefaces/museo700-regular-webfont.ttf') format('truetype'),
         url('../design/typefaces/museo700-regular-webfont.svg#webfontJLspVFI8') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Museo500';
    src: url('../design/typefaces/museo500-regular-webfont.eot?') format('eot'),
         url('../design/typefaces/museo500-regular-webfont.woff') format('woff'),
         url('../design/typefaces/museo500-regular-webfont.ttf') format('truetype'),
         url('../design/typefaces/museo500-regular-webfont.svg#webfontZICfbgcj') format('svg');
    font-weight: normal;
    font-style: normal;
}

body.home {
	margin: 0;
	padding: 0;
	background-color: rgb(235,235,235);
	color: rgb(60,60,60);
	font-size: 62.5%;
	font-family: Arial, sans-serif;
}

/*- masthead
----------------------------------------------------------------------*/

header#masthead {
	position: relative;
	width: 960px;
	height: 92px;
	background: url(../design/mastheads/home_masthead.png) no-repeat;
	margin: 0;
}

header#masthead h1 {
	position: absolute;
	top: 44px;
	left: 25px;
	width: 230px;
	height: 42px;
	background: url(../design/logo_home.png) no-repeat;
}

/*- primary-nav
----------------------------------------------------------------------*/

nav#primary-nav ul li a {
	color: #000;
}

nav#primary-nav ul li a:hover {
	border-bottom: 1px solid #000;
}


/*- global-nav
----------------------------------------------------------------------*/

nav#global-nav ul {
	right: 25px;
}

nav#global-nav ul li {
	color: #000;
}

nav#global-nav ul li a {
	color: #000;
}

nav#global-nav ul li a:hover {
	border-bottom: 1px solid #000;
}

nav#global-nav ul li a.icon {
	border: 0;
}

/*- search
----------------------------------------------------------------------*/

form#search {
	position: absolute;
	right: 25px;
	top: 50px;
	width: 180px;
}

form#search div {
	width: 168px;
	padding: 5px;
}

form#search div input {
	font-size: 1.2em;
}

form#search div input[type="search"] {
	width: 125px;
}

/*- main
----------------------------------------------------------------------*/

/*div#main {
	min-height: 800px;
}*/

/*- squares - positions
----------------------------------------------------------------------*/

div#squares-wrapper {
	position: relative;
	width: 862px;
	height: 489px;
	margin: 35px auto;

}

body.home {
	position: relative;
}
/*
 * IE7 or less have z-index issues, need to set a z-index on all ancestors of positioned nodes
 * */
/*body.home {z-index: 1010;}
	#page-wrapper {
		z-index: 2000;
	}
		#main {
			z-index: 3000;
		}
			#squares-wrapper {
				z-index: 4000;
			}*/
.square {
	position: absolute;
	
}

.square img {
	-moz-box-shadow: 3px 3px 8px rgb(210,210,210);
	-webkit-box-shadow: 3px 3px 8px rgb(210,210,210);
	box-shadow: 3px 3px 8px rgb(210,210,210);
}

div#main div.square a.square-link {
	border: 0;
	width: 161px;
	height: 156px;
	position: relative;
	display: block;
}

div.square a span {
	background: url(../design/icons/new_window.png);
	width: 20px;
	height: 16px;
	z-index: 6;
}

.square .icon {
	position: absolute;
	bottom: 5px;
	right: 5px;
	background: url(../design/icons/new_window.png) no-repeat;
	z-index: 6;
}

.text-1 {
	left: 44px;
	top: 0;
	width: 161px;
	height: 156px;
}

.james {
	top: 0;
	left: 215px;
	width: 161px;
	height: 156px;
}

.text-2 {
	left: 386px;
	top: 0;
	width: 124px;
	height: 133px;
}

.callum {
	top: 0;
	left: 520px;
	width: 161px;
	height: 156px;
}

.text-3 {
	left: 691px;
	top: 0;
	width: 161px;
	height: 156px;
}

.text-4 {
	left: 0;
	top: 166px;
	width: 129px;
	height: 124px;
}

.rhoda {
	left: 139px;
	top: 166px;
	width: 161px;
	height: 156px;
}

.text-5 {
	left: 310px;
	top: 166px;
	width: 161px;
	height: 156px;
}

.mike {
	left: 481px;
	top: 166px;
	width: 161px;
	height: 156px;
}

.text-6 {
	left: 652px;
	top: 166px;
	width: 161px;
	height: 156px;
}

.text-7 {
	left: 61px;
	top: 332px;
	width: 161px;
	height: 156px;
}

.fredrik {
	left: 231px;
	top: 332px;
	width: 161px;
	height: 156px;
}

.text-8 {
	left: 402px;
	top: 332px;
	width: 146px;
	height: 144px;
}

.annie {
	left: 558px;
	top: 332px;
	width: 161px;
	height: 156px;
}

.text-9 {
	left: 729px;
	top: 332px;
	width: 108px;
	height: 108px;
}

/*- squares - modal windows
----------------------------------------------------------------------*/

/*div.info {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
}
*/
div.info,
div.info-hidden {
	color: #fff;
	font-size: 1.5em;
	line-height: 1.5em;
	/*height: 255px;*/
	/*width: 571px;*/
	width: 595px;
	position: absolute;
	/*border: 4px solid #fff;*/
	z-index: 1001;
}
.info img {
	z-index: 1002;
	position: absolute;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	border: 4px solid #fff;
}
div.info-hidden {
	display: none;	
}
.info.img-left img {
	margin: 0;
	left: 0;
}
.info.img-right img {
	right: 0;
	/*margin: -10px -10px 4px 10px;*/
}
.info.img-bottom img {
	bottom: 0;
}
.info.img-bottom img {
	bottom: 0;
}/*
.ie6 .img-right-bottom img,
.ie7 .img-right-bottom img,
.ie8 .img-right-bottom img {
	bottom: -5px;
}
.ie6 .img-left-bottom img,
.ie7 .img-left-bottom img
.ie8 .img-left-bottom img {
	bottom: -5px;
}
*/
div.info div.text {
	width: 400px;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	border: 4px solid #fff;
	position: relative;
	font-family: "Museo300", Arial, sans-serif;
}

div.info div.text h2 {
	font-size: 2em;
	margin: 10px 0 0.5em 0;
}

div.info ul {
	margin-bottom: 1em;
}

div.info p {
	margin-bottom: 0.5em;
}

div#main div.info a {
	color: #fff;
	font-family: "Museo500", Arial, sans-serif;
}

#james-info .text {
	background: rgb(129,154,30);
	top: 0;
	left: 161px;
	width: 400px;
	z-index: 1003;
	padding-left: 10px;
}

#callum-info .text {
	background: rgb(0,111,146);
	top:0;
	left:10px;
	width: 400px;
	z-index: 1001;
	padding-left: 10px;
}

#rhoda-info .text {
	background: rgb(140,46,100);	
	top: 0;
	left: 161px;
	width: 400px;
	z-index: 1003;
	padding-left: 10px;
}

#mike-info .text {
	background: rgb(140,46,100);
	top: 0;
	left:10px;
	width: 400px;
	z-index: 1001;
	padding-left: 10px;
}

#fredrik-info .text {
	background: none repeat scroll 0 0 #746D67;
	bottom: 0;
	left: 161px;
	width: 400px;
	z-index: 1003;
	padding-left: 10px;
}

#annie-info .text {
	background: rgb(209,145,0);
	bottom: 0;
	left: 10px;
	width: 400px;
	z-index: 1001;
	padding-left: 10px;
}