/*
* {
  margin: 0;
  padding: 0;
}
*/
body, html {
	border:0;
	margin:0;
	padding:0;
	color: #666;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	height: 100%;  /* ver stretch */
}

body {
	background: #f3feff url(images/body_bg.jpg) bottom center no-repeat fixed; 
}

a {
	text-decoration: none;
	color: #2a6198;
}

a:link {
	color: #2a6198;
}

a:visited {
	color: #2a6198;
}

a:hover {
	color: #000000;
}

/*
You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]
*/
/*
a[href^="http://"]:not([href*="studiowonders.com"]):after {
content: "\2197";
}
*/

a.ref, a.ref:visited {
font-size: 9px;
color: #aaa;
}

h1, h2, h3, h4 {
	margin: 0px;
	padding: 0px;
	color: #666;
	line-height: normal;
	text-transform: capitalize;
}
h2 {
	font-size: 1.9em;
	display: none;
}
h2.img_heading {
	text-indent: -1000px;
	display: block;
	height: 150px;
	width: 548px;
	margin-bottom: 15px;
}
h2.website_designing {
	background: url(images/heading_websitedesign.jpg) top left no-repeat;
}
h2.design_revamp {
	background: url(images/heading_designrevamp.jpg) top left no-repeat;
}
h2.layout_code {
	background: url(images/heading_layoutcode.jpg) top left no-repeat;
}
h2.small_business {
	background: url(images/heading_smallbusiness.jpg) top left no-repeat;
}
h2.graphics_designing {
	background: url(images/heading_graphics.jpg) top left no-repeat;
}
h2.multimedia_development{
	background: url(images/heading_multimedia.jpg) top left no-repeat;
}
h2.links{
	background: url(images/heading_links.jpg) top left no-repeat;
}
h3 {
	font-size: 1.5em;
	margin-bottom: 10px;
}
h4 {
	margin-top: 15px;
	font-size: 1.3em;
}
/*
ul {
	margin: 0px;
	padding: 0 0 0 15px;
	list-style: disc; 
}
*/
p{
	margin: 5px 0 0px 0;
	padding: 0px 0 5px 0;
	display: block;
}

blockquote {
padding: 20px 0;
margin: 5px 0;
display:block !important;
text-align:justify;
border-bottom: 1px dashed #efefef;
}

blockquote p {
color:#827a58;
display:inline;
}

blockquote p:before,
blockquote p:after {
color:#eaead0;
line-height:0;
font-size:4em;
}

blockquote p:before {
content: open-quote;
padding-right:10px;
vertical-align:-22px;
}

blockquote p:after {
content: close-quote;
font-size:5em;
line-height:.3;
vertical-align:-37px;
}

blockquote .quotee {
text-align: right;
display: block;
overflow: hidden;
white-space: nowrap;
}

blockquote .quotee strong {
text-transform: capitalize;
}

.clear 
{ 
clear:both; 
}

.no-display {
display: none;
}
 
.float-left { 
float:left; 
}
.float-right { 
float:right; 
}
 
.text-left { 
text-align:left; 
}
.text-right { 
text-align:right; 
}
.text-center { 
text-align:center; 
}
.text-justify { 
text-align:justify; 
}
 
.bold  { 
font-weight:bold; 
}
.italic { 
font-style:italic; 
}
.underline { 
border-bottom:1px solid; 
}
.highlight { 
background:#ffc; 
}
 
.full { 
width:760px; margin:0 auto; 
}
 
.img-left { 
margin-right: 5px;
float: left;
background: #ccc;
padding: 2px;
border: 1px solid #999;
}
.img-right { 
margin-left: 5px;
float: right;
background: #ccc;
padding: 2px;
border: 1px solid #999;
}
 
.nopadding { 
padding:0; 
}
.nomargin { 
margin:0; 
}
.noindent { 
margin-left:0;
padding-left:0; 
}
.nobullet { 
margin-left:0;
padding-left:0; 
list-style:none;
list-style-image:none; 
}



/* Needed for Mozilla browsers - makes left div extend all the way to bottom of the container */
/**/
html>body .page, html>body #container {
height: auto;
}


.page {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background: url(images/page_bg.png) repeat-x top fixed;	
}

#container {
	width: 100%;
	background: url(images/container_bg.gif) top center no-repeat fixed;
	margin: 0 auto;
	padding: 0px;
	padding-top: 10px;
}


/********************* Banner Styles *********************/

#banner {
	margin: 0 auto;
	padding: 0;
	height: 132px;
	width: 790px;
	position: relative;
	/*background: url(images/banner_bg.gif) top left repeat-y;*/
}

#banner #banner_top {
	margin: 0 auto;
	padding: 0px;
	height: 112px;
	width: 790px;
	background: url(images/banner_top.png) top left no-repeat;
	position: absolute;
	top: 0px;
	left: 0px;
}

#banner #banner_bottom {
	margin: 0 auto; 
	padding: 0px;
	height: 20px;
	width: 790px;
	background: url(images/banner_bottom.png) bottom left no-repeat;
	position: absolute;
	top: 112px;
	left: 0px;
}

/* Logo + Title Styles */

#logo {
	margin: 0px;
	padding: 0px;
	height: 112px;
	width: 790px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
}

/* Top Menu */

#logo h1 {
display: block;
width: 225px;
height: 80px;
margin: 0;
padding: 0;
margin-top: 10px;
margin-left: 10px;
float: left;
overflow: hidden;
}

#logo h1 a.studio_wonders{
display: block;
width: 225px;
height: 80px;
margin: 0;
padding: 0;
text-indent: -1000px;
overflow: hidden;
}

.login_menu{
margin: 0;
padding: 0;
font: bold 10px Arial;
border-width: 1px 0;
position: absolute;
right: 3px;
top: 10px;
}

.login_menu li{
display: inline;
text-align: center;
}

.login_menu li a{
font-size: 11px;
float: left;
color: #174a7e;
padding: 0px 8px;
text-decoration: none;
border-right: 1px solid #c4c4c4;
}

.login_menu .link_right a{
border-right: none;
}

.login_menu li a:visited{
color: #174a7e;
}


.top_menu{
margin: 0;
margin-top: 90px;
margin-right: 5px;
padding: 0;
font: bold 10px Arial;
float: right;
border-width: 1px 0;
background: transparent url(images/default.gif) center center repeat-x;
}

.top_menu li{
display: inline;
text-align: center;
}

.top_menu li a{
font-size: 11px;
float: left;
color: #174a7e;
padding: 0px 8px;
text-decoration: none;
border-right: 1px solid #c4c4c4;
}

.top_menu .link_right a{
border-right: none;
}

.top_menu li a:visited{
color: #174a7e;
}

.top_menu li a:hover{
color: #fff;
background: transparent url(images/active.gif) center center repeat-x;
}

.top_menu #link_current a{
color: #fff;
background: transparent url(images/active.gif) center center repeat-x;
}

/********************* Content Styles *********************/

#content {
	margin: 0 auto;
	padding: 14px 0 0 0;
	width: 790px;
	text-align: left;
	background: url(images/content_top.png) top left no-repeat;
}

#content #heading {
	margin: 0 auto;
	padding: 0;
	width: 790px;
	height: 200px;
	text-align: left;
	background: url(images/h2_bg.png) top left no-repeat;
	position: relative;
}

/*
#content #heading #flash {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 760px;
	height: 200px;
	z-index: 100;	
}

#content #heading h2 {
	display: none;
}
*/

#content #heading #flash, #content #heading h2 {
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 760px;
	height: 200px;
	position: absolute;
	left: 15px;
	top: 0px;
}

#content #heading #flash {
	z-index: 100;
}

#content #heading h2 {
	text-indent: -1000px;
	overflow: hidden;
}

/* design-offers */
#design-offers {
padding: 0px;
overflow: hidden;
width: 760px;
line-height: normal;
}
#design-offers ul {
margin-top: 25px;
display: block;
height: 150px;
list-style: none;
padding: 0;
margin: 0;
}
#design-offers li {
float: left;
}
#design-offers li a {
margin-top: 25px;
display: block;
cursor: pointer;
overflow: hidden;
height: 124px;
width: 247px;
background-position: 0 0;
background-repeat: no-repeat;
border-right: 5px solid #FFF;
text-indent: -2000px;
overflow: hidden;
}
#design-offers li#lowcost-webdesign a {
background-image: url(images/offer-lowcost-webdesign.gif);
}
#design-offers li#website-revamp a {
background-image: url(images/offer-website-revamp.gif);
}
#design-offers li#banner-design a {
background-image: url(images/offer-banner-design.gif);
width: 256px;
border-right: none;
}

#cutting-edge {
margin-top: 25px;
width: 760px;
height: 50px;
}

#cutting-edge a.techs {
display: block;
height: 50px;
overflow: hidden;
text-indent: -2000px;
float: left;
}

#cutting-edge a#tech-first {
clear: left;
width: 39px;
background: url(images/technologies.gif) 0 0 no-repeat;
}
#cutting-edge a#tech-first:hover {
background-position: 0px -50px;
}

#cutting-edge a#tech-2 {
width: 46px;
background: url(images/technologies.gif) -39px 0px no-repeat;
}
#cutting-edge a#tech-2:hover {
background: url(images/technologies.gif) -39px -50px no-repeat;
}

#cutting-edge a#tech-3 {
width: 67px;
background: url(images/technologies.gif) -85px 0px no-repeat;
}
#cutting-edge a#tech-3:hover {
background: url(images/technologies.gif) -85px -50px no-repeat;
}

#cutting-edge a#tech-4 {
width: 93px;
background: url(images/technologies.gif) -152px 0px no-repeat;
}
#cutting-edge a#tech-4:hover {
background: url(images/technologies.gif) -152px -50px no-repeat;
}

#cutting-edge a#tech-5 {
width: 47px;
background: url(images/technologies.gif) -245px 0px no-repeat;
}
#cutting-edge a#tech-5:hover {
background: url(images/technologies.gif) -245px -50px no-repeat;
}

#cutting-edge a#tech-6 {
width: 103px;
background: url(images/technologies.gif) -292px 0px no-repeat;
}
#cutting-edge a#tech-6:hover {
background: url(images/technologies.gif) -292px -50px no-repeat;
}

#cutting-edge a#tech-7 {
width: 86px;
background: url(images/technologies.gif) -395px 0px no-repeat;
}
#cutting-edge a#tech-7:hover {
background: url(images/technologies.gif) -395px -50px no-repeat;
}

#cutting-edge a#tech-8 {
width: 69px;
background: url(images/technologies.gif) -481px 0px no-repeat;
}
#cutting-edge a#tech-8:hover {
background: url(images/technologies.gif) -481px -50px no-repeat;
}

#cutting-edge a#tech-9 {
width: 77px;
background: url(images/technologies.gif) -550px 0px no-repeat;
}
#cutting-edge a#tech-9:hover {
background: url(images/technologies.gif) -550px -50px no-repeat;
}

#cutting-edge a#tech-10 {
width: 35px;
background: url(images/technologies.gif) -627px 0px no-repeat;
}
#cutting-edge a#tech-10:hover {
background: url(images/technologies.gif) -627px -50px no-repeat;
}

#cutting-edge a#tech-11 {
width: 55px;
background: url(images/technologies.gif) -662px 0px no-repeat;
}
#cutting-edge a#tech-11:hover {
background: url(images/technologies.gif) -662px -50px no-repeat;
}

#cutting-edge a#tech-last {
clear: right;
width: 43px;
background: url(images/technologies.gif) -717px 0px no-repeat;
}
#cutting-edge a#tech-last:hover {
background: url(images/technologies.gif) -717px -50px no-repeat;
}

#content #wrapper {
	margin: 0;
	padding: 0;
	padding-top: 20px;
	width: 100%;
	background: url(images/content_bg.png) top left repeat-y;
}

/* Holder for single div content area */
#content #wrapper #holder {
	margin: -6px 0px 0px 0px;
	padding: 0 15px 0 15px;
}

#content #wrapper #holder #services {
	width: 760px; 
	height: 200px;
	background: url(images/services-list.gif) 0 0 no-repeat;
}
#content #wrapper #holder #services a {
	display: block;
	width: 760px; 
	height: 200px;
	background: url(images/services-site.jpg) top right no-repeat;
	text-indent: -1000px;
	overflow: hidden;
}

/* Left and right holders for double divs content area */
#content #wrapper #holder_left {
	width: 565px;
	margin: 0;
	padding: 0 15px 0px 0px;
	float: left;
}

.breadCrumb {
height: 18px; /* This is the height we wan't on our breadcrumb */
padding: 0px;
margin: 0px;
color: #666; /*This is our color on the text which isn't a link. We want' they to be light grey */
border-bottom: 1px dashed #efefef;
padding-bottom: 6px;
margin-bottom: 12px;
text-transform: capitalize;
}
.pageThrough {
border-bottom: none;
padding-bottom: 0px;
margin-bottom: 0px;
}
.breadCrumb li {
float: left;
display: inline;
margin-right: 4px;
font-size: 12px;
font-weight: bold;
}
.breadCrumb a {
background: url(../media/images/breadcrumb_next.gif) center right no-repeat;
padding-right: 20px; /* We need to add some padding to the right of the link. This space is where the background image is going to be shown. */
font-size: 11px;
font-weight: normal;
}
.breadCrumb a:hover {
background:url(../media/images/breadcrumb_next.gif) center right no-repeat;
}
.breadCrumb #back {
margin-top: 20px;
}
.breadCrumb #back a {
padding-right: 0px;
}
.breadCrumb #next {
margin-top: 20px;
float: right;
}
.breadCrumb #back a {
background: url(../media/images/breadcrumb_back.gif) center left no-repeat;
padding-left: 20px; 
}

.img_details {
width: 548px;
height: 150px;
}
.text_details {
text-align: justify;
}

#content #wrapper #holder_right {
	width: 180px;
	margin: 0;
	padding: 0;
	float: left;
}

.link_wonders_cat {
}
.link_wonders_cat a{
display: block;
padding: 3px 0;
padding-left: 5px;
width: 175px;
background-color: #f4f4f4;
border-bottom: 1px solid #fff;
}
* html .link_wonders_cat a{ /*IE only */
 width: 175px; /*IE 5*/
}

.link_details {
}
.link_details h3 {
margin: 10px auto 20px auto;
}
.link_details ul li {
margin: 0;
padding: 0;
padding: 10px 0;
margin-bottom: 1px;
line-height: 20px;
min-height: 20px;
height: auto;
width: 548px;
clear: both;
border-bottom: 1px dashed #efefef;
}
.link_details ul li strong {
clear: left;
width: 125px;
display: block;
float: left;
}
.link_details ul li span {
clear: right;
width: 423px;
display: block;
float: left;
white-space: nowrap;
overflow: hidden;
}
.link_details ul li.desc strong {
line-height: normal;
}
.link_details ul li.desc span {
white-space: normal;
line-height: normal;
}
.link_details ul li span img.thumb {
margin-left: 10px;
border: 1px solid #efefef;
float: right;
}
#rightmenu{
width: 180px;
margin-bottom: 20px;
}
#rightmenu ul{
margin: 0;
margin-bottom: 5px;
padding: 0;
list-style-type: none;
}
#rightmenu li a{
display: block;
padding: 3px 0;
padding-left: 5px;
width: 175px;
background-color: #f4f4f4;
border-bottom: 1px solid #fff;
}
* html #rightmenu li a{ /*IE only */
 width: 175px; /*IE 5*/
}
#rightmenu h4{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
font-size: 12px;
font-weight: bold;
}

#rightmenu #chat {
background: url(images/chat.gif) no-repeat;
width: 180px;
height: 150px;
}

#rightmenu #chat h4 {
padding: 0;
margin: 0;
text-indent: -1000px;
overflow: hidden;
}

#rightmenu #chat ul {
margin-left: 17px;
margin-top: 45px;
}

#rightmenu #chat ul li {
float: left;
padding: 0;
margin: 4px;
height: 35px;
width: 40px;
position: relative;
}
#rightmenu #chat ul li#live {
margin-left: 30px;
}

#rightmenu #chat ul li a, #rightmenu #chat ul li span {
display: block;
padding: 0;
margin: 0;
position: absolute;
text-indent: -1000px;
overflow: hidden;
border: none;
background: none;
}

#rightmenu #chat ul li span, #rightmenu #chat ul li a {
top: 0px;
left: 0px;
height: 35px;
width: 40px;
}

#rightmenu #chat ul li span {
z-index: 10;
}

#rightmenu #chat ul li a {
cursor: pointer;
z-index: 20;
}

#rightmenu #chat ul li#google span {
background-image: url(images/chat-google.png); 
}

#rightmenu #chat ul li#skype span {
background-image: url(images/chat-skype.png); 
}

#rightmenu #chat ul li#ymail span {
background-image: url(images/chat-ymail.png); 
}

#rightmenu #chat ul li#live span {
background-image: url(images/chat-live.png); 
}

#rightmenu #chat ul li#icq span {
background-image: url(images/chat-icq.png); 
}

/* multiple holders for multiple divs content area */
#content #wrapper .holder_divs {
	display: inline;
	margin: 0 15px 0 12px;
	padding: 0 5px 0 5px;
	float: left;
	background: #eee;
}

#content #wrapper #holder_left #left_middle {
	width: 100%;
    background: url(images/left-middle.gif) top right repeat-y;
}
#content #wrapper #holder_left #left_upper {
	width: 100%;
    background: url(images/left-upper.gif) top right no-repeat;
}
#content #wrapper #holder_left #left_lower {
	min-height: 1250px;
	padding: 0 17px 20px 0px;
	margin: 0px;
    background: url(images/left-lower.gif) bottom right no-repeat;
}

/* Mozilla fix to save the layout from stretching vertically */
#holder:after {
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden;
}


.references p {
font-size: 9px;
color: #aaa;
}
.references strong {
display: block;
}
.references a {
color: #aaa;
margin-right: 4px;
}

/************ START NOT IN USE ****************/
/* contact form */
.contact_form p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
/*border-top: 1px solid #eee;*/
height: 1%;
}

.contact_form label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.contact_form input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.contact_form textarea{
width: 250px;
height: 150px;
}

/************ END NOT IN USE ****************/

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.php
*/

* html .threepxfix{
margin-left: 3px;
}

#tag_wonders {
height: 0px;
font-size: 0;
line-height: 0;
color: #FFFFFF;
overflow: hidden;
}

ul.work {
  width: 548px;
}
ul.work li {
height: 150px;
margin-bottom: 20px;
background-position: top right;
background-repeat: no-repeat;
position: relative;
}
ul.work li h3, ul.work li span, ul.work li a.lightbox {
display: block;
height: 150px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
ul.work li h3 {
line-height: 20px;
font-size: 12px;
background-position: top left;
background-repeat: no-repeat;
z-index: 5;
}
ul.work li span {
line-height: 16px;
padding-top: 20px;
z-index: 10;
}
ul.work li span strong {
letter-spacing: -0.07em;
color: #999;
font-weight: normal;
}
ul.work li a.lightbox {
text-indent: -1000px;
}
ul.work li a.page10 {
z-index: 15;
}
ul.work li a.page9 {
z-index: 16;
}
ul.work li a.page8 {
z-index: 17;
}
ul.work li a.page7 {
z-index: 18;
}
ul.work li a.page6 {
z-index: 19;
}
ul.work li a.page5 {
z-index: 20;
}
ul.work li a.page4 {
z-index: 21;
}
ul.work li a.page3 {
z-index: 22;
}
ul.work li a.page2 {
z-index: 23;
}
ul.work li a.page1 {
z-index: 24;
}

ul.websites li, ul.websites li h3, ul.websites li span, ul.websites li a.lightbox {
width: 548px;
}
ul.websites li#aparnamore {
background-image: url(work/websites/aparnamore.jpg);
}
ul.websites li#crtechnologies {
background-image: url(work/websites/crtechnologies.jpg);
}
ul.websites li#fashionbase {
background-image: url(work/websites/fashionbase.jpg);
}
ul.websites li#gymdirectory {
background-image: url(work/websites/gymdirectory.jpg);
}
ul.websites li#gymtext {
background-image: url(work/websites/gymtext.jpg);
}
ul.websites li#koolkids {
background-image: url(work/websites/koolkids.jpg);
}
ul.websites li#maximuscle {
background-image: url(work/websites/maximuscle.jpg);
}
ul.websites li#aparnamore {
background-image: url(work/websites/aparnamore.jpg);
}
ul.websites li#maxiwomen {
background-image: url(work/websites/maxiwomen.jpg);
}
ul.websites li#moveutoday {
background-image: url(work/websites/moveutoday.jpg);
}
ul.websites li#musclebulletin {
background-image: url(work/websites/musclebulletin.jpg);
}
ul.websites li#nutrisciences {
background-image: url(work/websites/nutrisciences.jpg);
}
ul.websites li#smartwaste {
background-image: url(work/websites/smartwaste.jpg);
}
ul.websites li#studio72 {
background-image: url(work/websites/studio72.jpg);
}
ul.websites li#sunlight {
background-image: url(work/websites/sunlight.jpg);
}
ul.websites li#creasafe {
background-image: url(work/websites/creasafe.jpg);
}
ul.websites li#moveremove {
background-image: url(work/websites/moveremove.jpg);
}
ul.websites li#nortonfolgate {
background-image: url(work/websites/nortonfolgate.jpg);
}
ul.websites li#forgeltd {
background-image: url(work/websites/forgeltd.jpg);
}
ul.websites li#poundbid {
background-image: url(work/websites/poundbid.jpg);
}
ul.websites li#greenswanz{
background-image: url(work/websites/greenswanz.jpg);
}
ul.websites li h3 {
background-image: url(images/work-548.png);
}
ul.websites li a.visit {
display: block;
width: 65px;
height: 40px;
position: absolute;
background: url(images/visit.png) 0 0 no-repeat;
top: 110px;
left: 0;
z-index: 25;
text-indent: -1000px;
overflow: hidden;
}

ul.layouts li {
background-position: top left;
float: left;
}
ul.layouts li, ul.layouts li h3, ul.layouts li span, ul.layouts li a.lightbox {
width: 266px;
}
ul.layouts li#layout1 {
background-image: url(work/layouts/layout1.jpg);
}
ul.layouts li#layout2 {
margin-right: 16px;
background-image: url(work/layouts/layout2.jpg);
}
ul.layouts li#layout3 {
background-image: url(work/layouts/layout3.jpg);
}
ul.layouts li#layout4 {
margin-right: 16px;
background-image: url(work/layouts/layout4.jpg);
}
ul.layouts li#layout5 {
background-image: url(work/layouts/layout5.jpg);
}
ul.layouts li#layout6 {
margin-right: 16px;
background-image: url(work/layouts/layout6.jpg);
}
ul.layouts li#layout7 {
background-image: url(work/layouts/layout7.jpg);
}
ul.layouts li#layout8 {
margin-right: 16px;
background-image: url(work/layouts/layout8.jpg);
}
ul.layouts li#layout9 {
background-image: url(work/layouts/layout9.jpg);
}
ul.layouts li#layout10 {
margin-right: 16px;
background-image: url(work/layouts/layout10.jpg);
}
ul.layouts li#layout11 {
background-image: url(work/layouts/layout11.jpg);
}
ul.layouts li#layout12 {
margin-right: 16px;
background-image: url(work/layouts/layout12.jpg);
}
ul.layouts li#layout13 {
background-image: url(work/layouts/layout13.jpg);
}
ul.layouts li#layout14 {
margin-right: 16px;
background-image: url(work/layouts/layout14.jpg);
}
ul.layouts li h3 {
text-indent: -1000px;
background-image: url(images/work-266.png);
}

ul.banners li, ul.banners li h3, ul.banners li span, ul.banners li a.lightbox {
width: 548px;
}
ul.banners li#banners1 {
background-image: url(work/banners/banners1.jpg);
}
ul.banners li#banners2 {
background-image: url(work/banners/banners2.jpg);
}
ul.banners li#banners3 {
background-image: url(work/banners/banners3.jpg);
}
ul.banners li#banners4 {
background-image: url(work/banners/banners4.jpg);
}
ul.banners li#banners5 {
background-image: url(work/banners/banners5.jpg);
}
ul.banners li#banners6 {
background-image: url(work/banners/banners6.jpg);
}
ul.banners li#banners7 {
background-image: url(work/banners/banners7.jpg);
}
ul.banners li#banners8 {
background-image: url(work/banners/banners8.jpg);
}
ul.banners li#banners9 {
background-image: url(work/banners/banners9.jpg);
}
ul.banners li#banners10 {
background-image: url(work/banners/banners10.jpg);
}
ul.banners li h3 {
background-image: url(images/work-548.png);
}

ul.logos li {
background-position: top left;
float: left;
}
ul.logos li, ul.logos li h3, ul.logos li span, ul.logos li a.lightbox {
width: 266px;
}
ul.logos li#logo1 {
background-image: url(work/logos/logo1.jpg);
}
ul.logos li#logo2 {
margin-right: 16px;
background-image: url(work/logos/logo2.jpg);
}
ul.logos li#logo3 {
background-image: url(work/logos/logo3.jpg);
}
ul.logos li#logo4 {
margin-right: 16px;
background-image: url(work/logos/logo4.jpg);
}
ul.logos li#logo5 {
background-image: url(work/logos/logo5.jpg);
}
ul.logos li#logo6 {
margin-right: 16px;
background-image: url(work/logos/logo6.jpg);
}
ul.logos li#logo7 {
background-image: url(work/logos/logo7.jpg);
}
ul.logos li#logo8 {
margin-right: 16px;
background-image: url(work/logos/logo8.jpg);
}
ul.logos li#logo9 {
background-image: url(work/logos/logo9.jpg);
}
ul.logos li#logo10 {
margin-right: 16px;
background-image: url(work/logos/logo10.jpg);
}
ul.logos li#logo11 {
background-image: url(work/logos/logo11.jpg);
}
ul.logos li#logo12 {
margin-right: 16px;
background-image: url(work/logos/logo12.jpg);
}
ul.logos li#logo13 {
background-image: url(work/logos/logo13.jpg);
}
ul.logos li#logo14 {
margin-right: 16px;
background-image: url(work/logos/logo14.jpg);
}
ul.logos li#logo15 {
background-image: url(work/logos/logo15.jpg);
}
ul.logos li#logo16 {
margin-right: 16px;
background-image: url(work/logos/logo16.jpg);
}
ul.logos li#logo17 {
background-image: url(work/logos/logo17.jpg);
}
ul.logos li#logo18 {
margin-right: 16px;
background-image: url(work/logos/logo18.jpg);
}
ul.logos li#logo19 {
background-image: url(work/logos/logo19.jpg);
}
ul.logos li#logo20 {
margin-right: 16px;
background-image: url(work/logos/logo20.jpg);
}
ul.logos li h3 {
text-indent: -1000px;
background-image: url(images/work-266.png);
}

ul.editing li, ul.editing li h3, ul.editing li span, ul.editing li a.lightbox {
width: 548px;
}
ul.editing li#editing1 {
background-image: url(work/editing/editing1.jpg);
}
ul.editing li#editing2 {
background-image: url(work/editing/editing2.jpg);
}
ul.editing li#editing3 {
background-image: url(work/editing/editing3.jpg);
}
ul.editing li#editing4 {
background-image: url(work/editing/editing4.jpg);
}
ul.editing li#editing5 {
background-image: url(work/editing/editing5.jpg);
}
ul.editing li#editing6 {
background-image: url(work/editing/editing6.jpg);
}
ul.editing li#editing7 {
background-image: url(work/editing/editing7.jpg);
}
ul.editing li#editing8 {
background-image: url(work/editing/editing8.jpg);
}
ul.editing li#editing9 {
background-image: url(work/editing/editing9.jpg);
}
ul.editing li#editing10 {
background-image: url(work/editing/editing10.jpg);
}
ul.editing li h3 {
background-image: url(images/work-548.png);
}

ul.multimedia li {
background-position: top left;
float: left;
}
ul.multimedia li, ul.multimedia li h3, ul.multimedia li span, ul.multimedia li a.lightbox {
width: 266px;
}
ul.multimedia li#multimedia1 {
background-image: url(work/multimedia/multimedia1.jpg);
}
ul.multimedia li#multimedia2 {
margin-right: 16px;
background-image: url(work/multimedia/multimedia2.jpg);
}
ul.multimedia li#multimedia3 {
background-image: url(work/multimedia/multimedia3.jpg);
}
ul.multimedia li#multimedia4 {
margin-right: 16px;
background-image: url(work/multimedia/multimedia4.jpg);
}
ul.multimedia li#multimedia5 {
background-image: url(work/multimedia/multimedia5.jpg);
}
ul.multimedia li#multimedia6 {
margin-right: 16px;
background-image: url(work/multimedia/multimedia6.jpg);
}
ul.multimedia li#multimedia7 {
background-image: url(work/multimedia/multimedia7.jpg);
}
ul.multimedia li#multimedia8 {
margin-right: 16px;
background-image: url(work/multimedia/multimedia8.jpg);
}
ul.multimedia li#multimedia9 {
background-image: url(work/multimedia/multimedia9.jpg);
}
ul.multimedia li#multimedia10 {
margin-right: 16px;
background-image: url(work/multimedia/multimedia10.jpg);
}
ul.multimedia li#multimedia11 {
background-image: url(work/multimedia/multimedia11.jpg);
}
ul.multimedia li#multimedia12 {
margin-right: 16px;
background-image: url(work/multimedia/multimedia12.jpg);
}
ul.multimedia li h3 {
text-indent: -1000px;
background-image: url(images/work-266.png);
}

ul.overview {
  width: 760px;
}
ul.overview li {
width: 370px;
margin-bottom: 20px;
}

ul.overview li#websites {
background: url(images/websites.gif) 0 0 no-repeat;
}
ul.overview li#layouts {
background: url(images/layouts.gif) 0 0 no-repeat;
}
ul.overview li#banners {
background: url(images/banners.gif) 0 0 no-repeat;
}
ul.overview li#logos {
background: url(images/logos.gif) 0 0 no-repeat;
}
ul.overview li#editing {
background: url(images/editing.gif) 0 0 no-repeat;
}
ul.overview li#multimedia {
background: url(images/multimedia.gif) 0 0 no-repeat;
}

ul.overview li#website_designing {
background: url(images/website_designing.gif) 0 0 no-repeat;
}
ul.overview li#design_revamp {
background: url(images/design_revamp.gif) 0 0 no-repeat;
}
ul.overview li#layout_code {
background: url(images/layout_code.gif) 0 0 no-repeat;
}
ul.overview li#small_business {
background: url(images/small_business.gif) 0 0 no-repeat;
}
ul.overview li#graphics_designing {
background: url(images/graphics_designing.gif) 0 0 no-repeat;
}
ul.overview li#multimedia_development {
background: url(images/multimedia_development.gif) 0 0 no-repeat;
}

ul.overview li#world_wide_web {
background: url(images/world_wide_web.gif) 0 0 no-repeat;
}
ul.overview li#web2 {
background: url(images/web2.gif) 0 0 no-repeat;
}
ul.overview li#search_engine_optimization {
background: url(images/search_engine_optimization.gif) 0 0 no-repeat;
}
ul.overview li#static_and_motion_graphics {
background: url(images/static_and_motion_graphics.gif) 0 0 no-repeat;
}
ul.overview li#designing {
background: url(images/designing.gif) 0 0 no-repeat;
}
ul.overview li#development {
background: url(images/development.gif) 0 0 no-repeat;
}

ul.overview li#profile {
background: url(images/profile.gif) 0 0 no-repeat;
}
ul.overview li#testimonial {
background: url(images/testimonial.gif) 0 0 no-repeat;
}
ul.overview li#links {
background: url(images/links.gif) 0 0 no-repeat;
}
ul.overview li#email {
background: url(images/email.gif) 0 0 no-repeat;
}
ul.overview li#payments {
background: url(images/payments.gif) 0 0 no-repeat;
}
ul.overview li#admin {
background: url(images/admin.gif) 0 0 no-repeat;
}
ul.overview li#visual {
background: url(images/visual.gif) 0 0 no-repeat;
}

ul.overview li strong {
font-size: 12px;
display: block;
}
ul.overview li span {
color: #666;
}
ul.overview li a {
display: block;
width: 313px;
height: 52px;
float: right;
}

ul.features {
  width: 548px;
}
ul.features:after {
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden;
}
ul.features li {
width: 182px;
margin-bottom: 20px;
}
ul.features li a {
display: block;
width: 150px;
height: 16px;
padding-left: 20px;
background: url(images/16-message-info.png) 0px 0px no-repeat;
border-bottom: 1px dashed #efefef;
}

#link_wonders h3 {
margin: 10px auto 20px auto;
}

.link_wonders_listing ul {
  width: 548px;
}
.link_wonders_listing ul:after {
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden;
}
.link_wonders_listing ul li {
width: 100%;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed #efefef;
}
.link_wonders_listing ul li a.link_title {
text-transform: capitalize;
position: relative;
display: block;
height: 16px;
padding-left: 20px;
background: url(images/16-circle-blue-check.png) 0px 0px no-repeat;
}
.link_wonders_listing ul li a.link_title img {
position: absolute;
top: 0px;
right: 0px;
}

ul.items
{
margin:0px;
margin-top: 7px;
padding:0px; 
list-style:none;
}
ul.items li
{
margin:0 0 5px 0;
padding:0 0 0 10px; 
text-indent: 0px;
background: url(images/arrow_collapse.gif) -3px 2px no-repeat; 
}

dl.learn {
margin: 0;
padding: 0;
}

dl.learn p {
margin: 10px 0px 5px 0px;
}

dl.learn dt
{
margin: 0;
padding: 0 0 0 19px;
font-weight: bold;
height: 20px;
font-size: 14px;
background: url(images/16-message-info.png) 0px 1px no-repeat;
line-height: normal;
}

dl.learn dd
{
margin: 0 0 25px 0;
padding: 0 0 10px 0;
border-bottom: 1px dashed #efefef;
}
dl.learn dd ul
{
margin:0px;
padding:0px; 
list-style:none;
}
dl.learn dd ul li
{
margin:0 0 5px 0;
padding:0 0 0 10px; 
text-indent: 0px;
background: url(images/arrow_collapse.gif) -3px 2px no-repeat; 
}
dl.learn dd ol
{
margin:0px;
padding:0px; 
}

dl.learn dd ol li
{
margin:0 0 5px 0;
padding:0 0 0 0;
text-indent: 0px;
list-style: lower-latin;
list-style-position: inside;  
}

dl.learn:after {
content: "."; 
display: block; 
clear: both; 
visibility: hidden;
}

dl.learn dd ul.pageScroll {
height: 16px;
padding: 0px;
margin: 0px;
color: #666;
margin-bottom: 0px;
margin-top: 10px;
}
dl.learn dd ul.pageScroll li {
display: inline;
background: none;
}
dl.learn .pageScroll li a {
font-size: 11px;
font-weight: normal;
}
dl.learn .pageScroll li.back {
}
dl.learn .pageScroll li.back a {
background: url(../media/images/breadcrumb_back.gif) center left no-repeat;
padding-left: 20px; 
}
dl.learn .pageScroll li.top a {
background: url(breadcrumb_top.gif) center right no-repeat;
/*padding-right: 20px;*/
font-size: 9px;
}

dl.learn dd ul.columns {
list-style: none; 
margin: 0px; 
padding: 0px; 
float: left; 
display: inline;
}
dl.learn dd ul.last_column {
float: none; 
}
dl.learn dd ul.columns li {
border: 1px solid #efefef;
padding:0 5px 0 5px; 
margin:0 0 0 0;
text-align: center;
background: none; 
}

/* office */
.contact-us .email {
border-top: 1px dashed #efefef;
padding-top: 20px;
margin-top: 20px;
}
.contact-us .office {
padding: 0;
margin: 0;
overflow: hidden;
width: 760px;
line-height: normal;
margin-bottom: 25px;
}
.office h3 {
margin-bottom: 10px;
}
.office ul {
padding: 0;
margin: 0;
width: 760px;
list-style: none;
}
.office li {
float: left;
width: 375px;
margin-right: 5px;
background: #efefef;
}
.office li p, .office li h4 {
margin: 5px;
}
.office li h4 span {
font-weight: normal;
font-size: 75%;
}
.office li.guernsey {
}
.office li.london {
}
.office li.toronto {
margin-right: 0;
}
.contact-us .chat {
margin-bottom: 20px;
}
.chat li {
margin-bottom: 5px;
width: 375px;
height: 25px;
}
.contact-us .chat p {
margin-bottom: 5px;
}
.contact-us .call li {
height: 50px;
}
.contact-us .post li {
height: 225px;
background-color: #efefef;
background-position: bottom left;
background-repeat: no-repeat;
}
.contact-us .post li.london {
background-image: url(images/map_london.jpg);
}
.contact-us .post li.toronto {
background-image: url(images/map_toronto.jpg);
}
.contact-us .clear {
margin: 45px 0 15px 0;
border-bottom: 1px dashed #efefef;
}

ul.sitemap, ul.sitemap ul, ul.sitemap ul ul
{
margin:0;
margin-top: 20px;
padding:0; 
list-style:none;
}
ul.sitemap li, ul.sitemap ul li, ul.sitemap ul ul li
{
margin:0 0 15px 0;
padding:0 0 0 15px; 
text-indent: 0px;
background: url(media/images/arrow_collapse.gif) -3px 2px no-repeat; 
}

ul.sitemap
{
}
ul.sitemap li
{
font-size: 22px;
font-weight: bold;
}

ul.sitemap ul
{
margin-left: 80px;
}
ul.sitemap ul li
{
font-size: 18px;
font-weight: bold;
}

ul.sitemap ul ul
{
margin-left: 80px;
}
ul.sitemap ul ul li
{
font-size: 16px;
}

table.admin_account_edit {
width: 100%;
background: #efefef;
margin:0;
padding:0; 
}
table.admin_account_edit tr {
}
table.admin_account_edit td {
background: #fff;
}
table.admin_account_edit input {
vertical-align: text-bottom;
}
table.admin_account_edit input#username {
width: 200px;
}
table.admin_account_edit input#password {
width: 250px;
}

div.get_messages {
border: 1px dashed #7fcc00;
margin: 10px auto;
background: #8de201 url(images/16-message-info.png) 5px center no-repeat;
color: #fff;
font-weight: bold;
}
div.get_messages div {
padding: 0;
margin: 20px 25px;
}
div.get_messages ol {
padding: 0;
margin: 20px 25px;
}
/********************* packages ************************/

#compare {
margin-left: auto;
margin-right: auto;
}

#compare h3 {
background: url(images/packages.gif) top right no-repeat;
width: 100%;
height: 100px;
display: block;
}

#compare .cols {
display: inline;
float:left;
width: 60px;
text-align: center;
line-height: 30px;
color: #FFFFFF;
font-weight: bold;
}
#compare .first-col {
width: 260px;
text-align: left;
color: #333;
font-weight: normal;
}
#compare .last-col {
border-right: none;
}
#compare .features, #compare .pro {
margin-right: 10px;
}

#compare .rows {
display: block;
width: 60px;
height: 30px;
margin-bottom: 1px;
}

#compare .rows .check {
display: block;
width: 60px;
height: 30px;
background: url(images/check.gif) center center no-repeat;
text-indent: -1000px;
overflow: hidden;
}

#compare .last-row a {
color: #FFFFFF;
}
#compare .first-col .rows {
width: 260px;
}
#compare .features .rows {
background: #efefef;
text-indent: 5px;
}
#compare .personal .rows {
background: #0079F7;
}
#compare .home .rows {
background: #00B6F7;
}
#compare .business .rows {
background: #00DBB5;
}
#compare .pro .rows {
background: #00DB6B;
}
#compare .basic .rows {
background: #0079F7;
}
#compare .standard .rows {
background: #00B6F7;
}
#compare .premium .rows {
background: #00DBB5;
}
#compare .supreme .rows {
background: #00DB6B;
}

/********************* Footer Styles *********************/

#footer {
	margin: 0px auto 0px auto;
	padding: 0px;
	height: 250px;
	width: 790px;
	background: url(images/footer.png) top left no-repeat;
}

#footer p{
	margin: 0;
	padding: 35px 0 0 0;
	display: block;
	font-size: smaller;
	text-align: center;
}

/********************* Bottom Styles *********************/
#bottom {
display: none;
}