* {margin: 0; padding: 0;}

html, body { /*styling the html tag allows for 100% height */
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background: #1b1b1b url(../images/background.jpg) repeat-x scroll center top;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	text-align: left;
}

#page-container { width: 996px; margin: 0 auto; overflow:hidden; background:url(../images/backgroundbanner.jpg) no-repeat scroll center top }

#header {margin:0; height: 210px;}

#myid { float: left; width: 177px; float: left; margin-top:29px; background:#252525; padding: 20px 10px 20px 10px; clear: left; }

#social {
	font-size: 0.7em; 
	font-weight: 400;
	float: right;
	display: inline;
	margin: 32px 0 0 280px;
}
#social img { padding-left: 10px; border: none; height: 20px; }

#logo { width: 137px; height: 32px; margin-top:32px; display:inline; float: left; margin-left: 10px;}

/* Navigation Text*/
/* MAIN NAV PLACEMENT*/
#navcontainer { float:left; width: 230px; margin-left: 2px; margin-top: 30px;font-size:0.8em;}
ul#navlist { margin-left: 0; padding-left: 0; white-space: nowrap; }
#navlist li { display: inline; list-style-type: none; }
#navlist a { padding: 3px 11px; font-weight: 400; }
#navlist a:link, #navlist a:visited {color: #fff;  background-color: #3d3d3d; text-decoration: none;}
#navlist a:hover { color: #fff; background-color: #343434; text-decoration: none; }
#navlist #active a { background-color: #f7f7f7; text-decoration: none; color:#333; }


#clientnavcontainer { float:right; width: 100px; margin-top: 30px; font-size:0.8em;}
ul#clientnav {margin-left: 0; padding-left: 0; white-space: nowrap; float:right; }
#clientnav li { display: inline; list-style-type: none; }
#clientnav a { padding: 3px 11px; }
#clientnav a:link, #clientnav a:visited {color: #fff; background-color: #3d3d3d; text-decoration: none;}
#clientnav a:hover { color: #fff; background-color: #343434; text-decoration: none; }
#clientnav #active a { background-color: #f7f7f7; text-decoration: none; color:#333; }


/*contents*/

#main-content { width: 990px; margin-top: 20px; height: auto;}

#content {
	padding: 0; margin: 0 auto;
	width: 996px;
	float: left;
	display:inline;
}

#content img { border:1px thin #000; float:left; }
#content a:link img, a:visited img, a:hover img { border:1px thin #000; }
#subtitle { width:182px; background-color:#333; padding: 5px 0 5px 0; float:left; clear: left; font-size:11px; text-indent: 10px; color:#FFF;}
#subtitle a:link {color: #333; }
#subtitle a:visited {color: #333;}
#subtitle a:hover {color: #666;}
#subtitle a:active {color: #333;}

#thumb { display:inline; float:left; margin: 0 5px 5px 5px; width: 182px; }

#content2 {
	display: block;
	float: left;
	width: 900px;
	/*min-height: 415px;*/
	margin-top: 20px;
	padding-bottom: 100px;
	margin-left: 7px;
	text-align: center;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

#marker {
	float: left;
	width: 23px;
	background: url(../images/leftarrow);
	margin-top:40px; 
	height: 45px;
	}
	
#typography {
	float: left;
	width: 950px;
	margin: 5px 0 35px 25px;
}

		
#footer {
	clear: left;
	width: 996px;
	height: 50px;
	padding-top: 30px;
	border-top: 1px solid #333; }
	

#footer h1 { font-size: 0.7em; padding-left: 10px; }


/* Navigation Footer*/
#navcontainer-foot { margin: -15px 0 3px 0; padding: 0; height: 10px; }
#navcontainer-foot ul { border: 0; margin: 0; padding: 0;  llist-style-type: none; text-align: left;  }
#navcontainer-foot ul li { float: right; text-align: left; padding: 0; margin: 0; margin-right: 8px; text-decoration: none; list-style-type: none; }
#navcontainer-foot ul li a { height: 20px; color: #aeaeae; text-decoration: none; display: block; font-family: , Helvetica, "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif; font-size: 0.6em; text-align:left; }

.block {
	display: block;
}

/*Type Properties*/

h1 {
	font-size: 0.9em;
	color: #fff;
	font-weight: 400;
}


/*Content heading*/
#typography h1 {
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: lighter;
	font-style: normal;
	border-bottom: 1px dotted #999;
	text-indent: 2pt;
	color: #e7e7e7;
	white-space: nowrap;
	margin-bottom: 12pt;
	margin: 0px;
	line-height: 150%;
	text-transform: uppercase;
}

#bio h1 { font-size: 1.4em; font-weight: 700; color: #FC0;}

/*Date*/

#projectnav h2 { color:#09ede7; font-size:10px;}

h2 {
	font-size: 0.8em;
	color: #fff;
	margin: 0px;
	font-weight:400;
}

h3 {
	font-size: 0.8em;
	padding: 2px 0 2px 0;
	color: #c1c1c1;
	text-indent: 10px;
	margin: 0px;
	font-weight:400;
}

h4 {
	font-size: 13px;
	padding: 6px 0 0 10px;
	color: #c1c1c1;
	margin: 0px;
	font-weight:normal;
}

/*paragraph*/

p {
	font-size: 0.8em;
	color:#bcbcbc;
	margin: 0px;
	font-weight: 400;
}

e {
	font-size: 8px;
	color:#c1c1c1;
	margin: 0px;
	font-weight: lighter;
	padding-bottom: 6px;
	padding-left: 4px;
	padding-top: 8px;
	line-height: 15px;
}


#available {color: #CF0;}

a:link {color: #ff9933; text-decoration: none;}
a:visited {text-decoration: none;color: #ff9933;}
a:hover {text-decoration: underline;color: #FFF;}
a:active {text-decoration: none;}


/****** GAL *****/
ul.gal { width: 996px; list-style: none; display: inline-block; margin-top: 5px;  height: auto;} ul {display: block;}
ul.gal li {float: left; position: relative; border: none; margin-right: 2px; height: 185px; width: 197px;}
ul.gal li img {display: block; padding-bottom: 5px;}
ul.gal li div.caption { bottom: 0px; background: #1b1b1b; padding: 5px; font-size:0.85em;}
ul.gal li div.caption h2 { margin-top: 10px; font-size:0.9em; color:#9b9b9b;}
ul.gal li div.caption p { color:#9b9b9b;}
ul.gal li:hover {}
ul.gal li:hover div.caption {display: block; background-color:#101010;}
ul.gal li:hover img {background-color:#000;}

/*- FILTER OPTIONS -*/
ul#filterOptions {
	width: 996px;
	height: 20px;
	margin: 30px 0;
	overflow: hidden;
	background:none;
	padding: 5px;
}
ul#filterOptions li { height: 20px; margin-right: 2px; display: inline-block; float: left; }
ul#filterOptions li a {
	font-size: 0.8em;
	height: 20px;
	padding: 0 20px;
	background: #202020;
	color: #e3e3e3;
	text-decoration: none;
	display: block;
}
ul#filterOptions li a:hover { background: #333333; }
ul#filterOptions li.active a { background: #F7F7F7; color:#333333; }
/*- -*/

/****** LOGO GALLERY *****/
ul.logos {list-style: none; display: inline-block; margin-top: 10px;} ul {display: block;}
ul.logos li {float: left; position: relative; border: none; margin: 7px; height: 230px; width: 315px;}
ul.logos li img {display: block;}
ul.logos li div.caption { bottom: 0px; background: #1b1b1b; padding: 5px; font-size:0.85em;}
ul.logos li div.caption h2 { margin-top: 10px; font-size:0.8em; color:#9b9b9b;}
ul.logos li div.caption p { color:#9b9b9b;}
ul.logos li:hover {}
ul.logos li:hover div.caption {display: block; background-color:#101010;}
ul.logos li:hover img {background-color:#000;}


/***** DESCRIPTION PAGE *****/
#projdes { width: 300px; margin: 10px 10px 50px 0; float:left; }
#projdes h1 { background-color: #000000; text-decoration: none; padding:10px 0 10px 10px; border-bottom: 1px solid #313131; }
#projdes p {font-size: 0.7em; background-color: #333; padding: 5px;}
#projdes img { text-align:center; float: left; }

#projcli { width: 685px; margin: 10px 0 50px 0; float:left; }
#projcli h1 { background-color: #000000; text-decoration: none; padding:10px 0 10px 10px; border-bottom: 1px solid #313131; }
#projcli p {font-size: 0.7em; background-color: #333; padding: 5px;}
#projcli img { text-align:center; float: left; }

/***** ABOUT PAGE ********/

/**aboutme professionally**/
.col1{
float:left;
margin: 10px 10px 0 0;
width:307px;
background-color:#1b1b1b;
}

/**aboutme**/
.col2{
float:right;
background-color:#1b1b1b;
margin: 10px 0 0 0;
width:175px;
}

/**clients**/
.col3{
float:left;
background-color:#1b1b1b;
margin: 10px 10px 0 0;
width:494px;
background-color:#333;
}
/**services**/

.col4{
float:left;
background-color:#0087bf;
margin-right: 5px;
width:494px;
}

/***awards***/
.col5{
margin-top: 10px;
float:right;
background-color:#1b1b1b;
width:494px;
}

.col6 {
margin: 0 0 5px 0;
float:right;
background-color:#1b1b1b;
width:490px;
}

#about h1 { font-size: 12px;
padding: 7px 7px 7px 15px;
	color: #fff;
	font-weight: lighter;
	background-color:#000;}
#about p { color: #ebebeb; padding: 15px; }
#about li { font-size: 0.7em; color:#ebebeb; margin: 0px; font-weight: lighter; padding: 0 25px 0 0; margin-left: 25px; }

.table {margin: 10px 0 10px 10px;}
.table tr {padding: 0; margin: 0; }
#about .table p { padding: 5px;}

/*********** CONTACT ********/
#contact {float: left; width: 430px; margin: 0 0 10px 0; background-color:#e06409; }
	
/**inthenet**/
.col7{
	float:left;
margin: 10px 0 0 0;
width:354px;
background-color:#1b1b1b;
}

/**clientlogin**/
.col8{
float:right;
background-color:#1b1b1b;
margin:0 0 0 0;
width:192px;
}

/**clients**/
.col9{
float:left;
background-color:#1b1b1b;
margin: 0 10px 0 0;
width:354px;
background-color:#333;
}


/*********** CLIENTS ********/
	
/**dropbox**/
.col10{
float:right;
margin: 0 0 0 0;
width:239px;
background-color:#1b1b1b;
}

/**intro**/
.col11{
float:left;
background-color:#2f2f2f;
margin:0 0 0 0;
width:400px;
}

/**clients**/
.col12{
float:left;
background-color:#1b1b1b;
margin:10px 0 0 0;
width:400px;
}

/**clients**/
.col13{
float:left;
background-color:#1b1b1b;
margin:0 0 0 10px;
width:338px;
}

/**************** CLIENT HUB **************/
#clienthub {width: 996px; clear:both; height: 116px; padding: 10px; margin: 0px auto 0px auto; auto width: 50%;;}