/**************************************************************
 * fn: style.css
 * by: danConcepcion
 * dt: 25OCT09@0958h
 * re: darimatt digital deigns ::>> 
 * ----------------------------------------------------------- 
 * SECTIONS: Structure/Layout, Typography, Links, Misc.
 **************************************************************/

/* >>>Resets -------------------------------------------------*/
* {margin:0; padding:0;} /* reset everything! */
blockquote:before,blockquote:after,q:before,q:after {content: "";}
blockquote,q {quotes: "" "";}
caption,th,td {text-align: left;font-weight: normal;}
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,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; font-weight:inherit; font-style:inherit; font-family:inherit;}
:focus { outline: 0; } /* remember to define focus styles! */
ol,ul { list-style: none; }
table {border-collapse: separate;border-spacing: 0;} /* tables still need 'cellspacing="0"' in the markup */

/* >>>Structure/Layout -----------------------------------------------*/
article { border:1px solid #ccc; float:left; margin:0 20px; width:500px; }
aside { background:#fff; float:left; width:250px; }
	aside .bg-blue { background:url(../images/bg_blue-jewel.jpg) 0 0 no-repeat; height:44px; padding-top:40px; width:228px; }
		aside .bg-blue h2 { position:relative;left:-3px;top:-11px; }
	aside .bg-red { background:url(../images/bg_red-jewel.jpg) 0 0 no-repeat; height:74px; padding-top:10px; width:228px; }
		aside .bg-red h2 { position:relative;left:-3px;top:4px; }
	aside .bg-green { background:url(../images/bg_green-jewel.jpg) 0 0 no-repeat; height:44px; padding-top:40px ; width:228px; }
		aside .bg-green h2 { position:relative;left:2px;top:-14px; }
	aside ul { margin: 10px 0 25px 0; padding-left:35px; }
	aside ul li { line-height:19px; }
body { background:#fff; }
#content { border:1px solid #487cb5; border-bottom:0; border-top:0; color:#f00; display:block; margin:0px auto 0 auto;  padding-top:10px; width:800px;}
footer { border:1px solid #487cb5; border-top:0;display:block; height:45px; margin:0 auto; width:800px; }
	footer ul { padding:10px 10px 0 0; }
header { border-left:1px solid #487cb5; border-right:1px solid #487cb5;display:block; height:163px; margin:0 auto; width:800px; }
#main-content { float:left; padding:0 20px 20px 25px; width:502px; }
nav { background: url(../images/bg_nav.jpg) 0 0 no-repeat;border-left:1px solid #487cb5; border-right:1px solid #487cb5; display:block; height:45px; margin:0 auto; width:800px; }
	nav ul { float:right; padding:10px 10px 0 0; }
section { display:block; margin:0 auto; width:800px; }
.wrapper { height:100%; margin:0; padding:0; width:800px; }

/* >>>Typography -----------------------------------------------*/
/* 	16pt (browser default) divide by 10pt (desired new default) = 62.5% */
/* 	So, 0.9em = 9pt, 1.0em = 10pt, 1.1em = 11pt, etc.                   */
body { font-size: 62.5%;font: "Trebuchet MS", Arial, Helvetica, sans-serif; color:#363038; }
aside { }
	aside h2 { color:#fff; font:18px "Palatino Linotype",Georgia, "Times New Roman", Times, serif;  text-align:center;  }
	aside ul { color:#660033; font:1.2em Verdana, Arial, Helvetica, sans-serif; }
footer { font:12px Geneva, Arial, Helvetica, sans-serif; text-align:center; }	
#main-content h1,#main-content h2 { color:#222; font:"Palatino Linotype",Georgia, "Times New Roman", Times, serif; margin:0 0 10px 0; }
	#main-content h1 { font-size:28px; line-height:28px; }
	#main-content h2 { font-size:20px; line-height:20px; text-transform:uppercase; }
	#main-content h1 + h2 { margin-top:-10px; }
#main-content h3,#main-content h4,
#main-content h5,#main-content h6 { color:#222; font:"Trebuchet MS", Arial, Helvetica, sans-serif; margin:0 0 10px 0; }
#main-content h3,#main-content h4 { font-style:italic; font-weight:normal; }
	#main-content h3 { font-size:18px; line-height:20px; }
	#main-content h4 { font-size:16px; line-height:18px; }
#main-content h5,#main-content h6 {  font-weight:bold; display:inline; }	
	#main-content h5 { font-size:14px; line-height:14px; }
	#main-content h6 { font-size:13px; line-height:13px; font-style:italic; }

p { color:#3d3a3c; font:1.2em "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0 0 10px 0; }

#main-content { color:#8C8483; font:normal normal 1.1em "Trebuchet MS", Arial, Helvetica, sans-serif; }
	#main-content ul { color:#3d3a3c; list-style-type:disc; margin:10px 0 10px 35px; }
	#main-content h3+ul { margin-top:14px; }
nav { font:bold 13px Geneva, Arial, Helvetica, sans-serif; }

/* >>>Links -----------------------------------------------*/
a img { border:0;color:#272a5f; }

footer ul { list-style:none; position:relative;top:8px; }
	footer ul li { display:inline;  }
	footer ul li a, nav ul li a:active, nav ul li a:link, nav ul li a:visited { color:#272a5f; padding:0 7px; text-decoration:none;  }
	footer ul li a:hover { color:#000099; text-decoration:none;  }
	footer ul li a:focus { text-decoration:underline;  }
nav ul { list-style:none; }
nav .current-pg { color:#ffff00; padding:0 7px; text-decoration:underline; }
	nav ul li { display:inline;  }
	nav ul li a, nav ul li a:active, nav ul li a:link, nav ul li a:visited { color:#fff; padding:0 7px; text-decoration:none;  }
	nav ul li a:hover { color:#ffff00; text-decoration:underline;  }
	nav ul li a:focus { text-decoration:underline;  }

/* >>>Misc. -----------------------------------------------*/
.back-to-top  { font-size:9px;font-weight:bold;margin-bottom:25px;text-decoration:none;text-transform:lowercase; }
	.back-to-top:hover { text-decoration:underline; }
.content-with-border { border:1px solid #e3dedd; margin-top:5px; }
	.content-with-border p span { color:#2D306D; font:bold 22px Arial, Helvetica, sans-serif; }
.current-pg { color:#000099; padding:0 7px; text-decoration:underline; }
.no-grid-vert { border-left:0; border-right:0; } /* needed to defeat the horz scroll */
.no-grid-horz { border-bottom:0; border-top:0; } /* used so that areas align up/dn scroll */
.start-new-row { clear:both; height:1px !important; }
.two-colums div { float:left;padding:20px 10px;width:210px; }
	.two-colums div.callout { border-left:1px solid #487CB5;padding-left:10px; }
	.two-colums div.add-left-border h2 { line-height:30px; padding-left:20px; text-transform:none !important; width:175px;}
#temp-email { color:#fff;font:bold italic 16px "Times New Roman", Times, serif;position:relative;left:480px;top:-30px;}
.ul-2-column{ float:left;width:230px; }


/* >>>Portfolio -----------------------------------------*/
#pileOpics {height:500px;left:30px;position:relative;width:500px;}
#pp1,#pp2,#pp3,#pp4,#pp5,#pp6,#pp7 { border:1px solid #000;}
#pp1 img,#pp2 img,#pp3 img,#pp4 img,#pp5 img,#pp6 img,#pp7 img { border:2px solid #fff;margin-bottom:-4px;}
	#pp1 {position:absolute;top:290px;left:60px;} /* sm_artist.jpg */ 
	#pp2 {position:absolute;top:250px;left:300px;} /* sm_brownbagit.jpg */ 
	#pp3 {position:absolute;top:200px;left:170px;} /* sm_business.jpg */ 
	#pp4 {position:absolute;top:100px;left:250px;} /* sm_consierge.jpg */ 
	#pp5 {position:absolute;top:175px;left:90px;} /* sm_financial.jpg */ 
	#pp6 {position:absolute;top:85px;left:145px;} /* sm_fitness.jpg */ 
	#pp7 {position:absolute;top:25px;left:270px;} /* sm_holistic.jpg */
	
#lg_pp1,#lg_pp2,#lg_pp3,#lg_pp4,#lg_pp5,#lg_pp6,#lg_pp7 { border:2px solid #000;display:none; position:absolute;top:230px;}
#lg_pp1 img,#lg_pp2 img,#lg_pp3 img,#lg_pp4 img,#lg_pp5 img,#lg_pp6 img,#lg_pp7 img{ border:5px solid #fff;margin-bottom:-4px;}
	#lg_pp1 {left:100px;}
	#lg_pp2 {left:200px;}
	#lg_pp3 {left:100px;}
	#lg_pp4 {left:200px;}
	#lg_pp5 {left:100px;}
	#lg_pp6 {left:150px;}
	#lg_pp7 {left:200px;}
.posRel { position:relative;}