/* border:1px solid red;*/


body     { text-align:center; background:#0d1937 url(../images/body-bkTile.gif) repeat-x; 
           font-family:"Trebuchet MS", "Trebuchet MS Bold", "Trebuchet MS Bold Italic", "Trebuchet MS Italic"; color:#C9C9C9;} /* lighter than 979797 */

#titleBackground { width:100%; height:523px; background: url(../images/body-bkImage.jpg) top center no-repeat; text-align:center;}

#shell   { margin:0 auto; position:relative; z-index:3;}

#contentOuter { background: url(../images/content-centerTile.png) repeat-y;}
#contentInner { background:url(../images/content-bottom.png) 0 bottom no-repeat; min-height:337px; position:relative;}


/* -- global styles -----------------------------------*/
#shell, #footer, #header, #contentOuter, #contentInner { width:910px;}

* { margin:0; padding:0; outline:none;}

.clearAll { clear:both; font-size:1px; line-height:1px; height:.01em;}

input { font-family:"Trebuchet MS", "Trebuchet MS Bold", "Trebuchet MS Bold Italic", "Trebuchet MS Italic";  font-size:11px; line-height:13px; }


p { font-size:14px; line-height:22px; color:#D9D9D9; letter-spacing:.02em;} /*C9C9C9*/ 

a:link, a:visited {text-decoration:underline; color:#8FB8C7;}
a:hover, a:active {text-decoration:underline; color:#FFFFFF;}



/* -- header -----------------------------------------*/
#header      { height:120px; position:relative;}
#hLogo       { width:396px; height:80px; position:absolute; left:42px; top:42px;}

#hRight      { text-align:right; width:480px; height:40px; position:absolute; right:0; top:0;}
#hRight p    { color:#7fd3f5; margin:8px 5px 0 0; float:right;}

#hRight input          { width:110px; border:none; background:url(../images/search-box.png) no-repeat; padding:13px 14px; float:right; color:#7fd3f5; text-align:right;}
#hRight input.search   { width:50px; cursor:pointer; background:url(../images/btn-go-off.png) no-repeat;}
#hRight input.search:hover {background:url(../images/btn-go-on.png) no-repeat;}

#hRight p a:link       { color:#7fd3f5; text-decoration:none;}
#hRight p a:visited    { color:#7fd3f5; text-decoration:none;}
#hRight p a:hover      { color:#FFFFFF; text-decoration:underline;}
#hRight p a:active     { color:#FFFFFF; text-decoration:underline;}



/* -- topnav ----------------------------------------*/
#topNav         { height:86px; background: url(../images/content-Top.png) 0 49px no-repeat; position:relative; z-index:100;}
#topNav div     { height:86px; position:absolute; right:40px; background:url(../images/topNav-cornerR.gif) right no-repeat; padding: 0 23px 0 0;}
#topNav div div { height:86px; width:21px; float:right; position:static; background:url(../images/topNav-cornerL.gif) right no-repeat; padding:0 0 0 20px;}

#topNav ul      { float:right; position:relative; height:86px; background:url(../images/topNav-divider.gif) no-repeat;}
#topNav ul h2 a { display:block; font-size:13px; padding:30px 14px 35px 12px; margin:0 0 0 2px; letter-spacing:.01em; }

#topNav ul h2 a:link, #topNav ul h2 a:visited { color:#81d4f4; text-decoration:none; background:url(../images/topNav-Off.gif) repeat-x;}
#topNav ul h2 a:hover, #topNav ul h2 a:active { color:#81d4f4; text-decoration:none; background:url(../images/topNav-On.gif) repeat-x;}

#topNav ul ul   { display:none; width:210px; background:url(../images/drop-top.png) no-repeat; padding-top:31px;}
#topNav ul:hover ul    { display:block; position:absolute; z-index:200; left:0; top:50px;}
					  
#topNav ul li   { list-style:none; background:url(../images/drop-tile.png) repeat-y; color:#5bafcb; text-align:left; font-size:12px; line-height:13px;}
.bottom         { height:25px !important; background:none !important;}    

#topNav ul ul li a           { width:175px; display:block; padding:3px 3px 8px 6px; margin:0 13px; background:url(../images/ico-dotRule.gif) bottom repeat-x;}
#topNav ul ul li a:link, #topNav ul ul li a:visited   { color:#5bafcb; text-decoration:none; background-color:none;}
#topNav ul ul li a:hover     { color:#FFFFFF; text-decoration:none; background-color:#2a2929;}
 #topNav ul ul li a:active   { color:#FFFFFF; text-decoration:none; background-color:#000000;}



/* -- footer ----------------------------------------*/
#footer              { height:100px; text-align:center; background:url(../images/content-footer.png) no-repeat;}
#footer p            { font-size:11px; padding:8px 30px 6px 30px; color:#717171;}
#footer p  a         { padding:0 4px;}



/* -- home page ------------------------------------*/
#frame         {  width:503px; height:314px; float:left; margin:18px 0 0 0;}

/* -- frame arrows ---*/
#frameArrowL,#frameArrowR { width:34px; height:48px; float:left; margin-top:140px;}
#frameArrowL              { margin-left:20px; display:inline;}
#frameArrowR              { margin-right:10px; display:inline;}
#frameArrowL a, #frameArrowR a { display:block; width:34px; height:48px;}

#frameArrowR a:link, #frameArrowR a:visited { background: url(../images/frame-ArrowR.gif) no-repeat;}
#frameArrowR a:hover, #frameArrowR a:active { background: url(../images/frame-ArrowR-on.gif) no-repeat;}

#frameArrowL a:link, #frameArrowL a:visited { background: url(../images/frame-ArrowL.gif) no-repeat;}
#frameArrowL a:hover, #frameArrowL a:active { background: url(../images/frame-ArrowL-on.gif) no-repeat;}

/* -- content in frame ---*/
.frameContent  { width:503px; height:314px; background:#313131 left bottom no-repeat; position:relative;}

.frameContent h1, .frameContent p { text-align:right; background:url(../images/ico-dotRule.gif) bottom repeat-x; float:right; display:inline;}
.frameContent h1 {  width:260px; font-size:25px; line-height:26px; color:#eed675; font-weight:normal; margin:30px 30px 10px 20px; padding:0 0 14px 0;}
.frameContent p  {  width:230px;font-size:16px; line-height:25px; color:#cbcbcb; margin:0 30px 10px 0; padding:0 0 14px 30px;}

.frameButton a   {
	width:111px;
	height:40px;
	color:#000000;
	margin:0 25px 0 0;
	padding:10px 0 0 0;
	font-size:13px;
	font-weight:bold;
	position:absolute;
	bottom:20px;
	right:0;
	z-index:200;
}
.frameButton a:link, .frameButton a:visited { text-decoration:none; background:url(../images/btn-1-off.png) no-repeat;}
.frameButton a:hover, .frameButton a:active { text-decoration:none; background:url(../images/btn-1-on.png) no-repeat;}

#consult { background:url(../images/frameImg-consulting.jpg) no-repeat;}
#network { background:url(../images/frameImg-network.jpg) no-repeat;}
#database { background:url(../images/frameImg-database.jpg) no-repeat;}
#webDev { background:url(../images/frameImg-web.jpg) no-repeat;}
#affiliation { background:url(../images/frameImg-affilliate.jpg) no-repeat;}
#about { background:url(../images/frameImg-about.jpg) no-repeat;}

#copyRt  { width:260px; float:right; margin:18px 31px 0 0; text-align:right; display:inline;}
#contact { width:220px;}
#copyRt p { margin-bottom:14px;}
#contact p { color:#717171;}
#contact span {font-size:22px;}



/* -- inner pages -----------------------------------*/
.copy, .copyBoxTop, .copyBoxBot, .copyBox { width:534px; float:left; display:inline;}

.copyBoxCisco { width:550px; float:left;}

.copy    { padding:18px 0 8px 50px; text-align:left;}
.copy p  { padding: 0 0 12px 0;}
.copy h1 { font-size:20px; line-height:26px; color:#eed675; font-weight:normal; padding: 0 0 8px 0;}
.copy h2 { font-size:15px; line-height:15px; color:#eed675; font-weight: bold; padding: 2px 0 8px 0;}
.copy h3 { font-size:15px; line-height:15px; color:#CCCCCC; font-weight: bold; padding: 2px 0 8px 0;}

.copyBoxTop, .copyBoxBot, .copyBox  { margin-left:44px;}
.copyBoxCisco { margin-left:200px; }

.copyBoxTop { height:12px; background:url(../images/box-top.gif) no-repeat; font-size:1px;}
.copyBoxBot { height:12px; background:url(../images/box-bot.gif) no-repeat;}
.copyBox    { background:url(../images/box-tile.gif) repeat-y; text-align:left;}
.copyBox h2 { font-size:15px; line-height:15px; color:#eed675; font-weight: bold; padding: 0 22px 0px 22px;}

.copyBox p  { padding: 0 22px 12px 22px;}

.copyBox ol   { padding: 0 26px 12px 22px;}
.copyBox ul    { padding: 0 26px 12px 22px; list-style-type:none;}
.copyBox li p { margin: 0 0 0 15px; padding:0 0 8px 0;}

.copyBox ul li   { background:url(../images/ico-bulletGrey.gif) 0 11px no-repeat;}
.copyBox ol li   { margin: 0 0 0 8px; padding:0 0 4px 0; }

.portText h2 {font-size:13px; line-height:15px; color:#eed675;}

/*.copy h2*/

.ulEmphasis { color:#eed675; font-weight:bold;}

.titleImage { width:320px; height:520px; float:right; margin:0 2px 30px 0; background-repeat:no-repeat;}



/* -- slideshow/portfolio -----------------------------------*/

#slideFrame    { width:810px; height:420px; float:left; background:url(../images/ico-dotRule.gif) top repeat-x;}
.portfolio     { width:810px; height:418px; position:relative; background:#2a2929 url(../images/port-gradiant.jpg) bottom repeat-x; margin-top:2px;}
.portImage     { width:522px; height:390px; text-align:left; overflow:hidden; position: absolute; top:28px; right:0;}
.portImage img {padding-bottom:60px;}
.portNums      { width:200px; height:18px; position:absolute; top:5px; right:0;}

.portNums a    { float:right; height:11px; color:#999999; font-size:10px; margin-left:4px; padding:2px 6px 4px 6px;}
.portNums a:link, .portNums a:visited { text-decoration:none; background:#333333;}
.portNums a:hover, .portNums a:active { text-decoration:none; background:#666666;}

.portText      {
	width:266px;
	text-align:right;
	position:absolute;
	top:25px;
	left:8px;
}
.portText h2   { margin-bottom:4px; padding-bottom:8px; background:url(../images/ico-dotRule.gif) bottom repeat-x;}
.portText p    { padding: 0 0 8px 0;}

#thumbs    {/* width:460px; height:65px;*/  float:right;}

#thumbs a  { float:left; height:56px; width:76px; background-repeat:no-repeat; margin-left:10px;}
#thumbs a:link,#thumbs a:visited  { border:3px solid #333333;} 
#thumbs a:hover,#thumbs a:active  { border:3px solid #999999;}

#thumbs a.activeSlide { border:3px solid #eed675;}


#portGrad {
	position:absolute;
	bottom:-2px;
	right:-1px;
	width:530px;
	height:147px;
	background:url(../images/port-gradiant.png) bottom repeat-x;
	z-index:10;
}

/*--------- collumns -------------*/
.colTwoL  { margin:0 0 0 0px; width:332px; float:left; display:inline;}
.colTwoR  { margin:0 0 0 0px; width:332px; float:left; display:inline;}


/*--------- contact page -------------*/
.contactForm          { margin-top:14px;}
.contactForm p        { margin:4px 0; height:28px;}
.contactForm p span   { float:left; text-align:left; width:108px; padding:4px;} 
.contactForm p input   { float:right; width:173px; padding:5px 10px 8px 10px;}
.contactForm p select { float:right; width:173px; padding:5px 10px 8px 10px;}
.contactComment       { background-color:#FFFFFF;}
.contactComment textarea { width:322px; height:162px; padding:10px;}
.contactForm p input, .contactComment textarea { border:none; background-color:#FFFFFF; font-size:12px; color:#333333;}

.btnSubmit            { float:left; height:41px; width:100px; font-size:16px;}