/*could put this in html */
body {padding:0; margin:0; height: 100%; text-align:center; background:#bfc5c3; background-image: url(newim/top.gif); background-repeat: repeat-x; font-family:"Trebuchet MS", Verdana, Arial, sans-serif; font-size:76%; }
/* needed for IE to make :active state work first time */
a, a:visited {color:#000;} 

/*main container */
#container{	margin: 0 auto;	width: 737px; text-align: left;border-left: 1px solid #aaa;border-right: 1px solid #aaa;}
/* ...container / header */
#header {width:737px; height:236px;	margin:0 auto; background-image: url(newim/header2.jpg); background-repeat: no-repeat; position: relative;}
/* ...container / header / subheader */
#subheader {left: 406px; top: 36px;	width: 305px; height: 178px; position: absolute; padding:0;	margin: 0 auto;	z-index: 2;	background-color: #FFF; }
/*...container / header / rollovers */
.rolloverh a {left: 652px; height: 20px; top: 1px; position: absolute; margin: 0 auto; z-index: 40; text-align: left; vertical-align: bottom; width: 23px; padding:0; background: url(newim/home.gif) 0 0 no-repeat;}
.rolloverh a:hover {background-position: 0 -20px;}
.rolloverh a:active {background-position: 0 -20px;}
.rolloverh img {border: 0px;}
.rolloverc a {left: 680px; height: 20px; top: 1px; position: absolute; margin: 0 auto; z-index: 40; text-align: left; vertical-align: bottom; width: 23px; padding:0; background: url(newim/email.gif) 0 0 no-repeat;}
.rolloverc a:hover {background-position: 0 -20px;}
.rolloverc a:active {background-position: 0 -20px;}
.rolloverc img {border: 0px;}

/* ...container / content */
#content {width:737px; margin:0 auto; background-image: url(newim/content.gif);	background-repeat: repeat-y; background-color:#FFFFFF;}

/* ...container / content / left */
#left {float:left; position: relative; left: 27px; top: 0px; display:inline; margin:0 auto; padding: 0; width:445px; padding: 0;}
#left a {color: #456da1; text-decoration: none;}
#left a:active {color: #456da1;	text-decoration: none;}
#left a:link {color: #456da1; text-decoration: none;}
#left a:visited {color: #456da1; text-decoration: none;}
#left a:hover {color: #456da1; text-decoration: underline;}
#left h1 {margin:7px 0 0 0; padding:15px 0px 0px 0px; color:#e39c40; font-size:24px; line-height: 22px; font-weight: bold;}
#left h2 {margin:0px 0 0 0; padding:15px 0px 0px 0px; color:#456da1; font-size:17px; line-height: 22px; font-weight: normal;}
#left p {font-size: 12px; margin-bottom:12px; margin-right: 8px; color: #444;}
#left p b {color:#456da1; font-size:16px; font-weight: bold;} 
.leftinfo {font-size: 14px; font-weight: bold; color:#444;}
.leftpname {font-size: 15px; font-weight: bold; color:#444;}
#leftbname {font-size: 18px; line-height: 25px; font-weight: bold; color:#444; margin: -9px 0 0 0;}
#left img{margin-bottom: 2px;}
.pmm {font-size: 13px; padding-top: 5px; text-align: left;}

/* for testimonials page only */
#mtest {width: 429px; background-image:url(newim/test2.gif); background-repeat: no-repeat; padding: 0; margin: 20px 0 0 0;}
#mtest p {margin: 0px 5px 0 45px; padding-top: 30px; color: #444;}
#mtest h5 {margin: 10px 20px 0px 170px; font-size: 11px; font-weight:normal; color: #444;}

/*Styling for 'mini-menu' table that will appear on portfolio pages*/
#leftportlink {margin-top: 6px; position: relative; text-align: right; float: right;}
#leftportlink p{font-size:11px;color: #456da1;}
#leftportlink a {color: #456da1; text-decoration: none;}
#leftportlink a:active {color: #456da1;	text-decoration: none;}
#leftportlink a:link {color: #456da1; text-decoration: none;}
#leftportlink a:visited {color: #456da1; text-decoration: none;}
#leftportlink a:hover {color: #456da1; text-decoration: underline;}
#leftportlink table {width:210px; margin-top:-5px; margin-right:0px;}
#leftportlink td {width:50px; vertical-align: text-top; margin-top: 0px; padding-right:5px; text-align: left;}
#leftportlink td.home {width:50px; vertical-align: text-top; margin-top: 0px;}
#leftportlink td.port {width:115px; vertical-align: text-top; margin-top: 0px;}
#leftportlink td.blog {width:195px; vertical-align: text-top; margin-top: 0px;}
#leftportlink td.fill {width:15px; vertical-align: text-top; margin-top: 0px;}
#leftportlink td p {margin: 0 auto;	padding: 0 0 3px 0;	line-height: 12px;}

/*SHOW/HIDE functionality for portfolio pages*/
#changer2 {color: #456da1;}
#changer2 p{padding-top: 0px;}
#changer2 a {color: #456da1; text-decoration: none;}
#changer2 a:active {color: #456da1;	text-decoration: none;}
#changer2 a:link {color: #456da1; text-decoration: none;}
#changer2 a:visited {color: #456da1; text-decoration: none;}
#changer2 a:hover {color: #456da1; text-decoration: underline;}
#p2 {font-size: 12px; line-height: 1.5 em; vertical-align: bottom;}

/* Gallery */
#wrapper {width: 437px;	border:1px dotted #456da1; text-align: left; background-color: #e8edf4; padding: 0; margin: 20px 0 0 0;}
#porttitle {text-align: left; margin-left: 0px;	margin-top: 0px; padding: 0px 0px 0px 15px;	width: 414px; height:80px;}
#porttitle h1 {font-size: 17px; line-height: 17px;	margin-bottom: -6px; color: #456da1;}
#porttitle p {font-size: 11px; line-height: 16px; }
#porttitle a {color: #456da1; text-decoration: none;}
#porttitle a:active {color: #456da1; text-decoration: none;}
#porttitle a:link {color: #456da1; text-decoration: none;}
#porttitle a:visited {color: #456da1; text-decoration: none;}
#porttitle a:hover {color: #456da1; text-decoration: underline;}
#porttitle img {vertical-align: text-bottom; border: 0px;}
#padd {height:300px; width:100px;}

#scrollbox {width:395px; height:80px; background:#c3dcff; overflow:auto; border:1px solid #456da1; margin-left:15px;  margin-top: 1px; padding-left: 5px; margin-right: 6px; padding-top: 5px; margin-left:15px;}
#scrollbox a:active {color: #456da1; text-decoration: none;}
#scrollbox a:link {color: #456da1; text-decoration: none;}
#scrollbox a:visited {color: #456da1; text-decoration: none;}
#scrollbox a:hover {color: #456da1; text-decoration: none;}

/* various containers depending on number of thumbnails*/
#thumbs5 {width:410px; height:60px;}
#thumbs6 {width:490px; height:60px;}
#thumbs7 {width:570px; height:60px;}
#thumbs8 {width:650px; height:60px;}
#thumbs9 {width:730px; height:60px;}
#thumbs10 {width:810px; height:60px;}

/* ...container / content / right */
#right {float: right; position: relative; right: 27px; top: 0px; width:215px; margin:0 auto; padding: 0; display: inline; color: #FFF;}
#right a {color: #fff; text-decoration: none; font-size:11px;}
#right a:active {color: #fff; text-decoration: none;}
#right a:link {color: #fff; text-decoration: none;}
#right a:visited {color: #fff; text-decoration: none;}
#right a:hover {color: #ddd; text-decoration: underline;}
#right h1 {/*for headline with line */ background-image:url(newim/sideline.gif); background-repeat:no-repeat; font-size: 16px; vertical-align: top; padding: 8px 0 15px 15px; margin: 17px 0 0 0; font-weight: bold;}
#right h2 {padding:6px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 185px; font-size:16px; line-height: 22px; font-weight: bold;}
#right p {font-size: 11px; line-height: 18px;padding: 0px 15px 1px 15px; margin: 0px 0 0 0;}
#righttest {background-image: url(newim/sb-clients.gif); background-repeat: no-repeat; margin-bottom: 15px; margin-top: 20px; height: 34px; width: 100%;}
#rightmorewk {background-image: url(newim/sb-morewk.gif); background-repeat: no-repeat; margin-bottom: 15px; margin-top: 20px; height: 34px; width: 100%;}
#rightfromport {background-image: url(newim/sb-port.gif); margin-bottom: 15px; margin-top: 20px; height: 34px; width: 100%; background-repeat: no-repeat;}
#rightaboutme {background-image: url(newim/sb-about.gif); margin-bottom: 15px; margin-top: 20px; height: 34px; width: 100%; background-repeat: no-repeat;}
#rightbright {background-image: url(newim/sb-bright.gif); margin-bottom: 15px; margin-top: 20px; height: 34px; width: 100%; background-repeat: no-repeat;}
.testattrib {padding-left: 30px;}
.neg {margin: -12px 0 0 0; padding: 0 0 -10px 0;}

/*for list on sidebar*/
ul.sidelist  {list-style-type: none; padding: 2px 0 2px 15px; margin: 2px 30px 14px 0; font-size: 12px; line-height: 19px;}
li.sidelist2 { background-image: url(newim/bulletside.gif); background-repeat: no-repeat; background-position: 0 0.4em; padding: 0 0 0 15px; margin-left: 0px; margin-right: 20px; margin-bottom: 2px;}
li.sidelist3 { padding: 0 0 0 15px; margin-left: 0px; margin-right: 5px; margin-bottom: 7px;}

/*for list on portcategory pages*/
ul.ptlist  {list-style-type: none; padding: 2px 0 2px 15px; margin: 2px 30px 14px 0;  line-height: 19px; color: #444;}
li.ptlist2 { background-image: url(newim/bulletside.gif); background-repeat: no-repeat; background-position: 0 0.4em; padding: 0 0 0 15px; margin-left: 0px; margin-right: 20px; margin-bottom: 2px;font-size: 13px; color: #444;}
li.ptlist3 { padding: 0 0 0 15px; margin-left: 0px; margin-right: 5px; margin-bottom: 17px;font-size: 12px;  color: #444;}

ul.homelist {list-style-type: none; padding: 2px 0 0 0; margin: 5px 25px 14px 0; font-size: 12px; line-height: 19px;}
li.homelist2 {border: 1px dotted #456da1; background-image: url(img/bullet2.gif); background-repeat: no-repeat; background-position: 12px 10px; padding: 6px 0 6px 25px; margin: 0 1px 14px 20px; color: #444;}

/* These are styles for various types of lists I am using */
ul.bloglist {list-style-type: none; padding: 0; margin: 5px 30px 0 0;}
li.bloglist2{background-image: url(img/bullet.gif); background-repeat: no-repeat; background-position: 0 .4em; padding-left: 20px;
margin-left: 20px; color: #444;}
li.bloglist3{font-size: 13px; background-image: url(img/bullet.gif); background-repeat: no-repeat; background-position: 0 .4em; padding: 0 0 0 15px; margin-left: 20px; color: #444;}

/*for port images on sidebar */
.rhigh {margin-left: 15px;}
.rhigh img{border: 1px dotted #fff; padding: 0 0 0 0px; margin: 0 auto;  }
.rhigh:hover img{border: 1px solid #db8538;}
.rhigh:hover{color: #e39c40; /* Dummy definition to overcome IE bug */}
/*for blog posts*/
#blogpost {padding: 0;}
#blogpost p{font-size: 14px; line-height: 24px; margin-bottom: 18px;}
#blogpost ul{list-style-type: none; padding: 0; margin: 5px 30px 0 0; color: #444;}
#blogpost li{background-image: url(img/bullet.gif); background-repeat: no-repeat; background-position: 0 .4em; padding-left: 20px;
margin-left: 20px; margin-right: 20px; color: #444;}
table.blogdate {padding: 0 12px 0 0; border: 1px dotted #456da1; color: #444; font-weight: normal; font-size: 12px; line-height: normal; margin-top: 18px;}
table.blogdate img {padding: 0 5px 0 4px; vertical-align:middle; }
#blogpost h1 {font-size: 12px; line-height: 21px; margin: 1px 27px 22px 25px; padding: 20px 25px 12px 20px;	font-weight: normal;	color: #444; background-color: #fff69f;	background-image: url(img/blog.jpg);	background-repeat: no-repeat;}
.bloginset {margin: 0 0 0 30px; padding-right: 25px; font-size: 11px;}
.bloginset p {font-size: 12px;}
/*for guar page area in right sidebar*/
#guar {position: relative; margin-top: 12px; height: 100%; width: 420px;}
#guar p{font-size: 13px; line-height: 22px; padding-top: 3px;}

/* for portfolio showcase page only*/
#showcase {width: 430px; min-height:140px; margin-top: 15px; padding: 12px 0 12px 12px; border: 1px dotted #456da1; background-repeat: no-repeat; background-color: #c5e0f4; }
#showcase p {margin-left: 235px; font-size: 11px; vertical-align: text-top; margin-bottom: 0px; margin-top: 0px;}
#showcase a {color: #456da1; text-decoration: none; font-size:13px; font-weight: bold;}
#showcase a:active {color: #456da1;	text-decoration: none;}
#showcase a:link {color: #456da1; text-decoration: none;}
#showcase a:visited {color: #456da1; text-decoration: none;}
#showcase a:hover {color: #456da1; text-decoration: underline;}
#showcase img {vertical-align: top; float: left; margin-right: 12px;}
ul.scase {list-style-type: none; padding: 7px 0px 7px 0px; margin: 0px 15px 0px 235px; font-size: 11px; line-height: 17px; background-color: #e9f3fa; border: 1px solid #b4d3ea; }
li.scase2 { background-image: url(newim/showarrow.gif); background-repeat: no-repeat; background-position: 0 0.4em; padding: 0 0 0 15px; margin-left: 7px; margin-right: 20px; margin-bottom: 2px; color: #444; }
li.scase3 { padding: 0 0 0 15px; margin-left: 7px; margin-right: 11px; margin-bottom: 2px; color: #444;}
.paddd {padding-top: 1px;}
.padddd {padding-top: 5px;}
.show{padding: 0; margin 0 auto; font-size: 14px; line-height: 21px; color: #444;}

#abt {margin: 0 12px 0 0;}
#abt p {font-size: 13px; color: #444; line-height: 22px; margin-top: 15px;} 
#abt h5 {padding-top: 2px; font-size: 16px; line-height: 22px;	font-weight: bold; margin-top: 6px; margin-bottom: 11px; color: #456da1;} 
#abt h4 {padding-top: 2px; font-size: 14px; line-height: 22px;	font-weight: bold; margin-top: 6px; margin-bottom: 11px; color: #444;} 

/*for home page only*/
#homepg {margin: 0 auto;}
#homepg h1 {font-size: 19px; line-height: 22px;	text-transform: uppercase; font-weight: normal;} 
#homepg h2 {font-size: 30px; line-height: 22px;	font-weight: bold; margin-top: 6px; margin-bottom: 17px; color: #5395c5;} 

#homepg p {font-size: 13px;	line-height: 22px; margin-top: 15px;} 
/* for client and industry lists only */	
#listt {width: 429px; height: 31px;	background-image:url(img/listtop3.gif); background-repeat: no-repeat; margin-top: 20px ;}
#listt p {font-size: 14px;margin: 0 auto; padding-top: 5px;	margin-left: 16px; vertical-align: middle; color: #fff;	font-weight:bold; text-transform: uppercase;}
#listm {width: 429px; padding: 10px; background-image:url(img/listside.gif);	background-repeat: repeat-y;}
#listm table {border: 0px;}
#listm td {width: 195px; vertical-align: text-top;}
#listb {width: 429px; background-image:url(img/listbot.gif); margin-bottom: 2px; padding-left: 10px;	background-repeat: no-repeat; height: 2px;}
ul.clist {list-style-type: none; padding: 0; margin: 0px 5px 0 3px;}
li.clist{background-image: url(img/bullet.gif); background-repeat: no-repeat; background-position: 0 .4em; padding-left: 14px;
margin-bottom: 1px; margin-left: 3px; color: #444; }
	
/*...container / footer */
#footer {width:737px; height:128px;	margin:0 auto; background-image: url(newim/footimg.jpg); background-repeat: no-repeat; clear: both; float: none;}

/* FOR PORTFOLIO LISTINGS IN MAIN SECTION */
#pitem {border-top: 1px dotted #456da1;	padding: 12px 0 20px 0;	min-height: 80px; clear: both;}
#pitem p {margin-left: 170px; vertical-align: text-top; margin-bottom: 0px; margin-top: 0px;}
#pitem a {color: #456da1; text-decoration: none; font-size:13px; font-weight: bold;}
#pitem a:active {color: #456da1;	text-decoration: none;}
#pitem a:link {color: #456da1; text-decoration: none;}
#pitem a:visited {color: #456da1; text-decoration: none;}
#pitem a:hover {color: #456da1; text-decoration: underline;}
.ptf img{border: 1px dotted #999; padding: 0px;}
.ptf:hover img{border: 1px solid #db8538;}
.ptf:hover{color: #e39c40; /* Dummy definition to overcome IE bug */}
#pitem img {vertical-align: top; float: left;}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/padding.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* style the outer div to give it width */
/* gave it z-index to be above photo */
.menu {width:227px; position:absolute; left:406px; top:0; z-index: 3;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; height:23px; background:transparent; width:227px}
.menu ul.top {width:227px;}
/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left; height:23px; width:100%; display:block;}
/* style the sub level list items */
.menu ul ul li {display:block; width:100%; height:21px; float:left;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block; float:left; height:100%; width:100%;}
.menu a b {margin-left:-9999px;}
/* hack IE5.x to get the correct the faulty box model and get the width right */
/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block; width:100%; height:100%;}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {border-collapse:collapse; padding:0; margin:0; width:0; height:0; font-size:1em;}

.menu ul li.about {width:68px;}
.menu ul li.about a {background:#000 url(mim/about.gif) left top;}
.menu ul li.portfolio {width:86px;}
.menu ul li.portfolio a {background:#000 url(mim/portfolio.gif) left top;}
.menu ul li.clients {width:73px;}
.menu ul li.clients a {background:#000 url(mim/clients.gif) left top;}

.menu ul ul li.about1 {height:22px;}
.menu ul ul li.about1 a {background:url(mim/about-1.gif);}
.menu ul ul li.about2 a {background:url(mim/about-2.gif);}
.menu ul ul li.about3 a {background:url(mim/about-3.gif);}
.menu ul ul li.about4 a {background:url(mim/about-4.gif);}
.menu ul ul li.about5 a {background:url(mim/about-5.gif);}
.menu ul ul li.about6 a {background:url(mim/about-6.gif);}
.menu ul ul li.about7 a {background:url(mim/about-7.gif);}
.menu ul ul li.port1 {height:22px;}
.menu ul ul li.port1 a {background:url(mim/port-1.gif);}
.menu ul ul li.port2 a {background:url(mim/port-2.gif);}
.menu ul ul li.port3 a {background:url(mim/port-3.gif);}
.menu ul ul li.port4 a {background:url(mim/port-4.gif);}
.menu ul ul ul li.port2a {height:22px; width:129px;}
.menu ul ul ul li.port2a a {background:url(mim/portsub-a1.gif);}
.menu ul ul ul li.port2b a {background:url(mim/portsub-a2.gif);}
.menu ul ul ul li.port2c a {background:url(mim/portsub-a3.gif);}
.menu ul ul ul li.port2d a {background:url(mim/portsub-a4.gif);}
.menu ul ul ul li.port2e a {background:url(mim/portsub-a5.gif);}
.menu ul ul ul li.port2f a {background:url(mim/portsub-a6.gif);}
.menu ul ul ul li.port2g a {background:url(mim/portsub-a7.gif);}
.menu ul ul ul li.port3a {height:22px; width:129px;}
.menu ul ul ul li.port3a a {background:url(mim/portsub-b1.gif);}
.menu ul ul ul li.port3b a {background:url(mim/portsub-b2.gif);}
.menu ul ul ul li.port3c a {background:url(mim/portsub-b3.gif);}
.menu ul ul ul li.port3d a {background:url(mim/portsub-b4.gif);}
.menu ul ul ul li.port3e a {background:url(mim/portsub-b5.gif);}
.menu ul ul li.clients1 {height:22px;}
.menu ul ul li.clients1 a {background:url(mim/clients-1.gif);}
.menu ul ul li.clients2 a {background:url(mim/clients-2.gif);}
.menu ul ul li.clients3 a {background:url(mim/clients-3.gif);}
/*NO LONGER NEEDED
.menu ul ul li.clients4 a {background:url(mim/client-4.gif);}*/
/* style the level hovers */
/* first */
.menu ul li a:hover {background-position: left bottom; position:relative; z-index:100;}
.menu ul li a:active, .menu ul li a:focus {outline:0;}
.menu ul li:hover {position:relative;}
.menu ul li:hover > a {background-position: left bottom;}
/* second */
.menu ul ul li:hover {position:relative;}
.menu ul ul li:hover > a {background-position: left bottom;}
/* third */
.menu ul ul ul li:hover {position:relative;}
.menu ul ul ul li:hover > a {background-position: left bottom;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute; height:0; top:23px; left:0; width:155px;}
.menu ul ul.sub_portfolio {width:159px;}
.menu ul ul.sub_clients {width:151px;}
/* position the third level flyout menu */
.menu ul ul ul {left:158px; top:0; width:129px;}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible; height:auto; padding:0 10px 10px 10px; left:-10px; background:url(im/transparent.gif);}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible; left:158px; height:auto; padding:10px 10px 10px 0; top:-11px; background:url(im/transparent.gif);}