@charset "UTF-8";
/* CSS Document */

/*
	1.	Globals
	2.	Navigation 
	3.  Homepage
	4.	Wrapper(s)
	5.  Professional Info
	6.  Web Design
	7.  Logos and Vectors
	8.  Blog
	9. CRM
	10. Contact
	11. Personal Info
	
	
	----------------------------------------------------------------------------
	(1) Globals
	--------------------------------------------------------------------------*/

body {background-image:url(../img/background.png); background-repeat:repeat-y; background-position:left; background-color:#f5f4f0; margin:0; padding:0;}

p {font-family:Helvetica, Futura, Arial, sans-serif; line-height:18px; font-size:10px; color:#868686; margin:0px;}

a {font-family:Helvetica, Futura, Arial, sans-serif; font-size:10px; color:#868686; text-decoration:none; line-height:0px;}

a:hover {color:#333;}

a:active {text-decoration:underline;}

h1 {font-family:Helvetica, Futura, Arial, sans-serif; font-size:18px; color:#868686; text-decoration:none; line-height:25px; margin:0px; font-weight:lighter; text-indent:-1000em;}

h2 {font-family:Helvetica, Futura, Arial, sans-serif; font-size:14px; font-style:italic; color:#868686; text-decoration:none; line-height:25px; margin:0px; font-weight:lighter;}

#bg_img{position:relative; float:left; margin:0px;; width:1200px; height:400px; background-image:url(../img/bg-main.png); background-repeat:no-repeat; background-position:top left;}

#logo {
	position:absolute;
	left: 126px;
	top: 75px;
	width: 176px;
	height: 42px;
	z-index:1;
}

#tri {
	position:absolute;
	width: 42px;
	height: 42px;
	left: 286px;
	top: 46px;
	z-index:2;
}

ul {margin:0px; padding:0px; list-style-type:none; display:block;}

li {margin:0px; padding:0px; list-style-type:none;}

strong {font-weight:bold;}

.columns {width:227px; float:left; margin-right:10px;}

#info {
	position:absolute;
	width: 201px;
	left: -237px;
	top: 120px;
}

.portfolio {float:left; width:226px; height:166px; border-style:solid; border-color:#CCC; border-width:1px; margin-bottom:10px; margin-right:9px;}
.portfolio:hover {background-position:0px -166px;}


	/*----------------------------------------------------------------------------
	(2) Navigation
	--------------------------------------------------------------------------*/

#nav {
	float:left;
	text-align:left;
	width:474px;
	height:100px;
	margin-bottom:20px;
}


.nav {
	float:left;
	text-align:left;
	width:227px;
	margin-right:10px;
	height:25px;
}

	/* ----------------------------------------------------------------------------
	(3) Homepage
	--------------------------------------------------------------------------*/
	
#home_image {float:left; width:399px; height:327px; background-image:url(../img/graphic_design_quote.png); background-repeat:no-repeat; position:relative;}

#bestwebsites {
	position:absolute;
	width: 201px;
	height: 42px;
	left: -23px;
	bottom: -79px;
	text-align:left;
	z-index:3;
}

#bestwebsites_type {margin-left:23px;}

#cssdose {
	position:absolute;
	width: 201px;
	height: 42px;
	left: 238px;
	bottom: -102px;
	text-align: left;
	z-index:3;
}

#cssdosetext {margin-top:-1px;}

#cssdownunder {
	position:absolute;
	width: 202px;
	height: 140px;
	left: -27px;
	bottom: -253px;
	text-align:center;
	z-index:3;
}

#downundertext {margin:0px 0px 0px -85px;}	

#home_quote {
	position:absolute;
	width: 226px;
	left: -238px;
	top: 272px;
	height: 252px;
	background-image:url(../img/graphic_design.png);
	background-repeat:no-repeat;
}


	/* ----------------------------------------------------------------------------
	(4) Wrapper(s)
	--------------------------------------------------------------------------*/

#wrapper {
	position:absolute;
	left:363px;
	top:20px;
	text-align:left;
	width:711px;
}

#proinfo {
	position:relative;

}

#wrapper_personal {
	position:absolute;
	width: 515px;
	height: 758px;
	left: -240px;
	top: 119px;
}

#contact_wrapper {
	position:absolute;
	width: 820px;
	height: 758px;
	left: -215px;
	top: 119px;
}



	/* ----------------------------------------------------------------------------
	(5) Professional Info
	--------------------------------------------------------------------------*/

#professional_info {float:left; width:720px; margin-bottom:20px; }

#olly {float:left; border-style:solid; border-color:#CCC; border-width:1px; width:225px; height:251px; margin-bottom:90px;}

#kudos {
	position:absolute;
	width: 441px;
	height: 89px;
	left: -237px;
	top: 383px;
	background-image:url(../img/quote_1.png);
	background-repeat:no-repeat;
}

#quotemarks_kudos {
	position:absolute;
	width:27px;
	height:178px;
	background-image:url(../img/quote_marks.png);
	left: -142px;
	top: 338px;
}


	/* ----------------------------------------------------------------------------
	(6) Web Design
	--------------------------------------------------------------------------*/

#bq {background-image:url(../img/web_images/bq.png);}

#ssfm {background-image:url(../img/web_images/ssfm.png);}

#clinique {background-image:url(../img/web_images/clinique.png);}

#abc {background-image:url(../img/web_images/abc.png);}

#crispin {background-image:url(../img/web_images/crispin.png);}

#parkstone {background-image:url(../img/web_images/parkstone.png);}

#technix {background-image:url(../img/web_images/technix.png);}

#onet {background-image:url(../img/web_images/onet.png);}

#cdlm {background-image:url(../img/web_images/cdlm.png);}

#jml {background-image:url(../img/web_images/jml.png);}

#cbg {background-image:url(../img/web_images/cbg.png);}

	
	/* ----------------------------------------------------------------------------
	(7) Logos And Vectors
	--------------------------------------------------------------------------*/


#logos_vectors {float:left; width:775px; margin-bottom:20px; }

	/* ----------------------------------------------------------------------------
	(8) Blog
	--------------------------------------------------------------------------*/

#blogcontent { float:left; text-align:left; width:700px; display:inline; margin-bottom:25px;}

.blog-image {float:left; margin-right:12px; border-style:solid; border-color:#CCC; border-width:1px;}


	/* ----------------------------------------------------------------------------
	(9) CRM
	--------------------------------------------------------------------------*/

#aveda_crm {background-image:url(../img/crm/aveda.png);}

#bobbi_crm1 {background-image:url(../img/crm/bobbi1.png);}

#bobbi_crm2 {background-image:url(../img/crm/bobbi2.png);}

#cl_crm1 {background-image:url(../img/crm/cl1.png);}

#cl_crm2 {background-image:url(../img/crm/cl2.png);}

#origins_crm {background-image:url(../img/crm/origins.png);}

#ssfm_crm1 {background-image:url(../img/crm/ssfm1.png);}

#ssfm_crm2 {background-image:url(../img/crm/ssfm2.png);}


	/* ----------------------------------------------------------------------------
	(10) Contact
	--------------------------------------------------------------------------*/


#contact {float:left; width:748px; height:412px; background-image:url(../img/contact.png); background-repeat:no-repeat;}


	/* ----------------------------------------------------------------------------
	(11) Personal Info
	--------------------------------------------------------------------------*/

#personal_image_main{width:466px; height:312px; float:left; border-style:solid; border-color:#CCC; border-width:1px; margin-bottom:12px;}

#personal_image_sub{width:226px; height:123px; float:left; border-style:solid; border-color:#CCC; border-width:1px; margin-bottom:6px;}

#personal_column {margin-right:13px;}