/* CSS Reset */
body{margin:0 0 0; padding:0;font-family:Verdana, Arial, Helvetica, sans-serif;}
div, ul, h1, h2, h3, li, p, img{margin:0; padding:0;}
p {margin-bottom:15px}
#top_bar {
	width:100%;
	height:35px;
	position:fixed;
	display:block;
	z-index:4;
	background:url(../images/top_bar_bg.gif) repeat-x bottom #000000;
	color:#FFFFFF;
	font-size:10px;
	border-bottom:3px solid #0066FF;
	}
div#top_l {
	padding:19px 0 0 10px;
	float:left;
	}
	
#bottom_bar {
	width: 100%;
	height: 35px;
	position: fixed;
	display: block;
	z-index: 5;
	background: url(../images/bottom_bar_bg.jpg)  repeat-x top #000000;
	bottom: 0;
	color: #fff;
	
	}

div#form_l { padding-top:8px; float:left; }
div#form_r { padding-top:8px; float:right; }

div#top_r {
	padding:19px 10px 0 0;
	float:right;
	}
input.txtfield {
	color:#2E7CC7;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:#111;
	padding:0;
	height:12px;
	}
input.txtfield2 {
	color:#2E7CC7;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:#111;
	height:16px;
	}
/* form hover */
.b_search { width:72px; height:23px; border:0; background:url(../images/search.gif);}
.b_search:hover { width:72px; height:23px; border:0; background:url(../images/search-hover.gif);}
.b_submit { width:72px; height:23px; border:0; background:url(../images/submit.gif);}
.b_submit:hover { width:72px; height:23px; border:0; background:url(../images/submit-hover.gif);}
/* WRAP */
#wrap {}
/* LOGO */
#logo, #logo img{ 
	width:600px;
	display:block;
	margin:0 auto;
	border:0;
	padding-top:1.5em;
	}
/* Navigation */
#nav_box {
	width:980px;
	margin:1em auto;
	background:url(../images/nav_bar.jpg) bottom no-repeat;
	height:58px;
	}	
/* ================================================================ 
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/scroll_menu.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* set up the overall width of the menu div, the font and the margins with a relative position*/
.menu 
{font-family: verdana, arial, sans-serif; padding:0 0 100px 100px; position:relative;z-index:100;}

/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul 
{padding:0; margin:0; list-style-type: none; border:0;}

/* float the list so that the items are in a line */
.menu ul li 
{float:left; position:relative; margin-right:3px;}

/* style the links to be 150px wide by 25px high. Set the background color and the font size. */
.menu ul li a, 
.menu ul li a:visited 
{display:block; text-align:left; text-decoration:none; width:150px; height:25px; color:#222; background:url(../images/tab.gif); line-height:24px; font-size:11px; text-indent:10px;}


/* Get rid of any default table style */
table {border-collapse:collapse;margin:0; padding:0;}

/* make the dropdown ul invisible */
.menu ul li ul {display:none; text-align:left; position:absolute; top:25px; left:-20px; text-align:left;z-index:100; padding:0 30px 20px 20px; background:url(../images/tab_bot.gif) 20px 100% no-repeat;}

/* set the foreground color of the main menu li on hover and the border to trigger IE */
.menu ul li:hover a, 
.menu ul li a:hover
{color:#999999; border:0;}

/* make the sub menu ul visible and position it beneath the first list item */
.menu ul li:hover ul, 
.menu ul li a:hover ul
{display:block;}

/* make the sub menu ul li the full width with padding and border. Add an auto scroll bar */
.menu ul li:hover ul li, 
.menu ul li a:hover ul li
{background:#fff; color:#000; width:148px; border-left:1px solid #7a7a7a;}
/* hack the widht for IE5.5 */
* html .menu ul li a:hover ul li {width:150px; width:149px;}

/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a, 
.menu ul li a:hover ul li a
{float:left; display:block; background:#fff; color:#333333; width:147px; text-align:left; text-decoration:none; border-left:1px solid #CCCCCC; text-indent:5px;}

/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover
{text-decoration:none; color:#fff; background:#222; border-left:0; pad border-right:2px solid #222;}	
/* End CSS Drop Down Menu */

/* TOP PANEL*/
#topPanel{width:900px; height:263px; position:relative; margin:0 auto; padding:0; z-index:3;}
#topPanel img{width:305px; height:78px; z-index:1; padding:0; position:absolute; margin:0 0 0 21px;}
/* Universal stlyls for list elements */
#topPanel ul{
	margin:8.5em 0 0 2em;
	font-size:75%;
	font-family:Verdana, Helvetica, sans-serif;
	}
#topPanel li{
	max-width:200px;
	list-style-type:none;
	
	}
#topPanel #headerPanelfirst a, #topPanel #headerPanelfirst li:hover, #topPanel #headerPanelfirst li,
#topPanel #headerPanelsecond a,#topPanel #headerPanelsecond li:hover, #topPanel #headerPanelsecond li,
#topPanel #headerPanelthird a, #topPanel #headerPanelthird li:hover, #topPanel #headerPanelthird li {
	width:200px;
    color:#FFFFFF;
	text-decoration:none;
	}	
/* Three PANEL*/ 

/* universal for buttons */
#topPanel #headerPanelfirst h2, #topPanel #headerPanelsecond h2, #topPanel #headerPanelthird h2{ 
	font:20px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; 
	}
/* PanelOne */
#topPanel #headerPanelfirst{
	width:246px;
	height:263px;
	position:absolute; top:0; left:65px; margin:55px 0 0 0;; padding:0;
	background:url(../images/blue-normal.jpg) no-repeat 0 0 #FC5F00;
	}
#topPanel #headerPanelfirst li:hover {list-style-image:url(../images/arrow_blue.gif); list-style-position:outside; }
#topPanel #headerPanelfirst a:hover{ color:#333;}
#topPanel #headerPanelfirst:hover { background:url(../images/blue-hover.jpg);}
#topPanel #headerPanelfirst h2{
	display:block;
	height:47px; 
	margin:33px 0 0 85px; 
	font-weight:bold; 
	text-transform:uppercase; 
	position:absolute; 
	top:0px; 
	left:0px;
	color:#FFFFFF;
	}
/* PanelTwo */
#topPanel #headerPanelsecond{
	width:246px;
	height:263px;
	margin:0 auto;
	position:absolute; top:0; left:327px; margin:55px 0 0 0; padding:0;
	background:url(../images/green-normal.jpg) no-repeat 0 0 #FC5F00;
	}
#topPanel #headerPanelsecond li:hover {list-style-image:url(../images/arrow_green.jpg); list-style-position:outside; }	
#topPanel #headerPanelsecond a:hover{ color:#333;}
#topPanel #headerPanelsecond:hover {background:url(../images/green-hover.jpg); }
#topPanel #headerPanelsecond h2{
	display:block;  
	height:47px; 
	background:none; 
	margin:34px 0 0 89px; 
	font-weight:bold; 
	text-transform:uppercase; 
	padding:0; 
	position:absolute;
	color:#FFFFFF; 
	}
/* PanelThree */
#topPanel #headerPanelthird{
	width:246px;
	height:263px;
	position:absolute; top:0; right:65px; margin:55px 0 0 0; padding:0;
	background:url(../images/orange-normal.jpg) no-repeat 0 0 #FC5F00;
}
#topPanel #headerPanelthird li:hover {list-style-image:url(../images/arrow_orange.jpg); list-style-position:outside; }
#topPanel #headerPanelthird a:hover{ color:#333;}
#topPanel #headerPanelthird:hover {background:url(../images/orange-hover.jpg); }
#topPanel #headerPanelthird h2{
	display:block;  
	height:47px; 
	background:none; 
	margin:34px 0 0 110px; 
	font-weight:bold; 
	text-transform:uppercase; 
	padding:0; 
	position:absolute; 
	color:#FFFFFF;
	}
/* Star Content Styleing */
/* container box */
#main_content {
	width:800px;
	margin:0 auto;
	padding-top:60px;
	color:#333333;
	font-size:85%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
#main_content p {
	font-size:90%;
	padding:0px;
}

a {
    color:#0000A3;
}

a:visited {
    color:#1A0033;
}

a:hover {
    color:#1414FF;
}

#main_content li {
    font-size:85%;
    padding-bottom:5px;
}

#main_content ul {
    padding-left:35px;
}
    
#main_content img {
	padding:10px;
	display:block;}
#main_content h1 {
	text-transform:uppercase; 
	letter-spacing:-2px; 
	color:#333333; 
	text-align:left;
	margin-top:15px;
	}
    
#indented_ul {
    padding-left:75px;
}

#indented_ul li {
    padding-top:10px;
}

#indented_ul li a:hover {
    font-style:italic;
}

/* portfolio containers styles */
div#port_content {
	width:900px;
	height:auto;
	margin:0 auto;
	padding:20px 0 0 0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:75%;
	}
div#port_content hr{
	margin:25px 0 25px;
	}
div#port_content p{
	color:#444;
	}
#port_content img {
    padding-right:10px;
}
div#box_desc {
	width:480px;
	float:right;
	list-style-type:none;
	}
div#box_desc  h1 {
	color:#0066FF;
	padding:10px;
	font-size:2em;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:2px;
	}
div#box_desc p {
	text-indent:20px;
	padding:5px;
	color:#333333;
	}	
div#box_desc ul {
	color:#333333;
	padding-left:20px;
	list-style-type:lower-latin;
	margin:10px 0 10px 0;
	}
div#box_img {
	width:350px;/* max width of image */
	height:auto; 
	margin:0;
	}
div#box_img img {
	border:1px solid #CCCCCC;
	padding:10px;
	}
div#box_img a img:hover {
	border:1px solid #666666;
	}
div#client_img {
	float:right;
	width:55px;
	}
div#client_img a img {
	margin:5px 0 5px 0;
	}
div#client_img  a img:hover {
	border:1px solid #666666;
	}
/* ------ Client Spevific "preview ../images"-------- 
-Horizontal rule for ../images under main image ---- */
div#client_img_specific {
	text-align:center;
	}
div#client_img_specific img {}	

div#client_img_specific a img:hover{
	border:1px solid #666666;
	}
div#box_img span {
	text-align:center;
	margin:5px;
	padding:5px;
	color:#999999;
	display:block;
	}
.w250 {width:250px;}
.w350 {width:350px;}
/* ------- check box portfolio ----------- */
div#check_box {
	background:url(../images/checkbox.jpg) top left no-repeat;
	width:475px;
	min-height:250px;
	display:block;
	clear:both;
	display:block;
	}
div#check_box ul {
	list-style-image:url(../images/symbol2.gif);
	list-style-position:inside;
	margin-bottom:20px;
	padding-top:5px;
	}
/* portfolio list styles and floats */
.list {
	width:170px;
	float:right;
	display:block;
	}
/* testimonial clients feebback */
div#testimonial {
	clear:both;
	margin:4em 0 1em 0;
	padding:2em 0 0 0;
	display:block;
	}
div#testimonial p {
	color:#666666;
	font-size:10px;
	}
div#testimonial	blockquote {
	font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
	width: 400px;
	background: url(../images/close-quote.gif) no-repeat right bottom;
	padding-left: 15px;
	text-indent: -18px;
	}
div#testimonial blockquote:first-letter {
	background: url(../images/open-quote.gif) no-repeat left top;
	padding-left: 18px;
	font: italic 1.4em Georgia, "Times New Roman", Times, serif;
	}
div#testimonial blockquote:before {
	content: open-quote;
	height: 0;
	margin-left: -0.55em;
	}
div#testimonial blockquote:after {
	content: close-quote;
	height: 50px;
	margin-top: -70px;
	margin-left: 360px;
	}

/* -------- portfoli client search ------ */	
div#client_search { 
	border-bottom:1px solid #D9D9D9; 
	display:block;  
	text-align:right; 
	margin:0 0 4em 0; 
	padding:0;
	}
/* only portfolio title */
div#page_title_port h1 {
	margin:0 auto;
	text-align:center;
	text-transform:uppercase; 
	color:#333333;
	}
	
div#page_title {
	margin:0 auto;
	text-align:center;
	text-transform:uppercase;
	font-size:140%; 
	color:#333333;
	border-bottom:1px solid #ccc;
	margin-bottom:2em;
	}
	
	
div#port_client_desc_single  {
	margin:2em 0 0 0;
	}
div#port_client_desc_single p {
	margin:0.5 0 0 0;
	text-indent:3em;
	}

form.client_form_search { padding:0; margin:5px;}
input.client_search_field { 
	font-size:80%; 
	border:1px inset #0099FF;
	color:#666666;
	}
input.submit_clientsearch { 
	border:1px solid #DDD; background:#0099FF; 
	color:#FFF; 
	font-size:80%;
	}
input.submit_clientsearch:hover {
	border-color:#333333;
	}
/* -----Next & page number ------ */
div#page_ending {
	height:20px;
	margin:4em 0 1.5em 0;
	color:#999999;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
div#page_ending a, div#page_ending2 a{ color:#0099FF; }	

#page_ending ul {
	float:left; margin:0; padding:0;
	}
#page_ending li {
	display:inline;
	}
#page_ending li a{ 
	text-decoration:none;
	letter-spacing:5px;
	font-size:12px;
	}
#page_ending li.active a {
	font-weight:bolder;
	font-size:16px;
	color:#0066FF;
	}

#page_ending li a:hover {
	font-weight:bolder;
	font-size:16px;
	color:#0066FF;}
/* page number top */
div#page_ending {
	color:#999999;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
#page_ending2 ul {
	float:left; margin:0; padding:0;
	}
#page_ending2 li {
	display:inline;
	}
#page_ending2 li a{ 
	text-decoration:none;
	letter-spacing:5px;
	font-size:12px;
	}
#page_ending2 li.active a {
	font-weight:bolder;
	font-size:16px;
	color:#0066FF;
	}
#page_ending2 li a:hover {
	font-weight:bolder;
	font-size:16px;
	color:#0066FF;}
/* being next */
span.more a{
	float:right;
	text-decoration:none;
	padding:0;
	margin:0;
	font-size:18px;
	}
span.more a:hover {
	border-left:20px solid #0066FF;
	padding-left:5px;
	}
/* -------footer --------- */
div.footer{	
	width:980px;
	margin:0 auto;
	margin-top:1.5em;
	margin-bottom: 3.5em;
	padding:5px;
	color:#333333;
	font-size:75%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	border-top:1px solid #999999;
	}
div.footer a {  color:#003399; text-decoration:none; letter-spacing:3px; }
div.footer a:hover { text-decoration:underline overline; padding:3px;}