/* -- NOTE: reset.css clears all browser differences and starts from scratch --  */
@import 'reset.css';

body {
	font-family: Arial, Helvetica, san serif;
	font-size:12px;/*90%*/
	line-height: 15px;
	font-style: normal;
	font-weight: normal;
	color: #333333;
	background-color:#f2f2f2;
	position: relative;
	margin: 0 auto;
	} 
	
/* ======================================================== MAIN BODY CONTAINING ELEMENT ========================================================*/

#top-expand {width: 100%; height:158px; margin: 0 auto; position: relative; background-color:#ffffff;z-index:0;}
	
#header {width:990px; height:158px;margin: 0 auto; position: relative; background:url(images/header-img.jpg) no-repeat;z-index:3}

#logo {width: 187px; height:158px; float:left; display:inline;}



#banner{width:970px; height:262px; background:#f1f4f6 url(images/bkg_square.gif); margin:0 auto;}

#navigation {width:382px; height: 88px; float:right; display:inline; padding-top: 135px; }

#middle-expand {width: 100%; height:auto; margin: 0 auto; padding-bottom: 25px; position: relative; background:url(images/background-tile.jpg) #ffffff repeat-x;z-index:0;}

#middle-contain {width:990px; height:auto;margin: 0 auto; position: relative; background-color:#ffffff;overflow:auto;z-index:1;}

#text {width:550px; height:auto; padding: 35px 0px 15px 60px;float:left;}

#footer-expand {width: 100%; height:auto; clear:both; font-size:11px; color: #949491; margin: 0 auto;border-top: 8px solid #e7e7e7; padding-bottom: 25px; background-color:#f2f2f2; position: relative;}

#footer-contain {width:990px; height:auto; margin: 0 auto; position: relative; padding-top: 15px;}

#footer-info {width:231px; height:auto; float: left; padding:0 0 20px 30px; display:inline;}

#footer-media {width:429px; height:auto; float: right; padding:0 30px 0 0; display:inline;}


/* EXTRA 
#left-inner-gallery {width:215px; height:auto; padding:20px 0 15px 10px; font-size:13px;}
#left-inner-gallery  img  {border:#C6BA6B 5px solid;}
#left {float:left; width:310px; display:inline;}
#left-inner {width:215px; height:auto; padding:50px 0 15px 30px;}
#right {float:right; width: 680px; height:auto; display:inline;}

*/

/*======================================================== LINK STYLES ======================================================== */

/* ------------- Basic links  ------------- */
a:link {color: #1c4573; text-decoration: underline; }

a:active {color: yellow; text-decoration: underline;}

a:visited {color: #153355; text-decoration: none;}

a:hover {color: red; text-decoration: none;}


/* ------------- Footer  ------------- */
#footer-expand a:link, #footer-expand a:visited {color: #577056; text-decoration: none;}

#footer-expand a:hover, #footer-expand a:active {color: #5D84C9; text-decoration: underline;}

#footer-expand td {vertical-align:middle;}
/*======================================================== TEXT STYLES ======================================================== */

#text h1 { font-family:"Century Gothic", Arial, san-serif; font-size: 24px; color: #01a7b1; font-style: normal; font-weight:100; margin-bottom: 18px;}

#text h2  {color:#014e8d; font-size:13px; margin-bottom: 20px;}

#text h3, #text  h4 {font-size: 12px; font-style: normal; font-weight: bold; color: #333; margin-bottom: 12px;text-transform:uppercase;}

#text h4 {font-size: 12px;color: #555;text-transform:none;}

#text p, #text ul {margin-bottom:15px;line-height:145%;}

#text li {margin-bottom:5px;background:url(images/bullet_cross.gif) no-repeat left 4px;padding-left:18px;}
#text li ul {margin-top:5px;}
#text li li {background:none;list-style:outside disc;padding-left:0;margin-left:20px;}

#text h3 a.visit {text-transform:none;text-decoration:none;border-bottom:1px solid #ddd;}

#text img {border:1px solid #e7e7e7;background:#f1f4f6;padding:3px;margin:10px 0;}

#text td img {border: 0px; background: none;}

/*======================================================== CLASSES ======================================================== */

.clearer{clear:both; margin:0px;}

.footer-pic {border: 5px solid #577056; }

.basic-bold {font-weight: bold;}

.basic-italic {font-style:italic;}

.red {color: #FF0000;}

.quote-left {font-size:11px; line-height:24px;}

.gold-border {border:#C6BA6B 5px solid;}

.gold-border2 {border:#C6BA6B 2px solid;}

.iframe {border: 1px solid #cccccc; margin-bottom:12px;}

/*======================================================== FORM STYLES ======================================================== */

#typein { }

#typein input, #typein textarea, #typein select {color: #2e2919; background-color: #cec19a; padding: 2px; border: solid 1px #877b59;}


/*======================================================== Help! Form Styles ======================================================== */	
#header, #top-expand {overflow:visible;position:relative;z-index:4;}
#help_button {width:211px; height:51px; display:inline; float:right;position:relative;margin-right:5px;}
#help_button {}
#form_help { width:189px;background:#eee;position:absolute;top:35px;right:10px;padding:10px;z-index:99;color:#555;font-weight:bold;border:1px solid #e98182;}
#form_help form label {display:block;width:100px;clear:both;margin-right:5px;padding-bottom:5px;}
#form_help form label.hide {display:none;}
#form_help form input, #form_help form select  {width:160px;clear:left;float:right;margin-right:10px;margin-bottom:10px;background:#fff;border:1px solid #aaa;color:#555;font-size:90%;font-family:"Century Gothic","Trebuchet MS", Arial, Helvetica,sans-serif;clear:both;}
#form_help form textarea {width:160px;clear:left;float:right;margin-right:10px;padding-bottom:10px;margin-bottom:10px;background:#fff;border:1px solid #aaa;color:#555;font-size:90%;font-family:"Century Gothic","Trebuchet MS", Arial, Helvetica,sans-serif;clear:both;}
#form_help form #help_submit {background:#f70906;width:auto;border:1px solid #cc0000;color:#fff;float:right;margin-right:10px;padding:3px;font-size:1em;margin-top:10px;font-weight:bold;font-family:"Century Gothic","Trebuchet MS", Arial, Helvetica,sans-serif;clear:both;width:160px;}
.life_divider {background:url(images/life_divide.gif) no-repeat;width:163px;margin:10px auto;height:21px;display:block;clear:both;}

/*======================================================== NAV STYLES ======================================================== */	

ul#nav  {width:620px;margin-left:25px;margin-bottom:25px;overflow:auto;font-size:.9em;z-index:1;}
#nav li {float:left;width:auto;}
#nav li a {display:block;height:30px;background:#f1f4f6;text-indent:-999em;}
#nav li a:hover, #home #nav_ho, #serv #nav_se, #abou #nav_ab, #myac #nav_my, #webm #nav_we, #nav li a:hover#nav_ol {background-position:0px -30px !important;}
 
#nav a#nav_ho {width:64px;background:url(images/nav_home.gif) no-repeat;}
#nav a#nav_ab {width:88px;background:url(images/nav_abou.gif) no-repeat;}
#nav a#nav_se {width:84px;background:url(images/nav_serv.gif) no-repeat;}
#nav a#nav_my {width:104px;background:url(images/nav_myac.gif) no-repeat;}
#nav a#nav_co {width:101px;background:url(images/nav_cont.gif) no-repeat;}
#nav a#nav_we {width:88px;background:url(images/nav_webm.gif) no-repeat;}

#nav li ul {position:absolute;left:-999em;height:auto;z-index:999;width:202px;}
#nav li ul li {float:left;clear:left;}
#nav li ul li.last a {padding-bottom:10px;}
#nav li ul li a {color:#555;background:#f1f4f6;text-decoration:none;font-size:1em;padding:4px;text-indent:0;width:180px;padding-left:18px;height:auto;}
#nav li ul li a:hover {background:#aaa;color:#fff;}
#nav li:hover ul, #nav li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static;}

/*======================================================== SIDEBAR STYLES ======================================================== */	

#sidebar {background:#f1f4f6 url(images/bkg_sidebar_bottom.gif) center bottom no-repeat;width:245px;float:right;padding:40px;padding-bottom:85px;margin-top:-45px;padding-top:75px;margin-right:10px;}

#sidebar h2 {font-family: "Century Gothic", "Trebuchet MS", Verdana, Arial, sans-serif;font-size:1.4em;font-weight:normal;color:#014e8d;margin-bottom:10px;padding-top:5px;}
#sidebar h3 {font-family: "Trebuchet MS", Verdana, Arial, sans-serif;color:#1c7a9d;font-size:1.1em;text-transform:none;margin-bottom:10px;font-weight:normal;}
#sidebar li {margin-bottom:5px;list-style:outside disc;margin-left:20px;}
#sidebar li ul {margin-top:5px;margin-bottom:0;}
#sidebar li li {list-style:outside circle;}
#sidebar ul, #sidebar p {margin-bottom:15px;line-height:125%;}
#sidebar img {border:2px solid #ccc;margin-bottom:5px;}



/*======================================================== FOOTER STYLES ======================================================== */	

#footer-media embed {padding:5px;border:1px solid #aaa;margin-top:5px;margin-bottom:10px;overflow:auto;}

/*======================================================== OTHER STYLES ======================================================== */

/* Portfolio Pages */
#port #sidebar li {border-bottom:1px solid #ccc;padding:5px;margin-bottom:0;list-style:none;margin-left:0;}
#port #sidebar li a {color:#555;text-decoration:none;}
#port #sidebar li a:hover {color:#222;}

#port #text p.alt {display:none;}

#port_web {border:2px solid #bbb;margin-bottom:15px;margin-top:5px;}

img#port_feat {width:240px;height:150px;background:#ccc;display:block;border:1px solid #aaa;margin-bottom:5px;}

/* Flickr Widget */
.flickr_pics {margin-bottom:15px;margin-top:5px;overflow:auto;}
.flickr_pics img {border: 1px solid #ccc;margin-right:3px !important;width:70px;height:70px;float:left;}

/* 'More' Links */
.more {font-size:80%;}
.more a {color:#888;}
.more a:hover {color:#444;}

/* Staff Directory */
.directory p {float:left;width:210px;height:40px;}
.directory p .directory_extra {font-size:75%;color:#aaa;}
.office p {height:55px;}

#serv #sidebar ul.services li, #help #sidebar ul li {line-height:125%;margin-bottom:10px;}
#serv #sidebar ul.services li a {font-size:90%;}

div.testi {/*padding:10px;width:80%;margin:15px auto;background:#eee;border:1px solid #aaa;*/margin-bottom:20px;}
div.testi p {font-style:italic;line-height:135%;}
div.testi p.person {text-align:right;font-style:normal;}

ul.categories {overflow:auto;}
ul.categories li {float:left;width:200px;}


/* Banners */
#banner .ad {background:#f1f4f6 url(images/bkg_square.gif);}
#home .ad {background:#f1f4f6 url(banner/test-banner.jpg) no-repeat top left;}
#serv .ad {background:#f1f4f6 url(banner/banner_services.jpg) no-repeat top left;}
#myac .ad {background:#f1f4f6 url(banner/banner_portfolio.jpg) no-repeat top left;}
#cont  .ad {background:#f1f4f6 url(banner/banner_helpdesk.jpg) no-repeat top left;}
#abou .ad {background:#f1f4f6 url(banner/banner_oldcity.jpg) no-repeat top left;}
.nobord {border:0 !important;}

#help dl {line-height:135%;}
#help dt {font-weight:bold;margin-bottom:5px;}
#help dd {margin-bottom:15px;}
#help dl.tutorial dd img {width:200px;display:block;border:2px solid #ccc;margin-top:5px;}
#help .tutorial img {border:2px solid #ccc;}

#help table.form {}
#help table.form td {padding:3px;}