@charset "UTF-8";
/* CSS Document */

body {
	background: url(../images/header_bg.gif) repeat-x top;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#454545;
	}
	
a {}

p { line-height: 25px; margin-bottom: 5px;}


h1 {
	color: #8f2327;
	font-size: 38px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	padding: 3px 0px;
	margin: 0;
	margin-bottom: 10px;
	
	border-bottom: 1px solid #d5d5d5;
	}
h2 {
	color: #8f2327;
	font-size: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 3px 0px;
	margin: 0;
	}
h3 {
	color: #8f2327;
	font-size: 18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 3px 0px;
	margin: 0;
	}

.clear { clear: both; }

.brdr-btm-gray { border-bottom: 1px solid #ccc;}
.padding { padding: 10px; }


.cookiecrumbs {
	position: absolute;
	right: 20px;
	top: 10px;
	text-align: right;
	color: #666666;
	z-index:10;
	}

.cookiecrumbs a { color: #8f2327; text-decoration: none; }

.red { color: #8f2327;}



/* TEMPLATE STYLES */
#container {
	margin: 0 auto;
	padding: 0;
	width: 910px;
	position: relative;
	}

#Header {
	height: 106px;
	position: relative; 
	}
#Header #logo {
	position: absolute;
	left: 0px;
	top: 15px;
	}
	
#Header #logo a {}
#Header #contact {
	position: absolute;
	top: 0px;
	right: 0px;
	}

/* NAVIGATION CONTROLS */


#Navigation {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 20;
	}
#Navigation ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	}
#Navigation ul li.tab {
	float: left;
	background: transparent url(../images/header_tabs.gif) left bottom no-repeat;
	margin-right: 2px;
	}

#Navigation ul li.tab a {
	display: block;
	padding: 40px 18px 10px 8px;
	margin-left: 8px;
	background: transparent url(../images/header_tabs.gif) right bottom repeat-x;
	color: #fff;
	text-decoration: none;
	}
	
	
#Navigation ul li.tab:hover { background-position: left 0px; }
#Navigation ul li.tab:hover a { padding: 53px 18px 10px 8px; background-position: right 0px;}




/* Navigation Controls */

#Home #Navigation .home { background-position: left 0px; }
#Home #Navigation .home a { padding: 53px 18px 10px 8px; background-position: right 0px; }

#Services #Navigation .services { background-position: left 0px; }
#Services #Navigation .services a { padding: 53px 18px 10px 8px; background-position: right 0px; }

#Portfolio #Navigation .portfolio { background-position: left 0px; }
#Portfolio #Navigation .portfolio a { padding: 53px 18px 10px 8px; background-position: right 0px; }

#About #Navigation .about { background-position: left 0px; }
#About #Navigation .about a { padding: 53px 18px 10px 8px; background-position: right 0px; }

#Contact #Navigation .contact { background-position: left 0px; }
#Contact #Navigation .contact a { padding: 53px 18px 10px 8px; background-position: right 0px; }



/* DROP DOWNS */
	
#Navigation ul ul {
	position: absolute;
	background: url(../images/nav_drop_bottom.gif) bottom no-repeat;
	display: none;
	margin-left: -1px;
	margin-top: 1px;
	padding-bottom: 8px;
	}

#Navigation li:hover ul {
	}	

#Navigation li li {
	margin: 0;
	padding: 0;
	background: #727272;
	background-image: none;
	}

#Navigation li li a {
	display: block;
	padding: 9px 15px 5px 15px;
	color: #fff;
	text-decoration: none;
	width: 170px;
	}



#Navigation li li a:hover {
	background: #999999;
	}
	
	
	







#Content { min-height: 560px;}
#Content .headbar_top {}	
#Content .livearea {}
#Content .headbar_bottom {}	


#Content .oasis { background: url(../images/oasis_bg.gif) repeat-x; }

#Content .livearea { 
	position: relative;
	}

#Content a {
	color: #8f2327;
	}


#Footer {
	color: #454545;
	background: #e7e7e7;
	margin-top: 5px;
	}

#Footer .ft_inner { width: 890px; margin: 0px auto; padding: 10px; }
	
#Footer .links {}
#Footer .links a { color: #454545; text-decoration: none; padding: 0px 4px; }
#Footer .links a:hover { text-decoration: underline; }




/* HOMEPAGE STYLES */

#Home .oasis {
	margin-bottom: 8px;
	background: url(../p_images/pitem_hero_cliquepick.jpg) no-repeat right top;
	height: 260px;
	}
	
#Home .oasis_quote { font-size: 30px; font-family: "Rockwell", Georgia, "Times New Roman", Times, serif; color: #6d6d6d; width: 350px; padding-top: 70px; }	
#Home .oasis_quote_by { display: block; font-size: 12px; text-align: right; margin-top: 20px; }	
	
#Home .oasisover {}

#Home .content {
		background: #454545;
		color: #c8c8c8;
		padding: 8px;
		position: relative;
		}
#Home .content a { color: white;}

#Home .content h1 { color: white; margin-bottom: 5px;}
#Home .content h2 { color: #c8c8c8; margin-bottom: 5px;}

#Home .content p { margin-bottom: 15px;}


#Home .col-left {
	width: 610px;
	float: left;
	}
	
#Home .clientlist { 
	background: #262626;
	padding: 8px;
	position: absolute;
	width: 610px;
	bottom: 10px;
	left: 10px;
	}
	
#Home .clientlist h2 { color: white;}
	

#Home .clientlist ul {
	padding: 5px;
	margin: 0;
	list-style-type: none;
	display: table-cell;
	}
#Home .clientlist ul li {
	margin: 0;
	padding: 0;
	float: left;
	width: 180px;
	color: #4d4d4d;
	list-style-type: none;
	}
#Home .clientlist ul li a {
	color: #c8c8c8;
	display: block;
	background: url(../images/bullet_dash.gif) left no-repeat;
	padding: 5px 10px;
	margin-left: 10px;
	}
	
#ServiceBar {
	float: right;
	width: 250px;
	padding: 5px;
}

#ServiceBar .em1 {}
	
#ServiceBar h3 {
	color: #c8c8c8;
	font-weight: normal;
	font-size: 18px;
	padding: 14px 8px;
	}
	
	
/* SERVICES PAGE */

#SIcons {
	margin: 0;
	padding: 0;
	list-style-type: none;
	width: 750px;
	margin: 0 auto;
	}
#SIcons li {
	margin: 0;
	padding: 0;
	float: left;
	display: inline;
	}
#SIcons li a {
	display: block;
	padding: 170px 0px 0px 0px;
	width: 185px;
	height: 80px;
	text-align: center;
	color:#676767;
	font-size: 18px;
	text-decoration: none;
	}
#SIcons li a:hover {
	text-decoration: underline;
	}
	
#SIcons li.web a {
	background: url(../images/servicons_web.gif) no-repeat;
	}
#SIcons li.apps a {
	background: url(../images/servicons_apps.gif) no-repeat;
	}
#SIcons li.cards a {
	background: url(../images/servicons_cards.gif) no-repeat;
	}
#SIcons li.logo a {
	background: url(../images/servicons_logo.gif) no-repeat;
	}
#SIcons li.search a {
	background: url(../images/servicons_search.gif) no-repeat;
	}
#SIcons li.broch a {
	background: url(../images/servicons_broch.gif) no-repeat;
	}
#SIcons li.promo a {
	background: url(../images/servicons_promo.gif) no-repeat;
	}
#SIcons li.illus a {
	background: url(../images/servicons_illus.gif) no-repeat;
	}

/* ON STATE */
	
#SIcons li.web a:hover {
	background: url(../images/servicons_web_on.gif) no-repeat;
	}
#SIcons li.apps a:hover {
	background: url(../images/servicons_apps_on.gif) no-repeat;
	}
#SIcons li.cards a:hover {
	background: url(../images/servicons_cards_on.gif) no-repeat;
	}
#SIcons li.logo a:hover {
	background: url(../images/servicons_logo_on.gif) no-repeat;
	}
#SIcons li.search a:hover {
	background: url(../images/servicons_search_on.gif) no-repeat;
	}
#SIcons li.broch a:hover {
	background: url(../images/servicons_broch_on.gif) no-repeat;
	}
#SIcons li.promo a:hover {
	background: url(../images/servicons_promo_on.gif) no-repeat;
	}
#SIcons li.illus a:hover {
	background: url(../images/servicons_illus_on.gif) no-repeat;
	}
	
	
	
/* SERVICE WEB */

#Services .col-left {
	width: 250px;
	float: left;
	background: #e0e0e0;
	padding: 10px 10px;
	position: relative;
	}

#Services .col-left .txtel1 {
	color: #666666;
	font-size: 16px;
	margin-bottom: 4px;
	}

#Services .col-left ul {
	margin: 0;
	padding: 0;
	}	

#Services .col-left ul li {
	list-style-type: none;
	padding: 3px 0px;
	margin: 0;
	}
	
#Services .col-left ul li a {
	background: url(../images/arrow_right_gray.gif) no-repeat left;
	padding-left: 10px;
	color: #333333;
	
	}	
	
#Services .col-right {
	width: 620px;
	float: right;
	position: relative;
	}
	
	
	
	
/* SERVICES OASIS */
#Services .oasis {
	margin: 10px 0px;
	position: relative;
	}
	
#Services #Apps .oasisover {
	background: url(../images/service_oasis_apps.png) no-repeat;
	height: 250px;
	width: 250px;
	position: absolute;
	top: -18px;
	left: 15px;
	}	

#Services #Web .oasisover {
	background: url(../images/service_oasis_web.png) no-repeat;
	height: 250px;
	width: 250px;
	position: absolute;
	top: -15px;
	left: 15px;
	}
	
#Services #Brochures .oasisover {
	background: url(../images/service_oasis_brochure.png) no-repeat;
	height: 250px;
	width: 250px;
	position: absolute;
	top: -20px;
	left: 15px;
	}	
#Services #Cards .oasisover {
	background: url(../images/service_oasis_cards.png) no-repeat;
	height: 230px;
	width: 300px;
	position: absolute;
	top: -20px;
	left: 0px;
	}

#Services #Illustration .oasisover {
	background: url(../images/service_oasis_illus.png) no-repeat;
	height: 230px;
	width: 300px;
	position: absolute;
	top: 35px;
	left: 10px;
	}	

#Services #Promo .oasisover {
	background: url(../images/service_oasis_promo.png) no-repeat;
	height: 250px;
	width: 300px;
	position: absolute;
	top: -27px;
	left: 15px;
	}	
	
#Services #Logo .oasisover {
	background: url(../images/service_oasis_logo.png) no-repeat;
	height: 250px;
	width: 300px;
	position: absolute;
	top: -27px;
	left: 15px;
	}
	
#Services #Search .oasisover {
	background: url(../images/service_oasis_search.png) no-repeat;
	height: 250px;
	width: 300px;
	position: absolute;
	top: -20px;
	left: 15px;
	}	
	
	


/* PORTFOLIO PAGE */


#PortfolioPage{
	height: 500px;
	width: 100%;
	position: relative;
	}

#PortfolioPage a {
	color: #666666;
	font-size: 14px;
	}


#PortfolioPage .web {
	width: 350px;
	position: absolute;
	left: 30px;
	top: 50px;
	text-align: right;
	}
	
#PortfolioPage .web .em2 a{
	position: absolute;
	left: 0;
	top: 100px;
	background: url(../images/arrow_right.gif) right no-repeat;
	padding-right: 12px;
	}	
	
#PortfolioPage .logo {
	position: absolute;
	right: 200px;
	top: 0px;
	width: 350px;
	}
	
#PortfolioPage .logo .em2 a {
	position: absolute;
	right: 0;
	top: 100px;
	background: url(../images/arrow_left.gif) left no-repeat;
	padding-left: 12px;
	}	

	
#PortfolioPage .cards {
	position: absolute;
	left: 120px;
	top: 270px;
	width: 350px;
	text-align: right;
	}

#PortfolioPage .cards .em2 a{
	position: absolute;
	left: 0;
	top: 150px;
	background: url(../images/arrow_right.gif) right no-repeat;
	padding-right: 12px;
	}	
	
#PortfolioPage .print {
	position: absolute;
	right: 60px;
	top: 200px;
	width: 350px;
	}
	
#PortfolioPage .print .em2 a {
	position: absolute;
	right: 40px;
	top: 200px;
	background: url(../images/arrow_up.gif) left no-repeat;
	padding-left: 12px;
	}	
	

/* WEB PORTFOLIO */

#WebPortfolio {}
#WebPortfolio .leftcolumn {
	float: left;
	width: 450px;
	}
#WebPortfolio .rightcolumn {
	float: right;
	width: 450px;
	}
#WebPortfolio #element{
	height: 200px;
	padding: 10px;
	
	}
	
#WebPortfolio #element .portimage {
	width: 195px;
	height: 185px;
	float: left;
	margin-right: 10px;
	}

#WebPortfolio #element .titletxt {
		float: left;
		width: 200px;
		}
#WebPortfolio #element .txt1 {
	font-size: 16px;
	color: #8f2327;
	}
	
#WebPortfolio #element .list {
	padding: 5px 3px;}	
	
#WebPortfolio #element .list li {
	list-style-type: none;
	padding-left: 10px;
	margin-left: 10px;
	background: url(../images/arrow_gray_right.gif) left 2px no-repeat;
	padding-bottom: 5px;
	}
#WebPortfolio #element .viewlink a {
	background: url(../images/arrow_right.gif) right no-repeat;
	padding-right: 12px;
	}
	
/* LOGO PORTFOLIO */

#LogoPortfolio {}

#LogoBox {
	padding: 0;
	list-style-type: none;
	width: 760px;
	margin: 0 auto;
	}
#LogoBox li {
	margin: 0;
	padding: 0;
	list-style-type: none; 
	background: #e8e8e8; 
	padding: 10px;
	margin-left: 6px; 
	margin-right: 6px;
	margin-top: 10px;
	float: left; 
	width: 340px;
	}
#LogoBox .image { background: #fff; padding: 5px; margin: 0 auto; width: 333px;}
#LogoBox .title { font-weight: bold; font-size: 16px; }	
	
	
/* PRINT PORTFOLIO */

#PrintPortfolio {}


#PortBox {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#PortBox li {
	margin: 0;
	padding: 0;
	list-style-type: none; 
	background: #e8e8e8; 
	padding: 10px;
	margin-left: 6px; 
	margin-right: 6px;
	margin-bottom: 10px;
	float: left; 
	width: 245px;
	}
#PortBox .image { background: #fff; padding: 5px; margin: 0 auto; width: 233px; margin-bottom: 10px; }
#PortBox .title { font-weight: bold; font-size: 16px; }


/* CARD PORTFOLIO */

#CardBox {
	padding: 0;
	list-style-type: none;
	width: 760px;
	margin: 0 auto;
	}
#CardBox li {
	margin: 0;
	padding: 0;
	list-style-type: none; 
	background: #e8e8e8; 
	padding: 10px;
	margin-left: 6px; 
	margin-right: 6px;
	margin-bottom: 10px;
	float: left; 
	position: relative;
	width: 340px;
	}
#CardBox .image { background: #fff; padding: 5px; margin: 0 auto; width: 333px; }
#CardBox .title { font-weight: bold; font-size: 16px; }	
	
	
/* CONTACT PAGE */

#QuickContact {
	float: left;
	margin-left: 10px;
	position: relative;
	}


#QuickContact .contbg {
	background: url(../images/QuickContact_bg_01.gif) no-repeat top;
	padding-top: 8px;
	}
	
#form_contact {
	background: #c2c2c2 url(../images/QuickContact_bg_02.gif) no-repeat bottom;
	width: 352px;
	padding: 15px;
	}
		
#QuickContact input.styles { width: 330px; padding: 5px 10px; border: 0; margin-bottom: 8px; color:#333333; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#QuickContact textarea.styles { width: 330px; padding: 5px 10px; border: 0; margin-bottom: 8px; color:#333333; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

#QuickContact .secQues { width: 35px; text-align: center; padding: 5px 10px; background-color:#CC0000; color: #fff; float: left; margin-right: 8px; }
#QuickContact input.security { width: 266px; }

#QuickContact input.submit { 
	background: url(../images/button_submit.gif) no-repeat; 
	display: block;
	height:30px;
	width:92px;
	border:0;
	cursor:pointer;
	text-indent:-9999px;
	}


#QuoteBox {
	float: right;
	width: 400px;
	margin-right: 10px;
	position: relative;
	}
	
	
/* WEB PORTFOLIO PAGES */
#pItem {
	height: 330px;
	position: relative;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 10px;
}

#pItem ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	
	}
#pItem ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	}
#pItem ul li.pitemlogo {
	position: absolute;
	left: 10px;
	top: 30px;
	}
	
#pItem ul li.pitemlogo ul {
	padding: 0px 10px;
	margin-left: 20px;
	}

#pItem ul li.pitemlogo ul li{
	margin: 5px;
	padding: 0px;
	}	

#pItem ul li.pitemlogo ul li a{
	color: #333333;
	background: url(../images/arrow_gray_right.gif) no-repeat left;
	padding-left: 10px;
	}
	
#pItem ul li.pitemhero {
	position: absolute;
	right: 0;
	top: 50px;
	}
	
#pItem ul li.visitsite {
	position: absolute;
	left: 20px;
	top: 260px;
	}