/*



Theme Name: Colin Griffinson



Theme URI: http://www.graphicallyspeaking.ca/



Description: Template by GSSI.



Version: 1.0



Author: Graphically Speaking Services Inc.



Author URI: http://www.graphicallyspeaking.ca/



Tags: 







*/







@import url("core.css");

/*	MAIN.CSS - Stylesheet for the layout

	(margins, position, width, height, and floats)

	No color or background declarations should be here. */

	

	

img.centered

{

	display: block;

	margin-left: auto;

	margin-right: auto;

}



img.alignright

{

	padding: 4px;

	margin: 0 0 2px 7px;

	display: inline;

}



img.alignleft

{

	padding: 4px;

	margin: 0 7px 2px 0;

	display: inline;

}



.alignright

{

	float: right;

}



.alignleft

{

	float: left;

}







body {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	color: #4d4d4d;

	background: #3a261f url(/images/skin/bg/colin/bg-main.jpg) center top no-repeat;

}

.section-inner { 

	width: 970px;

	margin: 0 auto;

	overflow: hidden;

	position: relative;

}



.clear {

	clear: both;

}



#wrapper {

	min-width: 970px;

	background: url(/images/skin/bg/colin/bg-main-right.png) left top repeat-x;

}

.w-w1 {

	min-width: 970px;

	background: url(/images/skin/bg/colin/bg-main-left.png) left top repeat-x;

	left: -50%;

	position: relative;

	z-index: 2;

}

.w-w2 {	

	min-width: 970px;

	background: url(/images/skin/bg/colin/bg-main.jpg) center top no-repeat;

	left: 50%;

	position: relative;

	padding-top: 125px;  /* Change to height of header */

}



/* --HEADER-- */

#header, .h-w1, .h-w2 { height: 125px; } /* Change to correct height */



.h-w2 {overflow: visible;}



#header { 

	top: 0; left: 0;

	position: absolute;

	width: 100%;

	z-index: 10;

}

	#mainnavigation, #utilities, #logo {

		position: absolute;

	}

	#mainnavigation {

		z-index: 20;

		top: 0;

		right: 0;

	}

	

		#mainnavigation li { float: left; }

			#mainnavigation li a {

				display: block;

				height: 1px;

				padding-top: 75px;

				overflow: hidden;

			}

				#mainnavigation li a:hover {

					background-position: 0 -76px;

				}

					#mainnavigation li a.active {

						background-position: 0 -152px;

					}

						#nav-about a {background: url(/images/skin/nav/nav-about.png); width: 143px;}

						#nav-painting a {background: url(/images/skin/nav/nav-painting.png); width: 160px;}

						#nav-architects a {background: url(/images/skin/nav/nav-architects.png); width: 170px;}

						#nav-building a {background: url(/images/skin/nav/nav-building.png); width: 113px;}

						#nav-home a {background: url(/images/skin/nav/nav-home.png); width: 129px;}

					

	#logo {

		top: 0px;

		left: 0px;

	}

	#utilities {

		bottom: 0px;

		right: -5px;

	}

		#utilities li { float: left; list-style: none;}

			#utilities li a {

				display: block;

				height: 1px;

				padding-top: 34px;

				overflow: hidden;				

			}

			#utilities li a:hover, #utilities li a.hover {background-position: 0 -35px;}

			

					#util-home {background: url(/images/skin/bg/util-home.png); width: 77px;}

					#util-career {background: url(/images/skin/bg/util-careers.png); width: 85px;}

                    #util-explore {background: url(/images/skin/bg/util-explore.png); width: 145px;}



					#brands-wrapper {display: none;}

					#brands {

						width: 238px;

						height: 280px;

						background:url(/images/skin/bg/bg-brand.png);

						padding: 1px;

					}

						#brands a {

							display: block;

							width: 233px;

							height: 1px;

							overflow: hidden;

						}

						#brand1 {background: url(/images/skin/bg/brand-colin.png); padding-top: 92px;}

						#brand2 {background: url(/images/skin/bg/brand-griffin.png); padding-top: 85px;}

						#brand3 {background: url(/images/skin/bg/brand-colour.png); padding-top: 94px;}

/* --CONTENT-- */

#main { 

	position: relative; 

	padding-bottom: 50px;

	/* margin-top: 125px; */

}

	#main .m-w1 {

	}

	#main .m-w2 { 

		overflow: hidden; 

	}

	#subnav, #content {

		float: left;

	}



	/* Subnav appears after content-body in markup, 

		but often is shifted to the left */

	#subnav { 

		width: 245px;

		position: relative;

		left: -725px; /* Negative width of #content */

		top: 0;

		

	}

	

		#subnav-wrapper {

			background: url(/images/skin/bg/bg-subnav.png) left top repeat-y;

			margin-bottom: 10px;

		}

		#subnav-bottom-bar {

			background: url(/images/skin/bg/bg-subnav-bottom.png) left bottom no-repeat;

		}

		#subnav-title {

			height: 40px;

			background: url(/images/skin/bg/subnav-title.png) left top no-repeat;	

			font-size: 16px;

			color: #fff;

			padding: 20px 30px;

		}

			#subnav ul {width: 195px; padding: 20px; vertical-align: bottom;}

				#subnav ul li {list-style: none; vertical-align: bottom; display: inline;}

					#subnav ul li a {

						color: #e5ca73;

						text-decoration: none;

						padding-bottom: 13px;

						display: block;

						padding-left: 10px;

						vertical-align: bottom;

						font-size: 13px;

					}

						#subnav ul li a:hover, #subnav ul li a.active, #subnav ul li.current_page_item a, #subnav ul ul li.current_page_item a {

							background: url(/images/skin/bg/subnav-arrow.png) left 4px no-repeat;

						}

						#subnav ul li.current_page_item ul a {

							background: none;

						}

						#subnav ul ul {

							margin: 0px;

							padding: 0px;

						}

							#subnav ul ul li a {

								color: #eeece0;

								font-size: 13px;

								padding-left: 40px;

							}

								#subnav ul ul li a:hover, 

								#subnav ul ul li a.active,

								#subnav ul ul li.current_page_item  a, 

								#subnav ul ul li.current_page_item a, 

								#subnav ul ul li.current_page_item a,
								
								#subnav ul ul li.current_page_parent a {

									background: url(/images/skin/bg/subnav-arrow.png) 30px 4px no-repeat;

								}

								

								#subnav ul li ul {display: none;}

								#subnav ul li.current_page_item ul, 

								#subnav ul li.current_page_parent ul, 

								#subnav ul li.current_page_ancestor ul {display: block;}

		#cta {

		

		}

			#cta a {

				width: 245px;

				display: block;

				height: 1px;

				overflow: hidden;

			}

				#cta1-visit {background: url(/images/skin/bg/colin/cta1-visit.png); padding-top: 103px;}

				#cta2-tell {background: url(/images/skin/bg/colin/cta1-tell.png); padding-top: 53px;}

				#cta3-gallery {background: url(/images/skin/bg/colin/cta1-gallery.png); padding-top: 112px;}

				#cta4-contact {background: url(/images/skin/bg/colin/cta1-contact.png); padding-top: 89px;}	

					#cta a:hover {

						background-position: -245px 0px;

					}

							

	#content {

		width: 715px;

		position: relative;

		left: 245px; /* Positive width of #subnav */

		top: 0;

		margin-left: 10px;

		display: inline;

		background-color: #fff;

	}

		#content-text {
			position: relative;
			padding: 30px;

		}

		#banner {

			width: 715px;

			height: 260px;

			background:url(/images/banners/banner1.jpg);

		}

		

		#content #overview-container {

			width: 655px;

			overflow: hidden;

		}



		#content #overview {

			width: 675px;

		}

		#content ul.overview {margin: 0px; padding: 0px;}

			#content ul.overview li {

				background: none;

				padding: 0px;

				width: 206px;

				float: left;

				margin-right: 19px;

				height: 275px;

			}



				.overview-title {

					font-size: 14px;

					display: block;

					color: #3a281f;

					line-height: 16px;

					font-weight: bold;

				}



				.overview-title-cm {

					font-size: 14px;

					display: block;

					color: #f89921;

					line-height: 16px;

					font-weight: bold;

				}



			#content ul.overview li img {

				margin-bottom: 10px;

			}	

			#content ul.overview li p {

				font-size: .9em;

				line-height: 18px;

			}	

			#content ul.overview li a {

				text-decoration: none;

                                color: #000000;

			}
			
			#content ul.overview li a:hover {
				text-decoration:underline;
			}

			#content ul.overview li a.cm {

				text-decoration: none;

                                color: #f89921;

			}

			
/* Gallery Overview */

#content #overview1 {

			width: 675px;

		}

		#content ul.overview1 {margin: 0px; padding: 0px;}

			#content ul.overview1 li {

				background: none;

				padding: 0px;

				width: 206px;

				float: left;

				margin-right: 19px;

				height: 200px;

			}




			#content ul.overview1 li img {

				margin-bottom: 10px;

			}	

			#content ul.overview1 li p {

				font-size: .9em;

				line-height: 18px;

			}	

			#content ul.overview1 li a {

				text-decoration: none;

                                color: #000000;

			}
			
			#content ul.overview1 li a:hover {

				text-decoration: underline;

			}

			#content ul.overview1 li a.cm {

				text-decoration: none;

                                color: #f89921;

			}


/* --FOOTER-- */

#content #footer { 

	background-color: #e0e0e0;

	padding: 10px 25px;

	font-size: 11px;

	color: #808080;

}



#content #footer a {color: #808080;text-decoration: none;}	

#content #footer a:hover {text-decoration: underline;}

	

	#copyright {float: left;}

	#credit {float: right;}



/* STICKY FOOTERS: Uncomment to enable */

/*

html,body {	height:100%; }

#wrapper { min-height: 100%; position: relative; }

#footer { 

	position: absolute; bottom: 0; left: 0; width: 100%; 

	height: 60px; 

}

#main { padding-bottom: 60px; }

*/

/* END STICKY FOOTERS */

.slideshowlink {
display:none;
}
.piclenselink {
display:none;
}