/*
   style.css
   marketingmechanics
   
   Created by Oxygen Kiosk on 2008-12-01.
   Copyright 2008 Oxygen Kiosk. All rights reserved. !
*/

* {margin:0;padding:0;}
html, body {height: 100%;}
html {background:#333333;}
body {font-family: Helvetica Neue, Arial,Helvetica,sans-serif; font-size:76%; line-height:1.4; margin:0 auto; width:1000px; color: #000;}

/* ============== */
/* = Typography = */
/* ============== */
a {text-decoration:none;}
h1 {display:none;}

h2, strong, dt, th, caption, legend {font-weight: bold;}
h2 {font-size: 2em; line-height: 1.7em; color: #666; margin-bottom: 0.5em;}
h3 {font-size: 1.5em; color: #FF8B00; margin-bottom: 1em;}
h4 {font-size: 1.2em; color: #FF8B00; margin-bottom: 1em;}
p, li, h4, dt, dd, th, td, caption {font-size: 1.1em;}
td td {font-size: 1em;}
li p, li li {font-size: 1em;}
em, cite {font-style: oblique;}

p, ol, ul, dl, blockquote, table {margin-bottom: 1em;}

p {text-align: justify;}

a {color: #0F2F2E; text-decoration: underline;}
	a img {border: none;}

blockquote {border: 1px solid #999;}
	blockquote p {margin: 1em; font-size:  1em;}
ul {list-style: disc outside; margin-left: 20px;}
ol {list-style: decimal outside; margin-left: 20px;}

table {width: 100%; border-left: 1px solid #999; border-top: 1px solid #999;}
caption{text-align: center;}
td, th {border-bottom: 1px solid #999; border-right: 1px solid #999; padding: 5px;}
th {text-align: center;}
tfoot td {font-weight: bold;}

td img {display:  block;}

/* ========= */
/* = Forms = */
/* ========= */
fieldset {border: none;}
legend {margin-bottom: 1em; font-size: 1.6em;}
form ol {list-style: none; margin: 0; margin-bottom: 1em; padding-top: 1em;}


form ol {overflow: hidden; display: inline-block;} form ol {display: block;}

form ol li {list-style: none; float: left;}
form ol li label {float: left; width: 150px;}
	form ol.topics li {margin-bottom: 0.5em;}
	form ol.topics li label {width: 200px;}
	form ol.topics li input {margin-top: 1px; margin-right: 5px;}
	form ol.topics li.newline {clear: left; width: 100%;}
		form ol.topics li.newline label{width: auto;}

form ol li input, form ol li textarea {float: left;}
label {display: block; }
textarea, form ol li textarea {width: 315px; height: 100px; }
form ol li.name, form ol li.company, form ol li.message, form ol li.referred { margin-bottom: 1em;}
form ol li.name input, form ol li.company input, form ol li.message textarea { width: 315px;background: #efefef; border: 1px solid #777; padding: 5px;}
form ol li.name label, form ol li.company label, form ol li.message label, form ol li.referred label{ text-align: right; margin-right: 10px;}

form ol li.submit {clear: left;}	

hr {color: #000;}

h3.examples-heading {color:  #fff;}

img.banner-image {display: block;}
/* ========== */
/* = Layout = */
/* ========== */
#header {background:#ff8b00;}
	#header object {display: block; clear: left;}
#wrapper {background: url('background.gif') repeat-y #fff;}
	body.one-column #wrapper {background: #fff;}
	#page-image {width: 1000px; overflow: hidden; clear: left;}
	#content, #content-wide {background:#fff url('infocel_background.gif') top right no-repeat; padding: 1em 25px 25px 25px;}
	#content {width:690px; float:left; display: inline; overflow: hidden;}
	#sidebar {float:right; padding-top: 1em; display: inline; width: 250px;}
		#sidebar object {margin-right:5px; display: block; margin-bottom: 15px;}
		#sidebar div  {width:240px; margin-right: 10px;}
		#sidebar .top {background: url(ad_top.gif) top left no-repeat #fff;height:14px; }
		#sidebar .bottom {background:url(ad_btm.gif) top left no-repeat;height:14px;}
		#sidebar .content {background-color:#4D4D4D;border-left:3px solid #fff;border-right:3px solid #fff; width:204px;padding:5px 15px;}
			#sidebar .content p {padding:5px 5px;  font-weight:900; color:#fff; margin-bottom: 0;}
#sidebar .content .twitter_content{width:180px; height:150px; overflow:auto; padding-right:5px; text-align:left; font-size:11px;}
#sidebar .content #twittertitle{color:#fff;line-height:120%;font-size:11px;}
	#bottom {height:22px; width:1000px; clear:both;}
		body.one-column #bottom {background-image: url(full-width-bottom.png);}
		body.two-columns #bottom {background-image: url(content_bottom.gif);}
	#footer {margin-top:20px;margin-bottom:20px;text-align:center;}
	#footer p {color: #a6a6a6; font-size: 0.9em; text-align: center;}
	#footer a {color:#A6A6A6; padding-left:1px;}
	#footer a.none {color:#A6A6A6;font-size: 0.9em;text-transform: uppercase;border-bottom:1px solid #a6a6a6; padding-left:1px;}
	#QE_Toolbar h1 {display:inline;}
object {z-index:-5000; }

#sidebar p {margin-right: 20px; margin-bottom: 0px;}
	#sidebar p a {color: #fff;text-align:left !important;}


/* ======================== */
/* = Page-specific styles = */
/* ======================== */

div#sidebar .content a {color: #fff; text-decoration: none;text-align:left !important;}

/* Scrolling Content Pages */

/* Accordion */
ul#menu-listing {list-style: none; width: 190px; float: left; margin-left: -25px; display: inline;}
	ul#menu-listing li, div.section ul {list-style: none; margin-bottom: 0;} 
		ul#menu-listing li a {display: block; border-bottom: 1px solid #000; padding: 0.3em 0; cursor: pointer; padding-left: 25px; font-weight: bold; font-size: 0.9em; background: #fff; text-decoration: none;}
			ul#menu-listing li.selected a, ul#menu-listing li.active a {color: #FF8B00; border-bottom: 1px solid #FF8B00;}
			
			/* Second Level*/
			ul#menu-listing li ul {margin: 0; display: none;}
				ul#menu-listing li.active ul {display: block;}
			ul#menu-listing li ul li {font-size: 0.9em; padding-left: 20px; margin-bottom: 0;}
			ul#menu-listing li ul li a {color: #000; border-bottom: none; margin-bottom: 0;}
				ul#menu-listing li.active ul li.active a {color: #FF8B00; }
			ul#menu-listing li.selected ul li a, ul#menu-listing li.active ul li a {color: #000; border-bottom: none;}
body.one-column ul#menu-listing {margin-right: 20px;}
			
div.content-scroll {width: 755px; float: left; height: 450px; position: relative; overflow: hidden; }
	
div.section {float: left; clear: both; position: relative; height: 450px; width: 755px;}
	div.section ul li p img {float: left; margin: 0 1em 1em 0;}
	
div.words {float: left; margin-left: 20px; width: 490px;}	
/*div.words {width: 490px; margin-left: 200px;}	*/
/* Satisfied Customers Page */
	body.satisfied-customers div.content-scroll {width: 470px; height: 500px;}
	body.satisfied-customers div.section {width: 470px; height: 500px;}
	
/* Portfolio Page */
div#portfolio-logos {width: 725px; overflow: hidden; height: 80px; float: left; margin-top: 20px;  margin-right: -20px;padding: 10px;}
	div#portfolio-logos ul {list-style: none; overflow: hidden; display: inline-block; width: 1000px; height: 150px;} div#portfolio-logos ul {display: block;}
		div#portfolio-logos ul li {list-style: none; float: left;}
			div#portfolio-logos ul li a {}
				div#portfolio-logos ul li a img {border: none;}
a.prev, a.next {float:  left; margin-top: 30px;}
a.prev {background: url(img/back.png) center center no-repeat; display: block; width: 30px; height: 80px; margin-right: 10px;}
a.next {background: url(img/fwd.png)  center center no-repeat; display: block; width: 30px; height: 80px;}

body.community-spirit #content-wide object {float: right; margin: 0 0 1em 1em;}

ul.examples {list-style: none; display: inline-block; overflow: hidden; margin-left: 0;}ul.examples {display: block;}
	ul.examples li {float: left; list-style: none; margin-right: 10px; height: 80px; }
	div#sidebar ul.examples li img {padding: 2px; background: #fff; border: none;}

img#main-image {max-width: 500px;}


table.contact-table, table.contact-table * {border: none; padding: 0;}

ul.fullsize li {display: block; float: none; margin-bottom: 1em; height: auto;}

#show {text-decoration: underline; font-weight: bold; cursor:  pointer;}


table.links, table.links td {padding: 0; border: none;}
/* ============== */
/* = Navigation = */
/* ============== */
ul#navigation {border-top:3px solid #fff; border-bottom:3px solid #fff; list-style:none; background-color:#4d4d4d; text-align: center; padding-left: 100px; float: left; width: 900px;}
	ul#navigation li {color:#fff; font-weight:900; float: left; font-family: "AuraOblique", Arial,Helvetica,sans-serif; height: 30px;}
		ul#navigation li a {color:#fff; text-decoration: none; display: block; line-height: 30px; height: 30px; text-align: left; }
			ul#navigation li a:hover, ul#navigation li.active a {color: #FF8B00;}
		ul#navigation li ul {border:0;}
			ul#navigation li ul li {float:none; display:block;/* margin:10px; */padding:0; width:auto; font-family: Arial,Helvetica,sans-serif; height: auto;}
				ul#navigation li ul li a, ul#navigation li.active ul li a {font-size: 0.8em; padding: 0.5em 1em; line-height: 1.2; height: auto; text-align: left; display: block; color: #fff; text-indent: 0px;}
					ul#navigation li ul li a:hover {background: transparent; color: #FF8B00;}
					
					
/* Replace the top level menu text with an image */
ul#navigation li a {text-indent: -9999em;}
ul#navigation li a#menu1  {background: url(img/menu-home.png) center left no-repeat; width: 135px;}
ul#navigation li a#menu68  {background: url(img/menu-about-us.png) center left no-repeat; width: 168px;}
ul#navigation li a#menu47  {background: url(img/menu-our-services.png) center left no-repeat; width: 200px;}
ul#navigation li a#menu53  {background: url(img/menu-portfolio.png) center left no-repeat; width: 187px;}
ul#navigation li a#menu6  {background: url(img/menu-contact-us.png) center left no-repeat; width: 138px;}	


/*** ESSENTIAL STYLES ***/
.menu, .menu * {
	margin:			0;
	list-style:		none;
}
.menu {
	line-height:	1.0;
}
.menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
	visibility: hidden;
}
.menu ul li {
	width:			100%;
}
.menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.menu li {
	position:		relative;
}
.menu a {
	display:		block;
	position:		relative;
}
.menu li:hover ul,
.menu li.sfHover ul {
	left:			-10px;
	top:			33px; /* match top ul list item height */
	z-index:		99;
}
ul.menu li:hover li ul,
ul.menu li.sfHover li ul {
	top:			-999em;
}
ul.menu li li:hover ul,
ul.menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.menu li li:hover li ul,
ul.menu li li.sfHover li ul {
	top:			-999em;
}
ul.menu li li li:hover ul,
ul.menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.menu ul .sf-sub-indicator { background-position:  -10px 0; }
.menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.menu ul a:focus > .sf-sub-indicator,
.menu ul a:hover > .sf-sub-indicator,
.menu ul a:active > .sf-sub-indicator,
.menu ul li:hover > a > .sf-sub-indicator,
.menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('menudrop.png') no-repeat bottom right;
	padding:0;
	width:160px;
	top: 0;
	left: -10px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

/*.menu ul li a {
	font-weight:500;
	border-bottom:1px dotted #fff;
	display:inline;
	line-height:1.4;
	margin-bottom:10px;
}*/