@charset "UTF-8";


/* BASIC HTML 
----------------------------------------------------------------------------------------------------*/

body  {
	font: 90%/24px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background: #fff;
	margin: 0; /* keep margin and padding zero */
	padding: 0;
	text-align: center;
	color: #4c4c4c;
}

a:focus {
	outline: 1px dotted;
}
hr {	
	margin: 5px 0px;
	color: #999;
	background: #999;
	border: 0 #999 solid;
	height: 1px;
}
ul {
	margin-bottom: 15px;
	margin-left: 15px;
	padding-left: 15px;
}
img{ 
	border: none;
}
img.center{
	display: block;
	margin: 0px auto 8px;
}
.pic{
	padding: 5px 0px;
}


/* TEXT
----------------------------------------------------------------------------------------------------*/
p {
	padding-top: 3px;
	padding-bottom: 5px;
	margin-top: 3px;
	margin-bottom: 5px;
}
h1 {    /* Main headings */
	font: 24px/30px Verdana, Arial, Helvetica, sans-serif;
	color: #c41230;
	margin: 0px 0px 8px;
	padding: 0px 0px 8px;
}
h2 {       /* Sub-headings on Home page */
	font: 17px Verdana, Arial, Helvetica, sans-serif;
	color: #c41230;
	margin: 5px 0px 0px;
	padding: 5px 0px 0px;
}
h3 {       /* Sub-headings on other pages; headings in sidebar */
	font: bold 15px/22px Arial, Helvetica, sans-serif;
	color: #4C4C4C;
	margin: 8px 0px 3px;
	padding: 8px 0px 3px;
}
h4 {
	font: bold 14px/20px Arial, Helvetica, sans-serif;
	margin: 5px 0px;
	padding: 5px 0px;
	color: #4c4c4c;
} 
.largeblack {
	font: bold 18px/24px Verdana, Arial, Helvetica, sans-serif;
	color: #4c4c4c;
}
.medblack {
	font: bold 100% Verdana, Arial, Helvetica, sans-serif;
	color: #4C4C4C;
}
.medblacknorm {
	font: 13px/20px Verdana, Arial, Helvetica, sans-serif;
	color: #4C4C4C;
}
.largered {
	font: 18px/24px Verdana, Arial, Helvetica, sans-serif;
	color: #c41230;
}
.medred {
	font: 14px/20px Verdana, Arial, Helvetica, sans-serif;
	color: #c41230;
}
.smallred {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #c41230;
}
.smallemred {
	font: italic 11px/22px Verdana, Arial, Helvetica, sans-serif;
	color: #c41230;
}
.tinygrey {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #4c4c4c;
}
.caption {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #4c4c4c;
	margin: 0px 0px 30px;
	text-align: center;
}
.red {
	color: #c41230;
}
.black {
	color: #000;
}
.bold {
	font-weight: bold;
}
.tinytext {
	font-size: 80%;
}
.credit {
	font-size: 80%;
	font-style: italic;
}
.tinytext2 {
	font-size: 11px;
	line-height: 14px;
	margin-top: 6px;
}
.alignright {
	text-align: right;
}


/* LAYOUT 
---------------------------------------------------------------------------------------------------- */	

.page #wrapper {
	width: 960px;
	background: #fff;
	margin: 0px auto 25px;
	text-align: left;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
} 


/* Header 
------------------------------------------*/	

#header {
	width: 940px;
	margin: 0px auto;
	background: #fff;
	padding: 20px;
	height: 170px;
} 
.header1 {
	padding: 7px 0px 0px 8px;
	float: left;
}
.header2 {
	float: right;
	padding-top: 38px;
	padding-right: 0px;
	margin: 0px;
}
.header2 img {
	float: right;
}
.header2 h4 {
	padding-top: 30px;
	font-weight: normal;
	font-size: 11px;
}

/* Main content and sidebar layout 
------------------------------------------*/
#mainContent {
	margin: 0px 370px 0px 0px;
	padding: 10px 0px 30px 30px;
} 
#mainContent ul {
	margin-left: 9px;
	padding-left: 9px;	
}
#mainContent p {
	padding-left: 1px;	
}
#mainContent2 {
	margin: 0px 350px 0px 0px;
	padding: 30px 0px 30px 30px;
} 
#mainContentLanding {
	margin: 0px 390px 0px 0px;
	padding: 10px 0px 30px 30px;
}
#mainContentLanding h2{
	font-size: 24px;
	margin-bottom: 10px;
}
#mainContentLanding ul{
	font-size: 16px;
	line-height: 22px;
}
#mainContentTemplates {
	margin: 0px 330px 0px 0px;
	padding: 30px 0px 30px 30px;
}

#sidebar1 {
	float: right;
	width: 280px;
	background: #fff;
	padding: 40px 30px 30px 0px;
	text-align: center;
}
#sidebar1 p, h1, h3, ul {
	text-align: left;
}
#sidebar1 img {
	margin-bottom: 20px;
}
#sidebar2 {
	float: right;
	width: 280px;
	background: #fff;
	padding: 40px 30px 10px 0;
}
#sidebarLanding {
	float: right;
	width: 320px;
	background: #fff;
	padding: 10px 30px 10px 0;
}
#sidebarTemplates {
	float: right;
	width: 270px;
	background: #fff;
	padding: 80px 30px 10px 0;
}
#sidebarTemplates p, ul {
	font-size: 95%;
	line-height: 20px;
}
#sidebarTemplates ul {
	margin-left: 10px;
	padding-left: 10px;
}
#sidebarTemplates h2 {
	margin-bottom: 15px;
}




/* Header boxes 
------------------------------------------*/

.headingbox1{   /* Headings */
	width: 100%;
	padding-bottom: 20px;
	padding-top: 15px;
	display: block;
	float: left;
}
.h1box1 {   	
	padding-bottom: 20px;
	padding-top: 15px;
	display: block;
	float: left;
}
.headingpic1{
	float:left;
	padding-right: 30px;
}
.headingtext1{
	float:left;
	width:350px;
	padding-top: 30px;
}
.headingbox2 {    /* Ecommerce, SEO/Online Marketing */
	width: 100%;
	float: left;
	padding-top: 15px;
	padding-bottom: 20px;
}
.headingbox2 h1 {  
	font: 22px/30px Verdana, Arial, Helvetica, sans-serif;
	color: #c41230;
}
.headingbox2 h1, h2 {
	margin: 0px;
	padding: 0px 0px 5px;
}
.headingpic2 {
	float:left;
	padding-right: 30px;
}
.headingtext2 {
	float:left;
	width:400px;
}
.subheadbox1{   /* Home page, Web design options */
	width:555px;
	padding:10px 5px 10px 0px;
	float:left;
	border-bottom: 1px solid #999;
}
.subheadpic1{
	float:left;
	padding-top: 15px;
	padding-left: 5px;
}
.subheadtext1{
	float:right;
	width:410px;
	padding-right: 30px;
}

/* mainContent boxes 
------------------------------------------*/
.textbox1{
	float:left;
	width: 100%;
	padding-bottom: 20px;
}
.textbox1a{
	float:left;
	width:400px;
	margin-right: 20px
}
.textbox1b{
	float:right;
	width:470px;
	background: #e6e6e6;
	border: 1px solid #999;
	padding: 8px 12px;
}
.portbox {
	width: 280px;
	float: left;
	height: 310px;
	line-height: 18px;
	margin: 0px 8px 12px;
}
.portbox p {
	margin-right: 8px;
}
.lowcostbox {
	width: 280px;
	float: left;
	margin: 0px 8px 12px;
}
.imagebox1 {
	float: right;
	padding: 10px 0px 20px 20px;
	width: 100px;
}
.imagebox1 img {
	float: right;
}
.imagebox2 {
	text-align: center;
	margin-bottom: 20px;
}

/* Sidebar boxes 
------------------------------------------*/
.sidebox {
	padding: 0px;
	margin: 40px 20px 20px;
	text-align: center;
}
.sidebox1 {
	border: 1px solid #c41230;
	padding: 8px 12px;
	margin: 20px 0px 40px;
	text-align: left;
	line-height: 20px;
}
.sidebox2 {
	padding: 2px 0px;
}
.sidebox_cntr {
	font: 0.9em/1.2em Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	border: 1px solid #c41230;
	padding: 8px 12px;
	margin: 20px 0px 40px;
	text-align: center;
	color: #191919;
}
.sidebox_cntr2 {
	padding: 10px 0px;
	margin: 20px 0px 40px;
	border: 1px solid #c41230;
	text-align: center;
}
.sidebox img {   
	margin-bottom: 5px;
}
.quotebox {
	font: 0.9em/1.6em Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	background: #e6e6e6;
	border: 1px solid #999;
	padding: 8px 12px;
	margin: 20px 0px 40px;
	text-align: left;
	color: #191919;
}
.quotebox_list {
	font: 0.9em/1.6em Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	background: #e6e6e6;
	border: 1px solid #999;
	padding: 8px 12px 8px 2px;
	margin: 20px 0px 40px;
	text-align: left;
	color: #191919;
}
.quotebox_cntr {
	font: 0.9em/1.2em Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	border: 1px solid #c41230;
	padding: 8px 12px;
	margin: 20px 0px 40px;
	text-align: center;
	color: #191919;
}
.quotebox_cntr img {   
	margin-bottom: 5px;
}

.hotbox {
	border: 1px solid #c41230;
	padding: 8px 12px;
	margin: 20px 0px 40px;
	text-align: center;
}
.hotbox h1 {
	text-align: center;
	font-size: 20px;
}

.readmore2 {
	font-size: 12px;
	font-style: italic;
	color: #c41230;
}
.readmore2 a {
	color: #c41230;
	text-decoration: none;
}
.readmore2 a:hover {
	color: #c41230;
	text-decoration: underline;
}

/* Footer 
------------------------------------------*/	

#footer1 {
	background-color: #808285;
	margin: 0;
	height: 130px;
	/*height: 150px;*/
	color: #fff;
	font: 11px/20px Arial, Helvetica, sans-serif;
} 
.footer1left{
	float:left;
	width:400px;
	padding: 12px 12px 12px 30px;
	line-height: 18px;
}
.footer1right{
	float:right;
	width:400px;
	padding: 12px;
	line-height: 18px;
}


/* Portfolio page 
------------------------------------------

#mainContentPort {
	padding: 10px 30px 30px;
}
#sidebarPort {
	float: right;
	width: 220px;
	background: #fff;
	padding: 60px 25px 10px 0;
	text-align: center;
}
.portbox{  
	width:540px;
	padding:10px 5px 10px 0px;
	float:left;
	margin-bottom: 40px;
	border: 1px solid #999;
}
.portpic1{
	float:left;
}
.porttext1{
	float:right;
	width:160px;
}

.portpiclast {
	width: 280px;
	float: left;
	margin-right: 0px;
	height: 200px;
}
.porttext {
	width: 280px;
	float: left;
	margin-right: 25px;
	line-height: 18px;
	margin-bottom: 20px;
}
.porttextlast {
	width: 280px;
	float: left;
	margin-right: 0px;
	line-height: 18px;
	margin-bottom: 20px;
}*/


/* Hot Tips Home page 
------------------------------------------*/

.tipsbox{    /* List of tips */
	width: 100%;
	float: left;
	padding: 5px 0px 10px;
	border-bottom: 1px solid #999;
}
.tipspic{
	float:left;
	padding-left: 5px;
}
.tipsheading{
	float:left;
	width:440px;
	padding-bottom: 5px;
	padding-left: 15px;
}
.tipstext{
	float:left;
	width:500px;
	padding-left: 10px;
}


/* Floats and clearing 
------------------------------------------*/
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { /* put this before close of wrapper */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* Curved corners 
------------------------------------------*/

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {
	font-size:2em;
	color:#06a;
	border: 0;
}
#xsnazzy h3 {       /* Sub-headings on other pages; headings in sidebar */
	font: 1em Arial, Helvetica, sans-serif;
	color: #4C4C4C;
	border: 0;
}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2, h3 {padding-top:0.5em;}
#xsnazzy {
	background: transparent;
	margin:25px 0px 100px;
}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #c41230; border-right:1px solid #c41230;}
.xb1 {margin:0 5px; background:#c41230;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#fff; border:0 solid #c41230; border-width:0 1px;}

.sidebox1 {
	border: 1px solid #c41230;
	padding: 8px 12px;
	margin: 20px 0px 40px;
	text-align: left;
	line-height: 20px;
}
h3 {       /* Sub-headings on other pages; headings in sidebar */
	font: bold 15px/22px Arial, Helvetica, sans-serif;
	color: #4C4C4C;
	margin: 8px 0px 3px;
	padding: 8px 0px 3px;
}

/* MENU 
----------------------------------------------------------------------------------------------------
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/muti-line-dropdown.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
-----------------------------------------------------------------------------------------------------*/

#menu {
	width: 962px;
	margin: 0px auto;
	z-index:500;
	/*height:40px;*/
	/*margin-left: 30px;*/
} 

#menu ul {
	padding:0;
	margin:0;
	list-style:none;
	/*padding:2px 0px;*/
	background:#c41230;
	height:30px;
}
#menu ul.level1 {
	height:31px;
}
#menu ul ul {
	position:absolute;
	left:-9999px;
}
#menu table {
	border-collapse:collapse;
	width:0;
	height:0;
	position:absolute;
	left:-1px;
	top:-1px;
}
#menu ul li {
	background:#fff;
	/*margin-right:1px;*/
	float:left;
}
#menu ul li a {
	display: block;
	float: left;
	padding: 8px 20px;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	background: #c41230;
	letter-spacing: 1px;
	/*border-top: 1px solid #fff;*/
	/*border-bottom: 1px solid #fff;*/
}
#menu ul li a.fly {
	/*background:#c41230 url(images/graphics/arrow.gif) no-repeat 102px center;*/
	background:#c41230 url(images/graphics/arrow.gif) no-repeat 159px center;
}
#menu ul li a.fly2 {  /* for social media drop down */
	/*background:#c41230 url(images/graphics/arrow.gif) no-repeat 162px center;*/
}
#menu ul ul li {
	margin:0;
}
#menu ul ul li a {
	width:140px;
	border-bottom: 1px solid #fff;
}
#menu ul ul li a.fly {
	padding-right:10px;
}
#menu ul ul li a.top {
	border-top: 1px solid #fff;
}
#menu ul li:hover {
	position:relative;
	z-index: 1000;
}
#menu ul li a:hover {
	direction:ltr;
	background:#808285;
	color:#fff;
	border-color:#fff;
	position:relative;
}
#menu ul li a:hover.fly {
	/*background:#808285 url(images/graphics/arrow.gif) no-repeat 102px center;*/
	background:#808285 url(images/graphics/arrow.gif) no-repeat 159px center;
}

#menu ul li a:hover.fly2 {  /* for social media drop down */
	/*background:#808285 url(images/graphics/arrow.gif) no-repeat 162px center;*/

}
#menu ul li:hover > a {
	background:#808285;
	color:#fff;
	border-color:#fff;
}
#menu ul :hover ul {
	left:0px;
	width:143px;
	top:29px;
}
#menu ul :hover ul :hover ul,
#menu ul :hover ul :hover ul :hover ul,
#menu ul :hover ul :hover ul :hover ul :hover ul {
	left:143px;
	width:143px;
	top:-5px;
}
#menu ul :hover ul ul,
#menu ul :hover ul :hover ul ul, 
#menu ul :hover ul :hover ul :hover ul ul {
	left:-9999px;
}



/* Bullet points 
------------------------------------------*/

.tick {
	list-style-position: outside;
	list-style-image: url(images/graphics/redtick.gif);
	line-height: 22px;
	margin-top: 0px;
}
.tick li {
	margin-left: 3px;
}
.bullet {
	list-style-position: outside;
	list-style-image: url(images/graphics/bullet.gif);
	margin-top: 0px;
}
.bullet li {
	margin-left: 0px;
}
.paratop {
	margin-bottom: 2px;
	padding-bottom: 2px;
}
.parabottom {
	margin-top: 2px;
	padding-top: 2px;
}
.tips {   /* Hot Tips main pages */
	margin-left: 9px;
	padding-left: 9px;
}
.tips li {
	margin-right: 5px;
	margin-bottom: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
}
.chilli {  /* not used */
	list-style-position: outside;
	list-style-image: url(images/graphics/chillibullet.gif);
	line-height: 18px;
}


/* Tables 
------------------------------------------*/

.tableborder {
	border: 1px solid #999;
	background: #E4E4E4;
	margin-bottom: 20px;
}
.tableheader {
	color: #fff;
	background: #c41230;
	line-height: 18px;
}
.tableheader2 {
	background: #e6e6e6;
	line-height: 18px;
}
.tableheader3 {
	color: #fff;
	background: #666;
	line-height: 18px;
}
.tablebdrlft {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}
.tablebdrlftbtm{
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
}
.tablebdrrgt {
	text-align: right;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-left: 1px solid #999;
}
.tablebdrrgtbtm {
	text-align: right;
	border: 1px solid #999;
}


/* Links 
------------------------------------------*/
a:link {
	text-decoration: none;
	color: #03c;
}
a:visited {
	text-decoration: none;
	color: #03c;
}
a:hover {
	text-decoration: underline;
	color: #03c;
}
a:active {
	text-decoration: none;
	color: #03c;
}

h1 a:link, h1 a:active, h1 a:visited {	
	color: #c41230;
	text-decoration: none;
}
h1 a:hover {
	color: #c41230;
	text-decoration: underline;
}
h2 a:link, h2 a:active, h2 a:visited {	
	color: #c41230;
	text-decoration: none;
}
h2 a:hover {
	color: #c41230;
	text-decoration: underline;
}
h3 a:link, h3 a:active, h3 a:visited {	
	color: #333;
	text-decoration: none;
}
h3 a:hover {
	color: #03c;
	text-decoration: underline;
}
h4 a:link, h4 a:active, h4 a:visited {	
	color: #333;
	text-decoration: none;
}
h4 a:hover {
	color: #03c;
	text-decoration: underline;
}

.button a:link, .button a:active, .button a:visited{ /* View website buttons on Portfolio page */
	color: #fff;
	background: #808285;
	padding:5px 15px;
	font:normal 11px Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-decoration: none;
	margin-top: 25px;
	border-top: 25px #fff;
}
.button a:hover {
	color: #fff;
	background:#808285;
	padding:5px 15px;
	font:normal 11px Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-decoration: underline;
	border-top: 25px #fff;
}
/*.footer1left a:link, .footer1left a:active, .footer1left a:visited{ 
	color: #fff;
	line-height: 35px;
}
.footer1left a:hover {
	color: #fff;
	margin-top: 10px;
	text-decoration: underline;
}*/
#footer1 a { 
	color: #fff;
	text-decoration: underline;
}

/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
#stus-slideshow {
	width:600px;
	position:relative;
	height:480px;
}
#navigation {
	width:235px;
	height:42px;
	margin:0 auto;
}
#navigation img {
	display:block;
	float:left;
	margin:0 5px;
	display:inline;
}
#navigation h2 {
	background:url(images/graphics/p-pages.png) no-repeat center top;
	width:130px;
	height:48px;
	text-align:center;
	color:#000;
	padding:0;
	margin:0 5px;
	float:left;
	display:inline;
	font: normal 14px/35px Arial, Helvetica, sans-serif;
}
#slideshow {
	width:600px;
	margin-top:10px;
	padding-bottom:10px;
	float: left;
}
#slideshow img {
	display:block;
	margin:0 auto;
}
#slideshow .entry {
	width:580px;
	display:none;
	margin-top: 10px;
	margin-left: 10px;
}
#slideshow .entry h4 {
	background:#f8f8f8;
	font-size:12px;
	text-align: center;
}
#slideshow .entry p {
	background:#f8f8f8;
	width:372px;
	margin:0 auto;
	padding:0;
	line-height:1.4em;
}