/*******************************************************************
* Project	Gratl & Company
* Author	Clayton Misura
* Website	http://www.claytonmisura.com
********************************************************************


/* 1. Resets :: http://meyerweb.com
********************************************************************
********************************************************************/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
	{
    margin:				0; 
    padding:			0; 
    border:				0; 
    outline:			0; 
    vertical-align:		baseline; 
    background:			transparent;
	}

body
	{
    line-height:		1;
	}

ol, ul
	{
    list-style:			none;
	}

blockquote, q
	{
    quotes:				none;
	}

:focus
	{
    outline:			0;
	}

ins
	{
    text-decoration:	none;
	}

del
	{
    text-decoration:	line-through;
	}

table
	{
    border-collapse:	collapse; 
    border-spacing:		0;
	}

a, a:hover, a:visited
	{
	border: 0px;
	text-decoration: 	none;
	}
	
/* 2. Global Elements
********************************************************************
********************************************************************/
html 
	{ 
	font-size:			14px; 
	}
	
body,html
	{
	font-family:  		"Times New Roman", Times, Georgia, serif;
	line-height: 		1.5;
	text-align: 		center;
	color: 				#41413C;
	background:			#7D7D73 url(../images/img.body.repeatnone.png) no-repeat center 0;
	}


a, a:link
	{
	text-decoration: 	none;
	color: 				#000;
	}

a:hover
	{
	color: 				#F26218;
	text-decoration: 	underline;
	}

h1, h2
	{
	font-size: 			14px !important;
	}

#wrapper
	{
	width:				100%;
	height: 			100%; 	
	} 

#container
	{
	position: 			relative;
	width: 				940px;
	min-height: 		901px;
	margin: 			0px auto;
	padding: 			0px 20px;
	text-align: 		left;
	background: 		url(../images/img.container.repeaty.png) repeat-y 0 0;
	}

.biocontainer
	{
	min-height: 		901px;
	}

.bottomline, .topline
	{
	position: 			absolute;
	left: 				0;
	width: 				980px;
	height: 			1px;
	background: 		url(../images/img.horizon.grid.line.png) no-repeat 0 0;
	}

.bottomline
	{
	bottom: 			0px;
	}

.topline
	{
	top: 				21px;
	}

#head, #banner, #indexcntnt, #subcntnt,
#subbnner, #approachcntnt
	{
	display: 			block;
	}

#head
	{
	position: 			relative;
	width: 				940px;
	height: 			200px;
	}

ul.fontResizer
	{
	position: 			absolute;
	top:				1px;
	left: 				1px;
	width: 				62px;
	height: 			20px;
	display:			none; /* Hide For Now */
	}

ul.fontResizer li
	{
	width: 				20px;
	height: 			20px;
	float: 				left;
	display: 			inline;
	margin-right: 		1px;
	}

ul.fontResizer li.last
	{
	margin-right: 		0px !important;
	}

ul.fontResizer li a
	{
	width: 				20px;
	height: 			20px;
	display: 			block;
	text-decoration: 	none;
	}

a.smallFont
	{
	background: 		url(../images/img.fontsizer.matrix.gif) no-repeat 0 0;
	}

a.smallFont:hover
	{
	background-position: 0 -21px;
	}

a.medFont
	{
	background: 		url(../images/img.fontsizer.matrix.gif) no-repeat -21px 0;
	}

a.medFont:hover
	{
	background-position: -21px -21px;
	}

a.largeFont
	{
	background: 		url(../images/img.fontsizer.matrix.gif) no-repeat -42px 0;
	}

a.largeFont:hover
	{
	background-position: -42px -21px;
	}

h1#logo
	{
	position: 			absolute;
	top:				71px;
	left: 				17px;
	width: 				273px;
	height: 			20px;
	}

ul#menu
	{
	position: 			absolute;
	left: 				0;
	bottom: 			0;
	width: 				639px;
	height: 			51px;
	}

ul#menu li
	{
	width: 				159px;
	height: 			51px;
	float: 				left;
	display: 			inline;
	margin-right: 		1px;
	}

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

ul#menu li a
	{
	width: 				159px;
	height: 			51px;
	line-height: 		51px;
	display: 			block;
	text-decoration: 	none;
	}

a#approach
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat 0 0;
	}

a#approach:hover, a#approach.hover
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat 0 -51px;
	}

a#approach.selected, a#approach.selected:hover
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat 0 -102px;
	}

a#practice
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -160px 0;
	}

a#practice:hover, a#practice.hover
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -160px -51px;
	}

a#practice.selected, a#practice.selected:hover
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -160px -102px;
	}

a#biography
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -320px 0;
	}

a#biography:hover, a#biography.hover 
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -320px -51px;
	}

a#biography.selected, a#biography.selected:hover
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -320px -102px;
	}

a#contact
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -480px 0;
	}

a#contact:hover, a#contact.hover 
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -480px -51px;
	}

a#contact.selected, a#contact.selected:hover
	{
	background: 		url(../images/img.menu.matrix.png) no-repeat -480px -102px;
	}

#banner
	{
	position: 			relative;
	width: 				940px;
	height: 			340px;
	background:			url(../images/img.horizon.grid.line.png) no-repeat 0 bottom;
	}
	
#subbnner
	{
	width: 				940px;
	height: 			109px;
	margin-bottom: 		1px;
	}

/* 2. Slideshow
********************************************************************
********************************************************************/

.slider 
	{
	position: 		relative;
	}
	
.slidemenu
	{
	position: 		absolute;
	right: 			0;
	bottom: 		6px;
	width: 			460px;
	height: 		50px;
	background: 	url(../images/img.slider.menu.matte.png) no-repeat right 0;
	display:		none; /* Hide For Now */
	}
	
#slider ul, 
#slider li
	{
	margin:				0;
	padding:			0;
	list-style:			none;
	}
	
#slider li
	{ 
	width:				940px;
	height:				319px;
	overflow:			hidden; 
	}
	
#prevBtn, 
#nextBtn
	{
	position:			absolute;
	bottom: 			41px;
	width:				20px;
	height:				10px;
	display:			/*block*/ none; /*Hide For Now*/
	z-index:			1000;
	}

#prevBtn
	{
	right:				100px;
	}
		
#nextBtn
	{ 
	right: 				20px;
	}
														
#prevBtn a, 
#nextBtn a
	{  
	position:			relative;
	width:				20px;
	height:				10px;
	display:			/*block*/ none; /*Hide For Now*/
	}

#prevBtn a
	{
	background:			url(../images/btn.previous.arrow.png) no-repeat 0 0;
	}
			
#nextBtn a
	{ 
	background:			url(../images/btn.next.arrow.png) no-repeat 0 0;	
	}	
	

/* 3. Index Content
********************************************************************
********************************************************************/

#indexcntnt
	{
	position: 			relative;
	width: 				939px;
	height: 			220px;
	margin-top: 		20px;
	}

.pod
	{
	position: 			relative;
	width: 				299px;
	height: 			220px;
	float: 				left;
	display: 			inline;
	margin-right: 		21px;		
	}
	
.pod.last
	{
	margin-right: 		0px !important;
	}

.pod h2
	{
	position: 	 		absolute;
	top:				0;
	left: 				0;
	width: 				299px;
	height: 			30px;
	}

.pod .podcntnt
	{
	position: 			absolute;
	left: 				0;
	top: 				50px;
	width: 				259px;
	min-height: 		130px;
	height: 			auto;
	padding: 			20px;
	background: 		url(../images/img.pod.repeat.png) repeat 0 0;	
	}	
	
.prctceareas
	{
	list-style-image: 	url(../images/img.round.bullet.gif);
	list-style-position: inside;
	}

a.readmore, a.viewmap
	{
	width: 				70px;
	height: 			30px;
	line-height: 		30px;
	display: 			block;
	text-decoration: 	none;
	background: 		url(../images/img.index.btn.matrix.gif) no-repeat -70px 0;
	}

a.readmore, a.viewmap 
	{
	position: 			absolute !important;
	right: 				20px;
	bottom: 			20px;
	}

a.viewmap
	{
	background: 		url(../images/img.index.btn.matrix.gif) no-repeat 0 0;
	}

a.readmore:hover, a.readmore.hover
	{
	background-position: -70px -30px;
	}

a.viewmap:hover, a.viewmap.hover 
	{
	background-position:  0px -30px;
	}

/* 4. Approach Content
********************************************************************
********************************************************************/

#approachcntnt
	{
	position: 			relative;
	width: 				940px;
	min-height: 		329px;
	}

.submenu, .submenu_prac
	{
	position: 			absolute;
	top:				0;
	left: 				-20px;
	width: 				319px;
	height: 			89px;
	}

.submenu_prac
	{
	height: 			119px;
	}

.submenu li,
.submenu_prac li
	{
	width: 				319px;
	height: 			29px;
	margin-bottom: 		1px;
	}

.submenu li a,
.submenu_prac li a
	{
	width: 				319px;
	height: 			29px;
	line-height: 		29px;
	display: 			block;
	text-decoration: 	none !important;
	}

a.consult
	{
	background: 		url(../images/img.approach.menu.matrix.png) no-repeat 0 -89px;
	}

a.consult:hover, 
a.consult.current, a.consult.current:hover
	{
	background-position: 0 0;
	}

a.believe
	{
	background: 		url(../images/img.approach.menu.matrix.png) no-repeat 0 -119px;
	}

a.believe:hover,
a.believe.current, a.believe.current:hover
	{
	background-position: 0 -30px !important;
	}

a.challenge
	{
	background: 		url(../images/img.approach.menu.matrix.png) no-repeat 0 -149px;
	}

a.challenge:hover,	
a.challenge.current, a.challenge.current:hover
	{
	background-position: 0 -60px;
	}
	
div.tabPanes > div { display: none; } /* initially all panes are hidden */

.approachpod /* Combine pods */
	{
	position: 			absolute;
	top:				20px;
	right: 				0;
	width: 				579px;
	min-height: 		249px;
	height: 			auto;
	max-height: 		619px;
	padding: 			41px 20px 20px 20px;
	overflow: 			hidden;
	background: 		url(../images/img.pod.repeat.png) repeat 0 0;
	}

.approachpod div
	{
	min-height: 		249px;
	height: 			auto;
	max-height: 		619px;
	}

.approachpod div h2
	{
	padding-bottom: 	29px;
	}

.approachpod div p
	{
	padding-bottom: 	20px;
	}

/* 5. Biography
********************************************************************
********************************************************************/

#biocntnt
	{
	position: 			relative;
	width: 				940px;
	min-height: 		529px;
	}

.biophoto
	{
	position: 			absolute;
	top:				0;
	left: 				0;
	width: 				299px;
	height: 			219px;
	}

#biopod
	{
	position: 			absolute;
	top:				20px;
	right: 				0;
	width: 				579px;
	height: 			469px;
	height: 			auto;
	padding: 			41px 20px 20px 20px;
	background: 		url(../images/img.pod.repeat.png) repeat 0 0;
	}

#biopod h2
	{
	padding-bottom: 	29px;
	}

#biopod p
	{
	padding-bottom: 	20px;
	}

/* 5. Practice
********************************************************************
********************************************************************/

.constitutional
	{
	background: 		url(../images/img.practice.menu.matrix.png) no-repeat 0 -119px;
	}

a.constitutional:hover, 
a.constitutional.current, a.constitutional.current:hover
	{
	background-position: 0 0;
	}

a.criminal
	{
	background: 		url(../images/img.practice.menu.matrix.png) no-repeat 0 -149px;
	}

a.criminal:hover,
a.criminal.current, a.criminal.current:hover
	{
	background-position: 0 -30px !important;
	}

a.environmental
	{
	background: 		url(../images/img.practice.menu.matrix.png) no-repeat 0 -179px;
	}

a.environmental:hover,	
a.environmental.current, a.environmental.current:hover
	{
	background-position: 0 -60px;
	}

a.firstnations
	{
	background: 		url(../images/img.practice.menu.matrix.png) no-repeat 0 -209px;
	}

a.firstnations:hover,	
a.firstnations.current, a.firstnations.current:hover
	{
	background-position: 0 -90px;
	}





/* 6. Contact
********************************************************************
********************************************************************/

#contactcntnt
	{
	position: 			relative;
	width: 				939px;
	min-height: 		380px;
	margin-top: 		20px;
	}

.map
	{
	position: 			absolute;
	top:				0;
	left: 				0;
	width: 				619px;
	height: 			320px;
	}

#contactpod
	{
	position: 			absolute;
	top:				0;
	right: 				0;
	width: 				259px;
	min-height: 		54px;
	height: 			auto;
	max-height: 		89px;
	padding: 			15px 20px 20px 20px;
	background: 		url(../images/img.pod.repeat.png) repeat 0 0;
	}


	
/* END Footer
********************************************************************
********************************************************************/
	
#footer
	{
	position: 			absolute;
	left: 				0;
	bottom: 			-45px;
	width: 				980px;
	font-size: 			12px;
	}

#footer ul
	{
	width: 				440px;
	height: 			20px;
	margin: 			0 auto;
	list-style: 		none;
	text-align: 		center;
	}

#footer ul li
	{
	margin-right: 		5px;
	float: 				left;
	display: 			inline;
	}

#footer ul li span
	{
	color: 				#FFF;
	}