html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
 background:url(images/bg.png) repeat-x;
 font-family:Arial, Helvetica, sans-serif;

}


ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

#container{
width:910px;
margin:0 auto;
}

#header
{
width:auto;
}

#logo
{
float:left;
padding-top:26px;
}

#contact
{
position:relative;
float:right;
background-image:url(images/contact_alt.png);
background-repeat:no-repeat;
height:154px;
width:600px;
margin-right:5px;
z-index:1;
}

#contact p
{
clear:both;
color:#54b0e3;
font-size:10px;
text-align:right;
margin-top:30px;
margin-right:3px;
font-family:Arial, Helvetica, sans-serif;
}

#contact a
{
color:#54b0e3;
font-size:10px;
text-decoration:none;
}

#contact a:hover,visited
{
color:#54b0e3;
font-size:10px;
text-decoration:underline;
}

#contact .username
{
position:relative;
top:10px;
left:175px;
width:266px;
height:21px;
border:0px;
margin:0px;
padding:0px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #ccc;
}

#contact .password
{
position:relative;
top:19px;
left:175px;
width:266px;
height:20px;
margin:0px;
padding:0px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #ccc;
}

#contact .submit
{
position:relative;
top:23px;
left:175px;
border:0px;
margin:0px;
padding:0px;
}

#slogan
{
clear:right;
float:right;
margin-top:-20px;
width:550px;
margin-right:5px;
}
#slogan p
{
color:#666666;
font-size:20px;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
line-height:30px;
text-align:right;
text-transform:uppercase;
}

#nav
{
clear:right;
float:right;
width:679px;
padding:0px;
margin-right:5px;
top:-60px;
z-index:2;
position:relative;
}

#menu {
				font-family: Arial, sans-serif;
				font-weight: bold;
				text-transform: uppercase;
				margin:0;
				padding: 0;
				list-style-type: none;
				background-color: #eee;
				font-size: 10px;
				height: 40px;
				border-top: 2px solid #eee;
				border-bottom: 2px solid #ccc;
			}
			#menu li {
				float: left;
				margin: 0;				
			}
			#menu li a {
				text-decoration: none;
				display: block;
				padding: 0 20px;
				line-height: 40px;
				color: #666;
			}
			#menu li a:hover, #menu li.active a {
				background-color:#f5f5f5;
				border-bottom: 2px solid #DDD;
				color: #666;
			}
			#menu_wrapper ul {margin-left: 12px;}
			#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
			#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}



#content
{
width:920px;
background-image:url(images/content.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
overflow:visible;
min-height:300px;
}

#content a
{
color:#54b0e3;
}

#content h1{
color:#54b0e3;
font-size:18px;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
margin-left:55px;
padding-right:40px;
}

.content_p
{
color:#666666;
font-size:11px;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
margin-left:55px;
padding-right:40px;
text-align:justify;
margin-top:15px;
line-height:13px;
}

#content-left
{
position:relative;
width:890px;
padding:0px;
margin-left:40px;
margin-top:20px;
clear:both;
}

#ctop
{
background-image:url(images/top.png);
height:50px;
width:950px;
clear:both;
margin:0px;
padding:0px;
}

#cbottom
{
background-image:url(images/bottom.png);
height:50px;
width:950px;
clear:both;
margin:0px;
padding:0px;
}

.main_view {
	float: left;
	position: relative;
	margin-left:40px;
}

.window {
	height:286px;	width: 810px;
	overflow: hidden; 
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}

.paging {
	font-family:Arial, Helvetica, sans-serif;
	position: absolute;
	bottom: 0px; right: -7px; left:691px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(images/reel/paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #FFFFFF;
}

.white
{
color:#FFFFFF;
}
.paging a.active {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	background:#0099CC;
	border: 1px solid #0066CC;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

/* FOOTER */

#footer-main{
clear:both;
background:url(images/footer_main.jpg);
margin-top:15px;
}

#footer{
width:910px;
background:url(images/footer-bg.jpg) repeat-x;
height:100%;
margin:0px auto 0px auto;
}

#footer .wrap{
background-image: url(images/footer.jpg);
background-repeat:no-repeat;
height:220px;
width:940px;
padding-top:45px;
}

#footer .column{
width:214px;
float:left;
padding-left:20px;
padding-top:0px;
padding-bottom:0px;
padding-right:0px;
margin-top:0px;
position:relative;
height:220px;
}

.column h4
{
color:#FFFFFF;
font-size:12px;
padding-bottom:10px;
margin:0px;
}

#col {
			width: 180px;
 			font-family:Arial, Helvetica, sans-serif;
			font-size: 10px;
			color: #FFF;
			padding: 0px;
			margin:0px;
		}
			#col .info {
			padding:5px 0px 10px 0px;
			border-bottom: 1px solid #484848;
		}
		
		#col .info a {
			text-decoration: none;
			color: #54b0e3;
		}

		#col .info a:hover {
			text-decoration: underline;
		}
		
		#col .info .about {
			font-size: 10px;
			font-style: italic;
			color: #999999;
			margin-top:3px;
		}

#jstwitter {
			width: 170px;
 			font-family:Arial, Helvetica, sans-serif;
			font-size: 10px;
			color: #FFF;
			padding: 0px;
			margin:0px;
		}
			#jstwitter .tweet {
			padding:5px 0px 10px 0px;
			border-bottom: 1px solid #484848;
		}
		
		#jstwitter .tweet a {
			text-decoration: none;
			color: #54b0e3;
		}

		#jstwitter .tweet a:hover {
			text-decoration: underline;
		}
		
		#jstwitter .tweet .time {
			font-size: 10px;
			font-style: italic;
			color: #999999;
			margin-top:3px;
		}
		

#footer .bottom{
clear:both;
width:890px;
height:20px;
background:none;
padding:5px;
text-align:center;
}

.bottom ul
{
margin:0px auto 0px auto;
}

.bottom li
{
padding-right:15px;
text-align:left;
list-style:none;
display:inline;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}

.bottom li a {color:#ffffff; text-decoration:none;}
.bottom li a:visited {color:#ffffff; text-decoration:none;}

.sponsorListHolder{
	margin-top:30px;
	margin-left:40px;
}

.sponsor{
	width:180px;
	height:180px;
	float:left;
	margin:15px;
	
	/* Giving the sponsor div a relative positioning: */
	position:relative;
	cursor:pointer;
}

.sponsorFlip{
	/*  The sponsor div will be positioned absolutely with respect
		to its parent .sponsor div and fill it in entirely */

	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:1px solid #ddd;	
	background:url("images/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
	border:1px solid #999;
	
	/* CSS3 inset shadow: */
	-moz-box-shadow:0 0 30px #999 inset;
	-webkit-box-shadow:0 0 30px #999 inset;
	box-shadow:0 0 30px #999 inset;
}

.sponsorFlip img{
	/* Centering the logo image in the middle of the sponsorFlip div */
	
	position:absolute;
	top:50%;
	left:50%;
	margin:-70px 0 0 -70px;
}

.sponsorData{
	/* Hiding the .sponsorData div */
	display:none;
}

.sponsorDescription{
	font-size:11px;
	padding:50px 10px 20px 20px;
	font-style:normal;
		text-align:center;
}

.sponsorURL{
	font-size:10px;
	font-weight:bold;
	text-align:center;
}

.sponsorURL a
{
color:#54b0e3;
}

.clear{
	/* This class clears the floats */
	clear:both;
}


.note{
	font-size:12px;
	font-style:italic;
	padding-bottom:20px;
	text-align:center;
}

.main_image {
    width: 510px;
    height: 356px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
    color: #fff;
	margin-left:55px;
	margin-top:15px;
	border:1px solid #ccc;
}
.main_image h2 {
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px;
    padding: 10px;
	color:#0066CC;
}
.main_image p {
    font-size: 11px;
    line-height: 13px;
	text-align:justify;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
    margin: 0;
}
.block small { /*--We'll be using this same style on our thumbnail list--*/
    font-size: 10px;
    padding: 0 0 0 0px;
    background: url(/images/icon_calendar.gif) no-repeat 0 center;
}

.block a { margin-top:10px; color:#0066CC; text-decoration:none; }

.main_image .block small {margin-left: 0px;}
.main_image .desc{
    position: absolute;
    bottom: 0;
    left: 0; /*--Stick the desc class to the bottom of our main image container--*/
    width: 100%;
    display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
    width: 100%;
    background: #111;
    border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
    background: url(/images/btn_collapse.gif) no-repeat left top;
    height: 27px;
    width: 93px;
    text-indent: -99999px;
    position: absolute;
    top: -27px;
    right: 20px;
}
.main_image a.show {background-position: left bottom;}

.image_thumb {
    float: left;
    width: 299px;
    background: #f0f0f0;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
	margin-top:15px;
}
.image_thumb img {
    border: 1px solid #ccc;
    padding: 5px;
    background: #fff;
    float: left;
}
.image_thumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0;
    padding: 12px 10px;
    background: #f0f0f0 url(/images/nav_a.gif) repeat-x;
    width: 279px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
}
.image_thumb ul li.hover { /*--Hover State--*/
    background: #ddd;
    cursor: pointer;
}
.image_thumb ul li.active { /*--Active State--*/
    background: #fff;
    cursor: default;
}
html .image_thumb ul li h2 {
    font-size: 12px;
    margin: 5px 0;
    padding: 0;
}
.image_thumb ul li .block {
    float: left;
    margin-left: 10px;
    padding: 0;
    width: 170px;
}
.image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/

#bottom_content
{
margin:0px auto;
width:960px;
}

#lcol
{
float:left;
width:400px;
margin-left:30px;
}
#lcol2
{
float:left;
width:400px;
margin-left:85px;
}
#smaller_content
{
width:500px;
background-image:url(images/s_content.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
overflow:visible;
min-height:200px;
}


#smaller_ctop
{
background-image:url(images/s_top.png);
height:25px;
width:500px;
clear:both;
margin:0px;
padding:0px;
}

#smaller_cbottom
{
background-image:url(images/s_bottom.png);
height:25px;
width:500px;
clear:both;
margin:0px;
padding:0px;
}

#right_content
{
width:420px;
background-image:url(images/r_content.png);
background-repeat:repeat-y;
margin:0px;
padding:0px;
overflow:visible;
min-height:138px;
}


#right_ctop
{
background-image:url(images/r_top.png);
height:25px;
width:420px;
clear:both;
margin:0px;
padding:0px;
}

#right_cbottom
{
background-image:url(images/r_bottom.png);
height:25px;
width:420px;
clear:both;
margin:0px;
padding:0px;
}

#services {
float: left;
display: block;
width: auto;
padding:0px 20px 0px 0px;
}

#lcol #services h1
{
color:#54b0e3;
font-size:24px;
font-weight:bold;
border-bottom: 1px solid #D7D7D7;
margin-left:30px;
margin-top:10px;
margin-bottom: 10px;
padding-bottom: 5px;
width:430px;
}

#lcol2 #services h1
{
color:#54b0e3;
font-size:24px;
font-weight:bold;
border-bottom: 1px solid #D7D7D7;
margin-left:30px;
margin-top:10px;
margin-bottom: 10px;
padding-bottom: 5px;
width:360px;
}

#lcol2 #services h2
{
color:#54b0e3;
font-size:14px;
font-weight:bold;
margin-top:25px;
margin-left:30px;
}

#lcol2 #services p
{
text-transform:none;
}

#services ul {
list-style: none;
margin-left: 40px;
padding: 0;
text-transform: uppercase;
font-weight: bold;
font-size:16px;
}

#services li {
width: 140px;
height: 34px;
display: block;
float: left;
margin-bottom:21px;
margin-top:22px;
padding: 16px 0 0 65px;
}

#services a {
text-decoration: none;
color:#666666;
}

#services a:hover {
color: #54b0e3;
cursor:pointer;
}

#services p 
{
font-size:11px;
color:#666666;
line-height:13px;
margin-left:20px;
padding:10px;
text-align:justify;
width:360px;
}

#services li.webdesign {
background: url(../images/homeicon1.png) no-repeat top left;
}

#services li.ecommerce {
background: url(../images/homeicon2.png) no-repeat top left;
}

#services li.bespoke {
background: url(../images/homeicon3.png) no-repeat top left;
}

#services li.graphic {
background: url(../images/homeicon4.png) no-repeat top left;
}

#services li.logo {
background: url(../images/homeicon5.png) no-repeat top left;
}

#services li.print {
background: url(../images/homeicon6.png) no-repeat top left;
display: block;
}

.rssimage{float:right; margin-right:35px; margin-top:-2px}
.rssimage1{float:right; margin-right:5px; margin-top:-2px}

#clear
{
clear:both;
margin:0px;
padding:0px;
height:10px;
width:auto;
}

#webcontainer {
float:right;
width:200px;
margin-right:30px;
}

#slidecontainer {
	width:180px;
	margin-left:-10px;
	position:relative;
	z-index:0;
}

#example {
	width:180px;
	height:150px;
	position:relative;
}
/*
	Slideshow
*/
#slides {
	position:absolute;
	top:10px;
	left:4px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:180px;
	overflow:hidden;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container a {
	width:180px;
	height:150px;
	display:block;
}

.slides_container a img {
	display:block;
}

/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:60px;
	left:-24px;
	width:24px;
	height:43px;
	display:block;
	z-index:101;
}

#slides .next {
	left:180px;
}

.readmore
{
font-size:11px;
font-weight:bold;
text-align:right;
float:right;
margin-left:300px;
}

#wrap-text
{
float:left;
width:670px;
margin-right:10px;
}
#wrap-text-2
{
clear:both;
float:left;
width:670px;
margin-right:10px;
}

#requestquote {
width: 99%;
position: absolute;
top: 7px;
right: 0;
z-index: 9999;
overflow:hidden;
}

#quotebody {
background: #f2f2f2;
border-bottom: 2px solid #dddddd;
display: none;

}

#quotebutton {
display: block;
cursor: pointer;
margin-left:45%;
margin-right:50%;
}

.smallwrap
{
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
padding:30px;
}

.smallwrap h2
{
color:#54b0e3;
font-size:18px;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:15px;
}

.smallwrap td
{
padding:5px;
}
.smallwrap p
{
padding:5px;
}

.smallwrap .textbox
{
border:1px solid #ccc;
height:18px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.smallwrap select
{
border:1px solid #ccc;
height:18px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

.smallwrap textarea
{
border:1px solid #ccc;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

.submit_button
{
float:right;

}