/*
Designer/Coder: Danny Halarewich
Email: Danny@Halarewich.com

Please feel free to dissect and learn from my work, but don't steal it.
You can use some of my techniques which I have learned from others as well,
but please don't directly rip it off. Learn how to use CSS yourself.
You reap what you sow.
*/


body {
	font: normal small "trebuchet ms", verdana, sans-serif;
	color: #777;
	background: #fff url(i/bg.jpg) 0 98px repeat-x;
	margin: 0;
	padding: 0;
}

* html body {
  font-size: x-small; /* for IE5/Win */
  f\ont-size: small; /* for other IE versions */
}


#container {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}


#toplevel {
    /*margin: 0;
	padding: 0;*/
}

    #toplevel  {
	top: 100px;
        display: block;
        width: 100%;
        height: 90px;
        background: #fff url(images/banner_bg.jpg) top left; 
    		overflow: hidden;
	}

	#toplevel h1 {
		color: #FFFFFF;
		font-size: 2.5em;
		margin-left: 20px;
	}
	
	#toplevel h3 {
		color: #999999;
		font-size: 1em;
		margin-left: 30px;
		margin-top: -10px;
	}

    #navigation {
	position: absolute;
	top: 70px;
	color: #000000;
    	height: 122px;
	width: 500px;
	z-index: 100;
    }

#navigation a {
	color: #006600;
	text-decoration: none;
}

#header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background: transparent url(i/banner_bg.jpg) top left no-repeat;
	margin: 0;
	padding: 0;
    	letter-spacing : -10000em;      /* Malarkey Image Replacement, great work! */
		text-indent: -999em;			/* Fixes first letter of anchor appearing in IE & Opera */
		overflow: hidden;
}
    #header p {     /*Fixes Opera */
    	letter-spacing : -10000em;
		text-indent: -999em;
		overflow: hidden;
		margin: 0;
	    padding: 0;
		}




#wrapper {
	width: 75%;
	margin: 0;
	padding: 0 0 40px 0;
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
}

/* ~~~~easy clearing~~~~ */
#wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	}
/*\*/
#wrapper
	{
	display: block;
	}
/* ~~~~end easy clearing~~~~ */


#content_wrapper {
	float: left;
	width: 100%;
}

    #content {
    	margin: 0 207px 0 0;
    	padding: 0 30px;
    }


#sidebar {
	float: right;
	width: 187px;
	/*background: #FFF49E;*/
	background: #FFFFFF;
	color: #827B2B;
	font-size: 90%;
	padding: 0 10px;
	margin-left: -100%;
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important;
}

#content p {
	margin-left: 35px;
	font-size: .85em;
	font-family: 'trebuchet ms', verdana, sans-serif;
}

#content h3 {
	margin-left: 20px;
	font-size: 1.5em;
}

* html #sidebar {margin-left: -207px;}


#footer {
	clear: both;
	width: 100%;
	height: 28px;
	background: transparent url(i/footer_bg.gif) top left repeat-x;
	margin: 0;
	padding: 12px 0 0 0;
}


/* ~~~~~~~~~~~ Typography ~~~~~~~~~~~~~ */
h2 {
	color: #72A825;
	font-size: 1.5em;
	font: bold 200% 'trebuchet ms',verdana, sans-serif;
	letter-spacing: -.05em;
	margin: 10px 0 0 0;
	padding: 0;
}

h3 {
    color: #72A825;
    font: bold 170% 'trebuchet ms',verdana, sans-serif;
	letter-spacing: -.05em;
	margin: 30px 0 0 0;
	padding: 0;
	margin-left: 30px;
}

h4 {
    color: #5D6FB1;
    font: bold 100% 'trebuchet ms',verdana, sans-serif;
	margin: 10px 0 0 0;
	padding: 0;
}

#sidebar h3 {
	color: #D1C142;
	font: bold 220% 'trebuchet ms',verdana, sans-serif;
	letter-spacing: -.05em;
	margin: 10px 0 0 0;
	padding: 0;
}

p {font-size: 110%;}

#footer p {
	font-size: 90%;
	color: #B3B3B3;
	margin: 0;
	padding: 0 0 0 30px;
}

p#intro {font-size: 120%; margin:0 0 30px 0;}

.pink {color: #E75F61;}

a {color: #333333;}
a:hover {
    color: #333333;
    text-decoration: none;
}

/* ~~~~~~~~~~~ Navigation ~~~~~~~~~~~~~ */
#navigation ul {
	position: relative;
	float: right;
	top:0;
	height: 17px;
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#navigation ul li {
	float: right;
	margin: 0;
	padding: 0;
}
#navigation ul li a {
	height: 17px;
	margin: 0 10px;
	padding: 0;
							   /* Fixes first letter of anchor appearing in IE & Opera */
}

#navigation ul li#n_home a {
	width: 42px;
}
#navigation ul li#n_about a {
	width: 43px;
}
#navigation ul li#n_portfolio a {
	width: 60px;
}
#navigation ul li#n_services a {
	width: 58px;
}
#navigation ul li#n_work a {
	width: 94px;
}

#navigation ul li#n_home a:hover,
#navigation ul li#n_about a:hover,
#navigation ul li#n_services a:hover,
#navigation ul li#n_portfolio a:hover,
#navigation ul li#n_work a:hover {text-decoration: underline;}

#b_index #navigation ul li#n_home a,
#b_about #navigation ul li#n_about a,
#b_services #navigation ul li#n_services a,
#b_portfolio #navigation ul li#n_portfolio a,
#b_work #navigation ul li#n_work a {background-position: 0 -18px;}



/* ~~~~~~~~~~~ Work With Me ~~~~~~~~~~~~~ */
ol { margin-left: 10px; }

ol li { font-size: 110%; 
	margin-left: 30px;
}
ol#workwithme {
	list-style-type: none;
	margin: 30px 0 0 0;
	padding: 0;
}

ol#workwithme li {
	height: 100%;
	margin: 0;
	padding: 5px 0 35px 110px;
}

ol#workwithme li#step1 {background: transparent url(i/n1star.gif) top left no-repeat;}
ol#workwithme li#step2 {background: transparent url(i/n2star.gif) top left no-repeat;}
ol#workwithme li#step3 {background: transparent url(i/n3star.gif) top left no-repeat;}



/* ~~~~~~~~~~~ Portfolio ~~~~~~~~~~~~ */

div.foliowrap {
    float: left;
    width: 100%;
    margin: 0 0 40px 0;
}

div.folioitem {
    float: left;
    width: 100px;
    height: 150px;
    text-align: center;
    margin: 20px 10px;
    padding: 0;
    overflow: hidden; /*Fixes IE's float drop glitch */
}

div.folioitem h4 {margin: 12px 0 0 0; padding: 0; color: #666;}

div.folioitem a img {border: none; margin: 0; padding: 0;}
div.folioitem a {
    height: 100px;
    width: 100px;
    margin: 0;
    padding: 0;
}
div.folioitem a:hover {background: none;}




div.folioitem#adsense {background: transparent url(i/portfolio/adsense_reflect.jpg) 0 100px no-repeat;}
div.folioitem#bcc {background: transparent url(i/portfolio/bcc_reflect.jpg) 0 100px no-repeat;}
div.folioitem#crossfriends {background: transparent url(i/portfolio/crossfriends_reflect.jpg) 0 100px no-repeat;}
div.folioitem#electrofunk {background: transparent url(i/portfolio/electrofunk_reflect.jpg) 0 100px no-repeat;}
div.folioitem#fallwardrobe {background: transparent url(i/portfolio/fallwardrobe_reflect.jpg) 0 100px no-repeat;}
div.folioitem#korlebu {background: transparent url(i/portfolio/korlebu_reflect.jpg) 0 100px no-repeat;}
div.folioitem#linkwarrior {background: transparent url(i/portfolio/linkwarrior_reflect.jpg) 0 100px no-repeat;}
div.folioitem#oceanbay {background: transparent url(i/portfolio/oceanbay_reflect.jpg) 0 100px no-repeat;}
div.folioitem#realcss {background: transparent url(i/portfolio/realcss_reflect.jpg) 0 100px no-repeat;}
div.folioitem#simpson {background: transparent url(i/portfolio/simpson_reflect.jpg) 0 100px no-repeat;}
div.folioitem#zeema {background: transparent url(i/portfolio/zeema_reflect.jpg) 0 100px no-repeat;}
div.folioitem#halarewichv2 {background: transparent url(i/portfolio/halarewichv2_reflect.jpg) 0 100px no-repeat;}
div.folioitem#browserquirks {background: transparent url(i/portfolio/browserquirks_reflect.jpg) 0 100px no-repeat;}


/* ~~~~~~~~~~~ Contact Form ~~~~~~~~~~~~ */

div#contactwrapper {
    width: 100%;
    margin: 40px 0 0 0;
}

form#contactform dl dd input, form#contactform dl dd textarea {
    width: 75%;
}

/* ~~~~~~~~~~~ Misc ~~~~~~~~~~~~ */

ul.checklist {
    list-style-image: url(i/check.gif);
    font-size: 110%;
    line-height: 150%;
}

dl {
    font-size: 110%;
    }
dl dt {
    color: #5D6FB1;
    font-weight: bold;
}
dl dd {
    margin: 0 0 20px 0 ;
}

#address {
	width: 250px;
	padding-bottom: 1em;
}

#address p {
	padding-bottom: 0;
	font-size: 1em;
	text-align: left;
	padding-top: 0;
	padding-left: 2em;
	margin: 0;
}