html, body { 
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size:14px;
	font-weight: normal;
	line-height: 22px;
	color: #FFF;
	background: #000 url(../bg/website.jpg) no-repeat top center fixed;
	margin: 0;
	padding: 0;
	text-align: center;
	height:100%;
	}

p { 
	font-family:sans-serif;
	font-size:14px;
	line-height:22px;
	font-weight:normal;
	color:#FFF;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	}

h1 {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size:20px;
	font-weight:bold;
	line-height:25px;
	color:#F30;
	margin:0px 0px 15px 0px;
	padding:0;
	letter-spacing:-1px;
	text-shadow:1px 1px #000;
	}

h2 {
	font-size: 30px;
	font-weight: bold;
	line-height: 32px;
	color: #FFF;
	letter-spacing: -1px;
	margin: 0px 0px 5px 0px;
	padding: 0px;
	}
	
h3 {
	font-family:sans-serif;
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
	color: #FFF;
	margin: 0px 0px 10px 0px;
	padding: 0px;
	text-shadow:2px 2px #000;
	}

h4 {
	font-size:14px;
	line-height:16px;
	color:#F30;
	margin:0 0 10px 0;
	padding:0;
	}

h5 {
	font-size: 16px;
	font-weight: normal;
	line-height: 24px;
	color:#FFF;
	margin: 0px 0px 20px 0px;
	padding: 0px;
	}

h6 {
	font-size: 11px;
	font-weight: normal;
	line-height: 13px;
	color:#999;
	margin: 0px 0px 4px 0px;
	padding: 0px;
	}
	
ul { 
	padding: 0px;
	margin: 0 0 0 5px;
	}
	
li {
	font-family:sans-serif;
	font-size:14px;
	line-height:22px;
	font-weight:normal;
	margin: 0 0 5px 10px;
	padding: 0px;
	list-style-image:url(../images/bullet.gif);
	}
	
a:link, a:visited {
	text-decoration: none;
	color:#09F;
	}

a:hover, a:active {
	color:#F30;
	}

/* --------------------------- CONTAINERS --------------------------- */

#container {
	position:relative;
	margin:0 auto;
	padding:0;
	width:100%;
	min-height:100%;
	text-align:center;
	}
	
#header {
	background:url(../bg/header.gif) repeat-x top left;
	padding:0;
	margin:0;
	height:70px;
	}

#body {
	padding:0px;
	padding-bottom:40px;	/* Height of the footer */
	}

#footer {
	position:absolute;
	bottom:0;
	margin:0;
	padding:0;
	width:100%;
	height:45px;
	background:#151515 url(../bg/footer.gif) repeat-x top center;
	color:#FFF;
	font-size:12px;
	}

/* --------------------------- NAV --------------------------- */

#nav {
	position: relative;
	width:940px;
	height:70px;
	margin:0 auto;
	padding:0;
	text-align:center;
	clear:both;
	background:url(../bg/nav.gif) no-repeat top center fixed;
	}

#nav ul {
	list-style:none;
	display:inline;
	margin:0;
	padding:0;
	height:70px;
	float:right;
	}

#nav li {
	display:inline;
	height:70px;
	margin:0;
	padding:0;
	text-align:center;
	float:left;
	}
	
#nav a:link, #nav a:visited {
	font-size:10px;
	line-height:10px;
	color:#000;
	margin:0;
	padding:45px 0 5px 0;
	height:20px;
	width:90px;
	text-decoration:none;
	display:inline-block;
	}
	
#nav a:hover, #nav a:active {
	color:#FFF;
	}
	
#nav a.home:link, #nav a.home:visited { background:url(../nav/home.png) no-repeat 0 0; }
#nav a.home:hover, #nav a.home:active { background:url(../nav/home.png) no-repeat 0 -70px; }
#nav a.home-on:link, #nav a.home-on:visited { background:url(../nav/home.png) no-repeat 0 -140px!important; }

#nav a.about:link, #nav a.about:visited { background:url(../nav/about.png) no-repeat 0 0; }
#nav a.about:hover, #nav a.about:active { background:url(../nav/about.png) no-repeat 0 -70px; }
#nav a.about-on:link, #nav a.about-on:visited { background:url(../nav/about.png) no-repeat 0 -140px; color:#FFF; }

#nav a.portfolio:link, #nav a.portfolio:visited { background:url(../nav/portfolio.png) no-repeat 0 0; }
#nav a.portfolio:hover, #nav a.portfolio:active { background:url(../nav/portfolio.png) no-repeat 0 -70px; }
#nav a.portfolio-on:link, #nav a.portfolio-on:visited { background:url(../nav/portfolio.png) no-repeat 0 -140px; color:#FFF; }

#nav a.notebook:link, #nav a.notebook:visited { background:url(../nav/notebook.png) no-repeat 0 0; }
#nav a.notebook:hover, #nav a.notebook:active { background:url(../nav/notebook.png) no-repeat 0 -70px; }
#nav a.notebook-on:link, #nav a.notebook-on:visited { background:url(../nav/notebook.png) no-repeat 0 -140px; color:#FFF;}

#nav a.contact:link, #nav a.contact:visited { background:url(../nav/contact.png) no-repeat 0 0; }
#nav a.contact:hover, #nav a.contact:active { background:url(../nav/contact.png) no-repeat 0 -70px; }
#nav a.contact-on:link, #nav a.contact-on:visited { background:url(../nav/contact.png) no-repeat 0 -140px; color:#FFF; }
	
#nav-bg {
	width:580px;
	height:70px;
	float:left;
	background:url(../nav/bg.gif) no-repeat top right;
	overflow:hidden;
}

/* --------------------------- SUB NAV --------------------------- */

#sub-nav {
	position:relative;
	margin:0 auto;
	padding:0;
	width:100%;
	text-align:center;
	}

/* --------------------------- BUTTONS --------------------------- */

#view-my-portfolio {
	width:220px;
	height:50px;
	float:left;
	margin:20px 0 40px 0;
}

#view-my-portfolio a:link, #view-my-portfolio a:visited {
	font-size:18px;
	line-height:20px;
	color:#FFF !important;
	margin:0;
	padding:15px;
	height:20px;
	width:190px;
	text-decoration:none;
	display:block;
	background:url(../images/view-my-portfolio.gif) no-repeat 0 0;
	text-shadow: 1px 1px #000;
}

#view-my-portfolio a:hover, #view-my-portfolio a:active {
	background:url(../images/view-my-portfolio.gif) no-repeat 0 -50px;
}
	
/* --------------------------- TWITTER --------------------------- */

#twitter_div {
	margin:0 auto;
	width:940px;
	height:45px;
	padding:0px 10px 0px 50px;
	overflow:hidden;
	background:url(../images/twitter.png) no-repeat 5px 7px;
	text-align:left;
	text-shadow:1px 1px #000;
	font-size:13px;
}

#twitter_div ul {
	list-style-type:none;
	height:20px;
	margin:15px 0 0 0;
	padding:0;
	width:810px;
	float:left;
}

#twitter_div li {
	margin:0;
	padding:0;
	height:25px;
}

#twitter_div li a {
	display:block;
}

#twitter_div li span a {
	display:inline;
	margin:0;
}

#follow {
	width:120px;
	height:25px;
	float:right;
}

#follow a:link, #follow a:visited {
	font-size:12px;
	line-height:12px;
	color:#FFF;
	margin:0;
	padding:18px 0px 12px 35px;
	height:15px;
	width:85px;
	text-decoration:none;
	display:block;
	background:url(../images/follow-me.png) no-repeat 0 0;
}

#follow a:hover, #follow a:active {
	background:url(../images/follow-me.png) no-repeat 0 -45px;
}

/* --------------------------- CONTAINERS --------------------------- */
	
#full {
	width:900px;
	margin:0 auto;
	padding:50px;
	text-align:left;
	}
	
#two-thirds {
	width:590px;
	margin:0;
	padding:0;
	}
	
#one-third {
	width:280px;
	margin:0;
	padding:0;
	}

/* --------------------------- HOME --------------------------- */

#home {
	width:770px;
	margin:65px 0 0 65px;
	padding:0;
	float:left;
	}
	
#home h1 {
	font-size:65px;
	font-weight:bold;
	line-height:65px;
	color:#FFF;
}
	
#home a:link, #home a:visited {
	color:#F30;
}

#home a:hover, #home a:active {
	color:#09F;
}

/* --------------------------- ABOUT --------------------------- */

#about {
	width:500px;
	float:left;
	margin:0;
	padding:0;
}

#about ul {
	font-size:14px;
	line-height:20px;
	list-style:none;
	display:inline;
	margin:20px 0;
	padding:0;
	height:40px;
	float:left;
}

#about li {
	list-style:none;
	display:inline;
	margin:0;
	padding:10px 30px 10px 45px;
	height:20px;
	float:left;
}

/* --------------------------- PORTFOLIO --------------------------- */


#portfolio h1 {
	margin:0 0 15px 10px;
}


#portfolio ul {
	list-style:none;
	display:inline;
	margin:0;
	padding:0;
	height:40px;
	float:right;
}

#portfolio li {
	font-family: "ff-din-web-1","ff-din-web-2",sans-serif;
	font-size:18px;
	font-weight:bold;
	line-height:20px;
	list-style:none;
	display:inline;
	margin:0;
	padding:10px 30px 10px 45px;
	height:20px;
	float:left;
}

/* --------------------------- PORTFOLIO MENU --------------------------- */

#portfolio-menu {
	position: relative;
	width:900px;
	margin:0 auto;
	padding:20px 0;
	text-align:left;
	}

#portfolio-menu ul {
	list-style:none;
	display:inline;
	margin:0;
	padding:0;
	wdith:900px;
	height:180px;
	float:left;
	clear:both;
	}

#portfolio-menu li {
	display:inline;
	width:180px;
	height:140px;
	margin:0;
	padding:0;
	text-align:left;
	float:left;
	}
	
#portfolio-menu a:link, #portfolio-menu a:visited {
	margin:0;
	margin:10px;
	padding:0;
	height:120px;
	width:160px;
	text-decoration:none;
	display:inline-block;
	overflow:hidden;
	}
	
#portfolio-menu a:hover, #portfolio-menu a:active {
	color:#FFF;
	}
	
#portfolio-menu a.samara:link, #portfolio-menu a.samara:visited { background:url(../nav/samara.png) no-repeat 0 0; }
#portfolio-menu a.samara:hover, #portfolio-menu a.samara:active { background:url(../nav/samara.png) no-repeat 0 -130px; }

#portfolio-menu a.mcnally:link, #portfolio-menu a.mcnally:visited { background:url(../nav/mcnally.png) no-repeat 0 0; }
#portfolio-menu a.mcnally:hover, #portfolio-menu a.mcnally:active { background:url(../nav/mcnally.png) no-repeat 0 -130px; }

#portfolio-menu a.huge:link, #portfolio-menu a.huge:visited { background:url(../nav/huge.png) no-repeat 0 0; }
#portfolio-menu a.huge:hover, #portfolio-menu a.huge:active { background:url(../nav/huge.png) no-repeat 0 -130px; }

#portfolio-menu a.trec:link, #portfolio-menu a.trec:visited { background:url(../nav/trec.png) no-repeat 0 0; }
#portfolio-menu a.trec:hover, #portfolio-menu a.trec:active { background:url(../nav/trec.png) no-repeat 0 -130px; }

#portfolio-menu a.colour:link, #portfolio-menu a.colour:visited { background:url(../nav/colour.png) no-repeat 0 0; }
#portfolio-menu a.colour:hover, #portfolio-menu a.colour:active { background:url(../nav/colour.png) no-repeat 0 -130px; }

#portfolio-menu a.specialties:link, #portfolio-menu a.specialties:visited { background:url(../nav/specialties.png) no-repeat 0 0; }
#portfolio-menu a.specialties:hover, #portfolio-menu a.specialties:active { background:url(../nav/specialties.png) no-repeat 0 -130px; }

#portfolio-menu a.canadian-club:link, #portfolio-menu a.canadian-club:visited { background:url(../nav/canadian-club.png) no-repeat 0 0; }
#portfolio-menu a.canadian-club:hover, #portfolio-menu a.canadian-club:active { background:url(../nav/canadian-club.png) no-repeat 0 -130px; }

#portfolio-menu a.m-real:link, #portfolio-menu a.m-real:visited { background:url(../nav/m-real.png) no-repeat 0 0; }
#portfolio-menu a.m-real:hover, #portfolio-menu a.m-real:active { background:url(../nav/m-real.png) no-repeat 0 -130px; }

#portfolio-menu a.rogers:link, #portfolio-menu a.rogers:visited { background:url(../nav/rogers.png) no-repeat 0 0; }
#portfolio-menu a.rogers:hover, #portfolio-menu a.rogers:active { background:url(../nav/rogers.png) no-repeat 0 -130px; }

#portfolio-menu a.whisk:link, #portfolio-menu a.whisk:visited { background:url(../nav/whisk.png) no-repeat 0 0; }
#portfolio-menu a.whisk:hover, #portfolio-menu a.whisk:active { background:url(../nav/whisk.png) no-repeat 0 -130px; }

#portfolio-menu a.foldens:link, #portfolio-menu a.foldens:visited { background:url(../nav/foldens.png) no-repeat 0 0; }
#portfolio-menu a.foldens:hover, #portfolio-menu a.foldens:active { background:url(../nav/foldens.png) no-repeat 0 -130px; }


/* --------------------------- PORTFOLIO NAV --------------------------- */

#portfolio-nav {
	position: relative;
	width:1000px;
	height:110px;
	margin:0 auto;
	padding:0;
	text-align:center;
	}

#portfolio-nav ul {
	list-style:none;
	display:inline;
	margin:10px 0;
	padding:0;
	height:90px;
	float:left;
	}

#portfolio-nav li {
	display:inline;
	height:90px;
	margin:0;
	padding:0;
	text-align:left;
	float:left;
	}
	
#portfolio-nav a:link, #portfolio-nav a:visited {
	font-size:10px;
	line-height:10px;
	color:#000;
	margin:0;
	padding:0;
	height:90px;
	width:110px;
	text-decoration:none;
	display:inline-block;
	}
	
#portfolio-nav a:hover, #portfolio-nav a:active {
	color:#FFF;
	}
	
#portfolio-nav a.back:link, #portfolio-nav a.back:visited { background:url(../nav/gallery/back.png) no-repeat 0 0; width:50px!important; margin-right:10px; }
#portfolio-nav a.back:hover, #portfolio-nav a.back:active { background:url(../nav/gallery/back.png) no-repeat 0 -90px; width:50px!important; margin-right:10px; }

#portfolio-nav a.next:link, #portfolio-nav a.next:visited { background:url(../nav/gallery/next.png) no-repeat 0 0; width:50px!important; margin-left:10px; }
#portfolio-nav a.next:hover, #portfolio-nav a.next:active { background:url(../nav/gallery/next.png) no-repeat 0 -90px; width:50px!important; margin-left:10px; }

#portfolio-nav a.samara:link, #portfolio-nav a.samara:visited { background:url(../nav/gallery/samara.png) no-repeat 0 0; }
#portfolio-nav a.samara:hover, #portfolio-nav a.samara:active { background:url(../nav/gallery/samara.png) no-repeat 0 -100px; }
#portfolio-nav a.samara-on:link, #portfolio-nav a.samara-on:visited { background:url(../nav/gallery/samara.png) no-repeat 0 -100px; }

#portfolio-nav a.mcnally:link, #portfolio-nav a.mcnally:visited { background:url(../nav/gallery/mcnally.png) no-repeat 0 0; }
#portfolio-nav a.mcnally:hover, #portfolio-nav a.mcnally:active { background:url(../nav/gallery/mcnally.png) no-repeat 0 -100px; }
#portfolio-nav a.mcnally-on:link, #portfolio-nav a.mcnally-on:visited { background:url(../nav/gallery/mcnally.png) no-repeat 0 -100px; }

#portfolio-nav a.huge:link, #portfolio-nav a.huge:visited { background:url(../nav/gallery/huge.png) no-repeat 0 0; }
#portfolio-nav a.huge:hover, #portfolio-nav a.huge:active { background:url(../nav/gallery/huge.png) no-repeat 0 -100px; }
#portfolio-nav a.huge-on:link, #portfolio-nav a.huge-on:visited { background:url(../nav/gallery/huge.png) no-repeat 0 -100px; }

#portfolio-nav a.trec:link, #portfolio-nav a.trec:visited { background:url(../nav/gallery/trec.png) no-repeat 0 0; }
#portfolio-nav a.trec:hover, #portfolio-nav a.trec:active { background:url(../nav/gallery/trec.png) no-repeat 0 -100px; }
#portfolio-nav a.trec-on:link, #portfolio-nav a.trec-on:visited { background:url(../nav/gallery/trec.png) no-repeat 0 -100px; }

#portfolio-nav a.colour:link, #portfolio-nav a.colour:visited { background:url(../nav/gallery/colour.png) no-repeat 0 0; }
#portfolio-nav a.colour:hover, #portfolio-nav a.colour:active { background:url(../nav/gallery/colour.png) no-repeat 0 -100px; }
#portfolio-nav a.colour-on:link, #portfolio-nav a.colour-on:visited { background:url(../nav/gallery/colour.png) no-repeat 0 -100px; }

#portfolio-nav a.specialties:link, #portfolio-nav a.specialties:visited { background:url(../nav/gallery/specialties.png) no-repeat 0 0; }
#portfolio-nav a.specialties:hover, #portfolio-nav a.specialties:active { background:url(../nav/gallery/specialties.png) no-repeat 0 -100px; }
#portfolio-nav a.specialties-on:link, #portfolio-nav a.specialties-on:visited { background:url(../nav/gallery/specialties.png) no-repeat 0 -100px; }

#portfolio-nav a.canadian-club:link, #portfolio-nav a.canadian-club:visited { background:url(../nav/gallery/canadian-club.png) no-repeat 0 0; }
#portfolio-nav a.canadian-club:hover, #portfolio-nav a.canadian-club:active { background:url(../nav/gallery/canadian-club.png) no-repeat 0 -100px; }
#portfolio-nav a.canadian-club-on:link, #portfolio-nav a.canadian-club-on:visited { background:url(../nav/gallery/canadian-club.png) no-repeat 0 -100px; }

#portfolio-nav a.m-real:link, #portfolio-nav a.m-real:visited { background:url(../nav/gallery/m-real.png) no-repeat 0 0; }
#portfolio-nav a.m-real:hover, #portfolio-nav a.m-real:active { background:url(../nav/gallery/m-real.png) no-repeat 0 -100px; }
#portfolio-nav a.m-real-on:link, #portfolio-nav a.m-real-on:visited { background:url(../nav/gallery/m-real.png) no-repeat 0 -100px; }

#portfolio-nav a.rogers:link, #portfolio-nav a.rogers:visited { background:url(../nav/gallery/rogers.png) no-repeat 0 0; }
#portfolio-nav a.rogers:hover, #portfolio-nav a.rogers:active { background:url(../nav/gallery/rogers.png) no-repeat 0 -100px; }
#portfolio-nav a.rogers-on:link, #portfolio-nav a.rogers-on:visited { background:url(../nav/gallery/rogers.png) no-repeat 0 -100px; }

#portfolio-nav a.whisk:link, #portfolio-nav a.whisk:visited { background:url(../nav/gallery/whisk.png) no-repeat 0 0; }
#portfolio-nav a.whisk:hover, #portfolio-nav a.whisk:active { background:url(../nav/gallery/whisk.png) no-repeat 0 -100px; }
#portfolio-nav a.whisk-on:link, #portfolio-nav a.whisk-on:visited { background:url(../nav/gallery/whisk.png) no-repeat 0 -100px; }

#portfolio-nav a.foldens:link, #portfolio-nav a.foldens:visited { background:url(../nav/gallery/foldens.png) no-repeat 0 0; }
#portfolio-nav a.foldens:hover, #portfolio-nav a.foldens:active { background:url(../nav/gallery/foldens.png) no-repeat 0 -100px; }
#portfolio-nav a.foldens-on:link, #portfolio-nav a.foldens-on:visited { background:url(../nav/gallery/foldens.png) no-repeat 0 -100px; }

#portfolio-video {
	position: relative;
	width:640px;
	height:510px;
	margin:0 auto;
	padding:90px 80px 0 80px;
	text-align:center;
	background:url(../bg/portfolio-video.png) no-repeat top center;
	}
	
#mygallery h1 {
	font-size: 30px;
	line-height: 32px;
	letter-spacing: -1px;
	color:#FFF;
	margin: 0px 0px 5px 0px;
	}

/* --------------------------- STEP CAROUSEL --------------------------- */

.stepcarousel{
	position:relative;
	margin:0 auto;
	overflow:scroll;
	width:1000px;
	height:680px;
	}

.stepcarousel .belt{
	position:absolute;
	left:0;
	top:0;
	}

.stepcarousel .panel{
	float:left;
	overflow:hidden;
	margin:0 auto;
	text-align:center;
	width:1000px;
	}
	
.pagination {
	width:250px;
	height:30px;
	text-align:center;
	margin:0 auto;
	padding:0 0 20px 0;
}

/* --------------------------- CONTACT --------------------------- */

#contact-info {
	width:460px;
	float:left;
	margin:0 0 50px 0;
	padding:0;
}

#contact-form {
	width:400px;
	float:right;
	margin:0;
	padding:0;
}

#contact-icon {
	width:185px;
	height:30px;
	margin:10px 0;
	padding:10px 0px 0px 45px;
	overflow:hidden;
}

#contact-icon p {
	font-size:14px;
	line-height:20px;
	font-weight:bold;
	margin:0px!important;
	padding:0;
}

/* --------------------------- CLASSES --------------------------- */

.left {float: left;}
.right {float: right;}

/* --------------------------- RULES --------------------------- */

.rule { background:#666; width:100%; height:1px; margin:3px 0px 10px 0px; clear:both;	}

/* --------------------------- SPACERS --------------------------- */

#clear 		{ height:1px;	width:100%; clear:both; }
#space-five 	{ height:5px;	width:100%; clear:both; }	
#space-ten		{ height:10px;	width:100%; clear:both; }
#space-twenty	{ height:20px;	width:100%; clear:both; }
#space-thirty	{ height:30px;	width:100%; clear:both; }
#space-forty	{ height:40px;	width:100%; clear:both; }
#space-fifty	{ height:50px;	width:100%; clear:both; }
#space-sixty	{ height:60px;	width:100%; clear:both; }
#space-seventy	{ height:70px;	width:100%; clear:both; }
#space-eighty	{ height:80px;	width:100%; clear:both; }
#space-ninety	{ height:90px;	width:100%; clear:both; }
#space-hundred 	{ height:100px;	width:100%; clear:both; }

#space-two-thousand 	{ height:2000px;	width:100%; clear:both; }
	
/* --------------------------- COLOURS --------------------------- */	
	
.white	{ color:#FFF; }
.black	{ color:#000; }
.orange	{ color:#F30; }
.blue	{ color:#09F; }
.grey	{ color:#999; }

.bold {
	color:#F30;
	
	font-weight:bold;}