/*	===============================================================
	© Sally Carmichael

	Type:				Structural Styles
	Build by:			Shoreline Design
	Document Author:	James Lester
	Author Email:		james@shorelinedesign.co.uk
	Creation Date:		18th August 2008
	---------------------------------------------------------------
	Version number: 	1.0
	Last edited:		NA - Still in developement
	============================================================ */


/*	===============================================================
	DOCUMENT CONTENTS
	
	1.	Global settings
	2.	Positioning & Structure rules
	3.	Primary navigation
	4.	Secondary Navigation
	5.	Footer
    6.	Extra Elements 
	------------------------------------------------------------ */
	
	
/*	---------------------------------------------------------------
	#1 GLOBAL SETTINGS
	---------------------------------------------------------------
	these are mostly font sizing and positional issues
	------------------------------------------------------------ */


body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background: #7fb2b2;
}

button { margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: Transparent;
border: none;
cursor: pointer;
}


/*	---------------------------------------------------------------
	#2 POSITIONING & STRUCTURE RULES
	---------------------------------------------------------------
	Outlines the main structure of the website
	------------------------------------------------------------ */




#inner-block {
	display: block;
	width: 779px;
	min-height: 402px;
	height: auto !important;
	height: 402px;
	background: #d9f0f0;
	padding: 78px 0px 0px 0px;
	margin: 53px auto 0px auto;
	border: 10px solid #ffffff;
	position: relative;
}


#logo { margin: 0px; padding: 0px; }
#logo a {
	display: block;
	margin: 0px;
	width: 299px;
	height: 48px;
	position: absolute;
	right: 14px;
	top: 15px;
	background: transparent url(../images/global/logo.gif) no-repeat;	
	padding: 48px 0px 0px 0px !important;
    height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}



#page-image-container {
	display: block;
	width: 779px;
	min-height: 371px;
	height: auto !important;
	height: 371px;
	margin: 0px auto 0px auto;
	border-top: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
}

.image-home { background: transparent url(../images/page-backgrounds/home-mainimage.jpg) top !important; }
.image-home { background: #d9f0f0; }
.image-home1 { background: transparent url(../images/page-backgrounds/home1.jpg) top !important; }
.image-home1 { background: #d9f0f0; }
.image-home2 { background: transparent url(../images/page-backgrounds/home2.jpg) top !important; }
.image-home2 { background: #d9f0f0; }
.image-home3 { background: transparent url(../images/page-backgrounds/home3.jpg) top !important; }
.image-home3 { background: #d9f0f0; }
.image-home4 { background: transparent url(../images/page-backgrounds/home4.jpg) top !important; }
.image-home4 { background: #d9f0f0; }



#text-container-outer {
	display: block;
	background: transparent url(../images/global/outer.png);
	width: 372px; 
	min-height: 100px;
	height: auto !important;
	height: 100px;
	margin: 48px 0px 20px 32px;
	padding: 8px;
}


#text-container-inner {
	display: block;
	background: transparent url(../images/global/outer.png);
	width: 356px; 
	min-height: 100px;
	height: auto !important;
	height: 100px;
	margin: 0px 0px 0px 0px;
	padding: 11px 8px 11px 8px;
}





#page-strap-block {
	display: block;
	width: 749px;
	min-height: 2px;
	height: auto !important;
	height: 2px;
	margin: 0px;
	padding: 6px 15px 6px 15px;
}

#nav-container-process {
	display: block;
	margin: 43px 0px 0px 75px;
	width: 200px;
	min-height: 10px;
	height: auto !important;
	height: 10px;
	background: Transparent;
	float: left;
}

#text-container-process {
	display: block;
	margin: 43px 0px 0px 13px;
	width: 390px;
	min-height: 10px;
	height: auto !important;
	height: 10px;
	background: Transparent;
	float: left;
	padding: 30px 0px 0px 3px;
}


#masterimage { float: left; margin: 0px 0px 0px 0px; }
#text-container-portfolio {
	display: block;
	margin: 43px 0px 0px 22px;
	width: 383px;
	min-height: 10px;
	height: auto !important;
	height: 10px;
	background: Transparent;
	float: left;
	padding: 0px 0px 0px 3px;
}

#text-container-left {
	display: block;
	margin: 43px 22px 0px 22px;
	width: 361px;
	min-height: 10px;
	height: auto !important;
	height: 10px;
	background: Transparent;
	float: left;
	padding: 0px 0px 0px 3px;
}


#text-container-portfolio ul { margin: 0px; padding: 0px; }
#text-container-portfolio li { margin: 0px; padding: 0px; list-style: none; }

#text-container-portfolio li a {
	display: block;
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
	width: 115px;
	height: 116px;
	padding: 116px 0px 0px 0px;
    height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}

#last-li {
	margin-right: 0px !important;
}



#definition {
	display: block;
	width: 264px;
	min-height: 20px;
	height: auto !important;
	height: 20px;
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 17px 17px 17px 17px;
}

#portfolio-popup-image {
	display: block;
	float: left;
	width: 382px !important;
}



#home-text h2 { margin: 0px 0px 0px 0px; }
#home-text p { margin: 10px 0px 0px 0px; }


 
/*	---------------------------------------------------------------
	#3 PRIMARY NAVIGATION
	---------------------------------------------------------------
	Outlines the primary navigational elements of the website
	------------------------------------------------------------ */

#navbar { margin: 0px; padding: 0px; position: absolute; top: 52px; left: 15px; }
#navbar li { margin: 0px; padding: 0px; list-style: none;  float: left; }
#navbar li a {
	display: block;
	margin: 0px 14px 0px 0px;
	height: 8px;
	background: transparent url(../images/navigation/nav.gif) no-repeat;	
	padding: 8px 0px 0px 0px !important;
    height/* */:/**/0;
	height: /**/0;
	overflow: hidden;
}

#navbar li.home a { width: 46px; background-position: 0px 0px; }
#navbar li.home a:hover { width: 46px; background-position: 0px -8px; }
#navbar li.home a.on { width: 46px; background-position: 0px -8px; }

#navbar li.process a { width: 66px; background-position: -60px 0px; }
#navbar li.process a:hover { width: 66px; background-position: -60px -8px; }
#navbar li.process a.on { width: 66px; background-position: -60px -8px; }

#navbar li.portfolio a { width: 76px; background-position: -140px 0px; }
#navbar li.portfolio a:hover { width: 76px; background-position: -140px -8px; }
#navbar li.portfolio a.on { width: 76px; background-position: -140px -8px; }

#navbar li.gallery a { width: 65px; background-position: -228px 0px; }
#navbar li.gallery a:hover { width: 65px; background-position: -228px -8px; }
#navbar li.gallery a.on { width: 65px; background-position: -228px -8px; }

#navbar li.contact a { width: 67px; background-position: -305px 0px; }
#navbar li.contact a:hover { width: 67px; background-position: -305px -8px; }
#navbar li.contact a.on { width: 67px; background-position: -305px -8px; }



/*	---------------------------------------------------------------
	#4 SECONDARY NAVIGATION
	---------------------------------------------------------------
	Outlines the secondary navigational elements of the website
	------------------------------------------------------------ */


#process-nav { margin: 0px; padding: 0px; }
#process-nav li { margin: 0px; padding: 0px; list-style: none; }
#process-nav li a {
	display: block;
	margin: 16px 0px 0px 0px;
	height: 8px;
	background: transparent;	
	padding: 0px 0px 0px 0px;
}


/*	---------------------------------------------------------------
	#5 SIDEBAR
	---------------------------------------------------------------
	Outlines the sidebar elements of the website
	------------------------------------------------------------ */
	





/*	---------------------------------------------------------------
	#6 FOOTER
	---------------------------------------------------------------
	Outlines the footer elements of the website
	------------------------------------------------------------ */
	
#footer {
	display: block;
	width: 799px;
	min-height: 2px;
	height: auto !important;
	height: 2px;
	margin: 0px;
	padding: 0px 0px 0px 0px;
	margin: 8px auto 0px auto;
	background: Transparent;
}

/*	---------------------------------------------------------------
	#7 EXTRA ELEMENTS
	---------------------------------------------------------------
	Outlines the extra elements of the website
	------------------------------------------------------------ */