body
{
    font-family:Tahoma, Geneva, sans-serif;
    color:#000;
    font-size:100.1%;
}
h1, h2, h3, h4, h5, h6, ul, ol, p
{
    padding:0;
    margin:0;
}
h1
{
    text-transform:uppercase;
    font-size:130%;
    padding-bottom:5px;
}
h2
{
    text-transform:uppercase;
    font-size:115%;
    padding-bottom:5p;
}
h3
{
    font-weight:normal;
    padding-bottom:5px;
}
p
{
    line-height:1.35em;
    padding:5px 0 10px;
}
em
{
    padding-right:4px;
}
.hide
{
    display:none;
}
.left
{
    float:left;
}
.right
{
    float:right;
}
.clear
{
    clear:both;
}
.nopadding
{
    padding:0;
    margin:0;
}
.inside
{
    padding:10px;
}
.LoadingPanel
{
	background:#f3f3e2 url(../Images/loading.gif) no-repeat center center;
}
.red
{
    color:#EF4136;
}
.gray
{
    color:#6F6F6F;
}
p.bigger
{
    font-size:100%;
}
div.blockMsg 
{
    width:40%;
    top:10%;
    left:30%;
    text-align:center;
    background-color:#C9C9C9;
    border:1px solid #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); 
    -moz-opacity:.70;
    opacity:.70;
    padding:15px;
    color:#EF3F36;
}

#content ul.flower
{
    margin:10px 0 10px 10px;
}
#content ul.flower li
{
    list-style:none;
    background:url(../Images/bullet.gif) no-repeat left 2px;
    padding:0 0 15px 25px;
}
#content ul.flower li label
{
    padding-right:10px;
}
#content ul.flower li div.extra
{
    padding-top:5px;
    font-size:90%;
    color:#4F4F4F;
}
#content ul.greyflower
{
    margin:10px 0 5px 10px;
}
#content ul.greyflower li
{
    list-style:none;
    background:url(../Images/bullet-icon-on-grey.gif) no-repeat left 3px;
    padding:0 0 5px 20px;
    font-size:90%;
}
#content ul.greyflowerBlog
{
    margin:5px 0 5px 5px;
}
#content ul.greyflowerBlog li
{
    list-style:none;
    background:url(../Images/bullet-icon-on-grey.gif) no-repeat left 3px;
    padding:0 0 5px 15px;
    font-size:80%;
    line-height:1.05em
}
#content ul.greyflowerTweet li
{
    font-size:80%;
}
a.social
{
    background-position:left -1px;
    background-repeat:no-repeat;
    padding:1px 0 4px 30px;
    font-size:90%;
}
a.twitter
{
    background-image:url(../Images/icon_twitter.gif);
}
a.blog
{
    background-image:url(../Images/icon_blog.gif);
}

/* Structure */
body 
{
    background:#202020 url(../Images/body-bg.jpg) repeat-x left top;
    margin:0;
    padding:0;
    text-align:center;
}
#pageWrapper
{
    width:1004px;
    margin:0 auto;
    text-align:left;
    font-size:100%;
}
#header
{
    background:#fff url(../Images/header-bg.gif) no-repeat right top;
}
#header h1
{
	background:url(../Images/logo.gif) no-repeat left top;
	height:150px;
	width:500px;
	padding:0;
	margin:0;
	text-indent:-100em; 
	overflow:hidden;
	float:left;
}
#header h1 a 
{ 
	display:block; 
	height:150px 
}
p#contact
{
    float:right;
    margin:40px 100px 0 0;
    padding:10px 15px;
    text-align:right;
}
p#contact a
{
    color:#000;
    font-size:110%;
}
.hnav
{
   	background:#000 url(../Images/nav-bg.gif) repeat-x left top;
	clear:both;
	text-align:center;
	font-size:60%;
	font-family:Verdana, geneva, Sans-Serif;
	text-transform:uppercase;
	font-weight:bold;
	height:12px;
}
.hnav span
{
	text-transform:lowercase;
}
.hnav, .hnav ul li a
{
	/* need to middor veritcal padding on .hnav and child anchor elements
	 * because the anchors are _not_ block elements. since they are not
	 * block elements web browsers will not expand .hnav to contain them
	 * even with the extra padding. by applying the same padding to both
	 * the parent .hnav _looks_ like its containing the child anchor
	 * elements. 
	 */
	padding-top:10px;
	padding-bottom:10px;
}
.hnav ul, .hnav ul li
{
	display:inline;
	list-style-type:none;
	margin:0;
	padding:0;
}
.hnav ul li a
{
	margin:0 -1px 0 0;
	padding-left:20px;
	padding-right:20px;
	border-left:solid 1px #BFC0C0;
	border-right:solid 1px #BFC0C0;
	white-space:nowrap;
}
.hnav ul li.first a
{
	border-left:0;
}
.hnav ul li.last a
{
	border-right:0;
}
.hnav ul li a:link, .hnav ul li a:visited
{
	text-decoration:none;
	color:#BFC0C0;
}
.hnav ul li a:active, .hnav ul li a:hover, .hnav ul li a:focus
{
    background:#3E3E3E url(../Images/nav-ovr-bg.gif) repeat-x left top;
    color:#fff;
}
.hnav ul li span.divider
{
	display:none;
}
* html .hnav ul li, * html .hnav ul li a
{
	width:1%; /* IE/Mac needs this */
	display:inline-block;	/* IE/Mac needs this */
	/* \*/
		width:auto;
		display:inline;
	/* reset above hack */
}
* html .hnav, * html .hnav ul a
{
	/* \*/ height:0.01%; /* hasLayout hack to fix render bugs in IE/Win. 
				 IE/Mac will ignore this rule. */
}
* html .HNAV
{
	padding:0;	/* IE5/Win will resize #hnav to fit the heights of its
			   inline children that have vertical padding. So this
			   incorrect case selector hack will be applied only by
			   IE 5.x/Win */
}

/* Selected states - uses a body class and a list class to find the item */
.bAbout .hnav ul li.hAbout a:link, .bAbout .hnav ul li.hAbout a:visited,
.bPortfolio .hnav ul li.hPortfolio a:link, .bPortfolio .hnav ul li.hPortfolio a:visited,
.bDesign .hnav ul li.hDesign a:link, .bDesign .hnav ul li.hDesign a:visited,
.bMarketing .hnav ul li.hMarketing a:link, .bMarketing .hnav ul li.hMarketing a:visited,
.bExisting .hnav ul li.hExisting a:link, .bExisting .hnav ul li.hExisting a:visited,
.bFAQ .hnav ul li.hFAQ a:link, .bFAQ .hnav ul li.hFAQ a:visited,
.bEcommerce .hnav ul li.hEcommerce a:link, .bEcommerce .hnav ul li.hEcommerce a:visited,
.bContact .hnav ul li.hContact a:link, .bContact .hnav ul li.hContact a:visited
{
    background:#3E3E3E url(../Images/nav-ovr-bg.gif) repeat-x left top;
    color:#fff;
    cursor:auto;
}

/* Tabs */
#tabs 
{
	float:left;
	width:100%;
	background:url(../Images/tabs-bg.jpg) no-repeat left bottom;
	padding-top:240px;
	line-height:normal;
	text-transform:uppercase;
	font-size:80%;
}
#tabs ul.tabnav
{
	float:right;
	width:550px;
	padding:0;
	margin:0; 
	list-style-type:none;
}
#tabs ul.tabnav li
{
	display:inline;
	margin:0;
	padding:0;
}
#tabs ul.tabnav li a 
{
	padding:0 0 0 22px;
	font-weight:bold; 
	background:url(../Images/tab_left_both.gif) no-repeat left top; 
	float:left; 
	color:#000;
	margin:0;
	text-decoration: none;
}
#tabs ul.tabnav li a span
{
	padding:11px 28px 10px 6px;
	display:block; 
	font-weight:bold; 
	background:url(../Images/tab_right_both.gif) no-repeat right top; 
	float:left; 
	color:#000; 
	text-decoration:none;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs ul.tabnav li a span {float:none;}
/* End IE5-Mac hack */
#tabs ul.tabnav li a:hover span 
{
	color:#411E0A;
}
#tabs ul.tabnav li a:hover, #tabs ul.tabnav li a:focus, #tabs ul.tabnav li a:active
{
	background-position:0% -150px;
	outline:0;
}
#tabs ul.tabnav li a.selected
{
	background-position:0% -300px;
	outline:0;
}
#tabs ul.tabnav li a:hover span, #tabs ul.tabnav li a:focus span, #tabs ul.tabnav li a:active span
{
	background-position:100% -150px;
	outline:0;
}
#tabs ul.tabnav li a.selected span 
{
	background-position:100% -300px;
	outline:0;
}
/* End Tabs */
.radr_Default .radr_clipRegion
{
    width:100%;
    height:100%;
    background-color:transparent !important;
    overflow:auto;
    position:absolute;
}
.radr_Default .radr_item div 
{ 
    background-color:transparent !important; 
}
#tagline
{
    float:right;
    width:350px;
    padding:0;
    text-align:center;
    color:#fff;
    font-size:130%;
    margin:-120px 100px;
    text-transform:none;
}
#tagline a:link, #tagline a:visited , #tagline a:hover, #tagline a:active, #tagline a:focus
{
    color:#fff;
    text-decoration:none;
}
#tagline strong
{
    color:#FCB84B;
}
#content
{
    clear:both;
    background:#fff;
    padding-bottom:1px;
}
#footer
{
    background:#C9C9C9 url(../Images/footer-bg.gif) no-repeat left top;
}
#footer #contactForm p
{
    font-size:90%;
    line-height:1.1em;
    padding-bottom:5px;
}
#footer #contactForm label
{
    font-weight:bold;
    display:block;
    float:left;
    clear:left;
    width:90px;
    padding-top:3px;
    font-size:90%;
}
#footer #contactForm label.lblUpload
{
    width:85px;
}
#footer #contactForm .details
{
    float:left;
    width:160px;
    padding-top:3px;
    font-size:90%;
}
#footer .cfValidation
{
    border:solid 1px #A1A1A1;
    background:#BF0900;
    color:#ffffff;
    font-size:80%;
}
#footer .cfValidation h6
{
    font-size:90%;
    font-weight:bold;
    color:#ffffff;
    padding:10px;
}
#footer .cfValidation ul
{
    margin:0 10px 10px 25px;
}
#footer .cfValidation ul li
{
    list-style-type:square;
}
#footer #links
{
    padding:10px 30px 20px 30px;
    font-size:90%;
    color:#5F5F5F;
}
#footer #links ul
{
    float:right;
    width:650px;
    text-align:right;
}
#footer #links ul li
{
    list-style-type:none;
    display:inline;
    padding-left:10px;
    margin-left:10px;
    border-left:solid 1px #000;
}
#footer #links ul li.first
{
    padding-left:0;
    margin-left:0;
    border-left:0;
}
#footer #links a:link, #footer #links a:visited
{
    color:#000;
    font-weight:bold;
    text-decoration:underline;
}
#footer #links a:hover, #footer #links a:active, #footer #links a:focus
{
    text-decoration:none;
}

/* Common Layout Rules */
.col-one
{
    padding:25px 30px;
}
.col-header
{
    font-size:140%;
    padding:25px 30px 25px 30px;
}
.col
{
    float:left;
    width:328px;
    margin-left:10px;
}
* html #footer .col
{
    margin-left:0;
    border-left:10px;
}
.col-first
{
    margin-left:0;
}
.grey
{
    background:#E5E5E5;
}
.hpBoxOut
{
    min-height:300px;
    margin-bottom:8px;
}
* html .hpBoxOut
{
    height:300px;
}
.inside
{
    padding:20px 30px 0px;
}
.inside-top
{
    padding:25px 0;
}
.sendEmail a
{
    background:url(../Images/btn-send-email.jpg) no-repeat left top;
    display:block;
	height:89px;
	width:208px;
	padding:0;
	margin:0;
	text-indent:-100em; 
	overflow:hidden;
}

/* Homepage */
.hpProject
{
    height:80px;
    padding-top:10px;
    background:#EFEFEF;
}
.hpProject img
{
    float:left;
    width:40px;
    margin-left:5px;
    border:1px solid #6F6F6F;
}
.hpProject .desc
{
    float:right;
    width:213px;
}
.hpProject .desc a
{
    font-size:90%;
}
.hpProject .desc span
{
    font-size:80%;
}

/* Portfolio */
#portfolio
{
    background:#B71309 url(../Images/portfolio-bg.jpg) no-repeat left top;
}
#thumbView
{
    float:right;
    width:470px;
    padding-right:20px;
}
#thumbView .inside
{
    padding:15px 0;    
}
#fullView
{
    float:left;
    width:470px;
    padding-left:30px;
}
.homeView, .itemView
{
    margin:15px 0;
}
.insideItem
{
    padding:15px 20px;
    min-height:370px;
    border:1px solid #6F6F6F;
}
* html .insideItem
{
    height:370px;
}
.homeView .insideItem
{
    background:url(../Images/portfolio-home-bg.jpg) no-repeat left top;
}
.itemView .insideItem
{
    background:url(../Images/portfolio-item-bg.jpg) no-repeat left top;
}
.itemView .screenshot
{
    float:left;
    width:200px;
}
.itemView .screenshot img
{
    border:1px solid #8F8F8F;
}
.itemView .screenshot p
{
    font-size:80%;
}
.itemView .info
{
    float:right;
    width:210px;
    font-size:90%;
}
.itemView .info p
{
    padding:0;
}
.clientComments
{
    padding:0 20px 10px 10px;
    color:#fff;
    font-size:120%;
}

/* Case-Study */
#csPicture
{
    float:left;
    width:410px;
}
#csBody
{
    float:right;
    width:520px;
}

/* Other pages - minor tweaks */
#haveWebsite
{
    background:url(../Images/Existing-Website.jpg) no-repeat right bottom; 
    padding:25px 225px 70px 30px;
}
#internetMarketing
{
    background:url(../Images/Internet-Marketing-Google.jpg) no-repeat left bottom; 
}
#faq h3
{
    background:url(../Images/bullet.gif) no-repeat left 3px;
    padding:0 0 0 25px;
}
img.friends, img.websiteDesign, img.imImage, img.smallBeautiful
{
    float:right;
}