* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* Ridgeway Studios CSS by Ridgeway Studios - www.ridgewaystudios.com*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

body 
{ background: url(../images/main-bg.jpg) center top no-repeat; padding: 0px; margin: 0px; background-color: #000000; color: #616161; font-family: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif; font-size: 75%; text-align: center; }

a:link { color:#c0260a; text-decoration: none; }
a:visited { color:#c0260a; text-decoration: none; }
a:hover { color:#c0260a; text-decoration: underline; }
a:active { color:#c0260a; text-decoration: underline; }

a.screenshotlink:link { text-decoration: none; border: 1px solid #b5b5b5; display: block; width: 176px; height: 120px; }
a.screenshotlink:visited { text-decoration: none; border: 1px solid #b5b5b5; display: block; width: 176px; height: 120px; }
a.screenshotlink:hover { text-decoration: none; border: 1px solid #c0260a; display: block; width: 176px; height: 120px; }
a.screenshotlink:active { text-decoration: none; border: 1px solid #c0260a; display: block; width: 176px; height: 120px; }

a.screenshotmediumlink:link { text-decoration: none; border: 1px solid #b5b5b5; display: block; width: 276px; height: 174px; }
a.screenshotmediumlink:visited { text-decoration: none; border: 1px solid #b5b5b5; display: block; width: 276px; height: 174px; }
a.screenshotmediumlink:hover { text-decoration: none; border: 1px solid #c0260a; display: block; width: 276px; height: 174px; }
a.screenshotmediumlink:active { text-decoration: none; border: 1px solid #c0260a; display: block; width: 276px; height: 174px; }

a.boxheaderlink:link { color:#FFFFFF; text-decoration: none; display: block; width: 266px; height: 36px; }
a.boxheaderlink:visited { color:#FFFFFF; text-decoration: none; display: block; width: 266px; height: 36px; }
a.boxheaderlink:hover { color:#FFFFFF; text-decoration: underline; display: block; width: 266px; height: 36px; }
a.boxheaderlink:active { color:#FFFFFF; text-decoration: underline; display: block; width: 266px; height: 36px; }

a.greyboxheaderlink:link { color:#212121; text-decoration: none; display: block; width: 266px; height: 36px; }
a.greyboxheaderlink:visited { color:#212121; text-decoration: none; display: block; width: 266px; height: 36px; }
a.greyboxheaderlink:hover { color:#212121; text-decoration: underline; display: block; width: 266px; height: 36px; }
a.greyboxheaderlink:active { color:#212121; text-decoration: underline; display: block; width: 266px; height: 36px; }

a.redboxlink:link { color:#c0260a; text-decoration: none; display: block; width: 266px; }
a.redboxlink:visited { color:#c0260a; text-decoration: none; display: block; width: 266px; }
a.redboxlink:hover { color:#c0260a; text-decoration: underline; display: block; width: 266px; }
a.redboxlink:active { color:#c0260a; text-decoration: underline; display: block; width: 266px; }

a.greyboxlink:link { color:#212121; text-decoration: none; display: block; width: 266px; }
a.greyboxlink:visited { color:#212121; text-decoration: none; display: block; width: 266px; }
a.greyboxlink:hover { color:#212121; text-decoration: underline; display: block; width: 266px; }
a.greyboxlink:active { color:#212121; text-decoration: underline; display: block; width: 266px; }

a.greyboxlinknarrow:link { color:#212121; text-decoration: none; }
a.greyboxlinknarrow:visited { color:#212121; text-decoration: none; }
a.greyboxlinknarrow:hover { color:#212121; text-decoration: underline; }
a.greyboxlinknarrow:active { color:#212121; text-decoration: underline; }

a.whiteunderlink:link { color:#FFFFFF; text-decoration: underline; }
a.whiteunderlink:visited { color:#FFFFFF; text-decoration: underline; }
a.whiteunderlink:hover { color:#e1e1e1; text-decoration: underline; }
a.whiteunderlink:active { color:#e1e1e1; text-decoration: underline; }

a.whitelink:link { color:#FFFFFF; text-decoration: none; }
a.whitelink:visited { color:#FFFFFF; text-decoration: none; }
a.whitelink:hover { color:#FFFFFF; text-decoration: underline; }
a.whitelink:active { color:#FFFFFF; text-decoration: underline; }

a.breadcrumbs:link { color:#555555; text-decoration: none; }
a.breadcrumbs:visited { color:#555555; text-decoration: none; }
a.breadcrumbs:hover { color:#000000; text-decoration: underline; }
a.breadcrumbs:active { color:#000000; text-decoration: underline; }

a.footerlink:link { color:#929292; text-decoration: none; }
a.footerlink:visited { color:#929292; text-decoration: none; }
a.footerlink:hover { color:#929292; text-decoration: underline; }
a.footerlink:active { color:#929292; text-decoration: underline; }

a.imagelink:link { border-bottom: 0px; text-decoration: none; }
a.imagelink:visited { border-bottom: 0px; text-decoration: none; }
a.imagelink:hover { border-bottom: 0px; text-decoration: none; }
a.imagelink:active { border-bottom: 0px; text-decoration: none; }

h1 { color: #212121; font-size: 1.9em; font-weight: normal; }

h2 { color: #414141; font-size: 1.4em; font-weight: normal; padding-top: 2px; }

h3 { color: #212121; font-size: 1.4em; font-weight: normal; padding-top: 15px; }

h4 { color: #414141; font-size: 1.4em; font-weight: normal; padding-top: 15px; }

p { color: #616161; font-size: 1.2em; line-height: 1.6em; padding-bottom: 10px; }

.whiteh1 { color: #FFFFFF; padding-top: 30px; }

.whiteh2 { color: #e1e1e1; }

.whitep { color: #FFFFFF; margin-top: 10px; }

.nomargin { margin: 0px; padding: 0px; }

.first { margin-top: 10px; }

.firstunderline { margin-top: 10px; padding-bottom: 18px; border-bottom: 1px solid #b5b5b5; }

.underline { padding-bottom: 18px; border-bottom: 1px solid #b5b5b5; }

.underlineonly { padding-bottom: 0px; border-bottom: 1px solid #b5b5b5; }

.quote { padding-bottom: 0px; }

.captionheadline { font-size: 1.2em; line-height: 1.5em; padding: 4px 0px 0px 0px; }

.caption { font-size: 0.9em; line-height: 1.1em; padding-bottom: 10px; }

.captionright { font-size: 0.9em; line-height: 1.1em; padding-top: 17px; text-align: right; }

.linkcaptionright { font-size: 0.9em; line-height: 1.1em; padding: 4px 0px 15px 0px; text-align: left; }

.linkcaptioncenter { font-size: 0.9em; line-height: 1.1em; padding: 4px 0px 15px 0px; }

.boxheader { color: #FFFFFF; font-size: 1.4em; font-weight: normal; padding: 0px; }

.greyboxheader { color: #212121; font-size: 1.4em; font-weight: normal; padding: 0px; }

.box { color: #414141; font-size: 1.1em; line-height: 1.4em; }

.boxlink { font-size: 1.2em; line-height: 1.4em; padding: 0px; }

.arrows { padding: 0px 0px 0px 0px; }
.arrows li { color: #616161; line-height: 1.4em; font-weight: normal; margin: 0px; list-style: none; padding-left: 20px; background: url(../images/arrow-red-bullet.gif) left bottom no-repeat; }

.bulletlist { padding: 5px 0px 10px 0px; }
.bulletlist li { color: #616161; font-size: 1.2em; line-height: 1.4em; font-weight: normal; margin: 0px; list-style: none; padding-left: 20px; background: url(../images/arrow-grey-bullet.gif) left top no-repeat; }

.sitemaplist { padding: 0px 0px 0px 0px; }
.sitemaplist li { color: #616161; font-size: 1.2em; line-height: 1.4em; font-weight: normal; margin: 0px; list-style: none; padding-left: 20px; background: url(../images/arrow-red-bullet.gif) left top no-repeat; }

.sitemaplistindent { padding: 5px 0px 5px 20px; }
.sitemaplistindent li { color: #616161; font-size: 1.0em; line-height: 1.4em; font-weight: normal; margin: 0px; list-style: none; padding-left: 20px; background: url(../images/arrow-red-bullet.gif) left top no-repeat; }

.footerwhite { font-size: 1.2em; padding: 25px 0px 0px 0px; color: #e1e1e1; }
.footerbullets { padding: 0px 0px 10px 0px; }
.footerbullets li { float: left; position: relative; color: #FFFFFF; font-size: 1.0em; line-height: 1.4em; font-weight: normal; margin: 0px; list-style: none; padding: 0px 20px; background: url(../images/arrow-white-bullet.gif) left top no-repeat; }

div#page_size { width: 975px; margin: 0 auto 0 auto; padding: 0 10px 0 10px; background-color: #1a1a1a; text-align: left; }

div#page_header { background: url(../images/corners-bottom.jpg) left bottom no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; width: 975px; height: 78px; text-align: left; }

				#logo_links { float: left; position: relative; top: 0px; left: 0px; padding-left: 35px; width: 180px; list-style: none; }
				#logo_links li { float: left; top: 0px; left: 0px; padding: 0px; margin: 0px; }
				#logo_links li a { text-align: center; width: 20px; display: block; padding: 0px; margin: 0px; font-size: 0em; line-height: 0px; }
				#logo_links li a.logo { text-align: center; width: 180px; display: block; padding: 0px; margin: 0px; }
				#logo_links li a:visited { float: left; position: relative; display: block; }
				#logo_links li a:hover { float: left; position: relative; display: block; }
				#logo_links li a:active { float: left; position: relative; display: block; }
				
				#mainnavigation { visibility: hidden; display: none; }
			

div#page_breadcrumbs { visibility: hidden; display: none; }		
				
				
div#page_hero { float: left; position: relative; top: 0px; left: 0px; width: 975px; text-align: left; }

div#page_hero_black { float: left; height: 218px; overflow: hidden: display: block; position: relative; top: 0px; left: 0px; padding: 0px 30px 0px 30px; width: 915px; text-align: left; }

div#page_hero_casestudy { float: left; height: 300px; overflow: hidden: display: block; position: relative; top: 0px; left: 0px; padding: 0px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_homepage { background: url(../images/corners-bottom.jpg) left bottom no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 30px; width: 915px; text-align: left; margin-top: 7px; }

div#page_content_top { background: url(../images/corners-top.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 30px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_blank { background: url(../images/corners-top.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_monitor { background: url(../images/corners-top-monitor.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_ecommerce { background: url(../images/corners-top-ecommerce.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_hosting { background: url(../images/corners-top-hosting.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_seo { background: url(../images/corners-top-seo.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_businesscard { background: url(../images/corners-top-businesscard.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_letterhead { background: url(../images/corners-top-letterhead.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_brochures { background: url(../images/corners-top-brochures.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_posters { background: url(../images/corners-top-posters.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_adverts { background: url(../images/corners-top-adverts.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_video { background: url(../images/corners-top-video.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_photography { background: url(../images/corners-top-photography.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 15px 30px 0px 30px; width: 915px; text-align: left; }

div#page_content_top_about { background: url(../images/corners-top.jpg) left top no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 30px 0px 0px 30px; width: 945px; text-align: left; }

div#page_content_bottom { background: url(../images/corners-bottom.jpg) left bottom no-repeat; background-color: #FFFFFF; float: left; position: relative; top: 0px; left: 0px; padding: 0px 30px 30px 30px; width: 915px; text-align: left; }

.form_wrapper { width: 561px; padding: 5px 15px 15px 15px; background-color: #f1f1f1; border: 1px solid #b5b5b5; }
.form_parent { float: left; position: relative; width: 561px; }
.form_parent_bottom { float: left; position: relative; width: 561px; border-bottom: 1px solid #b5b5b5; padding-bottom: 15px; margin-bottom: 15px;}
.form_line { float: left; position: relative; width: 561px; padding: 0px 20px; }
.form_line_top { float: left; position: relative; width: 561px; padding: 15px 20px 0px 20px; }
.form_line_bottom { float: left; position: relative; width: 491px; padding: 0px 20px; border-bottom: 1px solid #b5b5b5; padding-bottom: 15px; margin-bottom: 15px; }
.form_content { float: left; position: relative; width: 260px; }
.form_content p { margin: 3px; }
.form_title { float: left; position: relative; width: 200px; padding-right: 20px; } 
.form { float: left; position: relative; }
.form_checkbox { float: left; position: relative; padding: 3px 4px 0px 20px; }
.form_option { float: left; position: relative; width: 200px; }
.form_option p { padding-bottom: 5px; }
.form_secret { visibility: hidden; display: none; }

input.btn { color: #FFFFFF; font-size: 1.2em; font-weight: normal; font-family: Trebuchet MS; background-color: #212121; border: 1px solid #e1e1e1; padding: 5px; }
input.btnhov { color: #212121; font-size: 1.2em; font-weight: normal; font-family: Trebuchet MS; background-color: #FFFFFF; border: 1px solid #212121; padding: 5px; }
input.field { color: #414141; font-size: 1.1em; font-weight: normal; font-family: Trebuchet MS; border: 1px solid #b5b5b5; padding: 2px; }
textarea.field { color: #414141; font-size: 1.1em; font-weight: normal; font-family: Trebuchet MS; border: 1px solid #b5b5b5; padding: 2px; } 

.full_column { float: left; position: relative; width: 915px; }

.left_column { float: left; position: relative; width: 591px; }
			    
				.client_list { float: center; position: relative; text-align: center; }
				.client_logo { float: left; position: relative; width: 206px; padding-top: 20px; margin-right: 30px; text-align: center; }
				.client_logo_nomargin { float: left; position: relative; width: 206px; padding-top: 20px; text-align: center; }
				.screenshot_container { float: left; position: relative; width: 591px; padding-bottom: 15px; border-bottom: 1px solid #b5b5b5; margin-bottom: 15px; }
				.small_screenshot { float: left; position: relative; width: 178px; padding-top: 10px; margin-right: 28px; }
				.small_screenshot_nomargin { float: left; position: relative; width: 178px; padding-top: 10px; }
				.medium_screenshot { float: left; position: relative; width: 278px; padding: 15px 15px 15px 0px; }
				.right_screenshot { float: right; position: relative; width: 278px; padding: 15px 0px 15px 15px; }
				.casestudy_screenshot { float: left; position: relative; width: 278px; padding: 15px 15px 30px 0px; }
				.screenshotborder { border: 1px solid #b5b5b5; }
				.videocontainer { float: center; position: relative; width: 591px; text-align: center; }				
				.videoborder { float: center; position: relative; padding: 3px; width: 480px; height: 360px; border: 1px solid #b5b5b5; }

.right_column { float: left; position: relative; width: 296px; margin-left: 28px; }

.right_column_black { float: left; height: 218px; overflow: hidden: display: block; position: relative; width: 296px; margin-left: 28px; }

.right_column_monitor { float: left; position: relative; width: 296px; margin-left: 28px; padding-top: 45px; }

.right_column_about { float: left; position: relative; width: 326px; margin-left: 28px; text-align }

.right_column_image { float: right; height: 424px; overflow: hidden: display: block; position: relative; text-align: right; padding: 0px; margin: 0px; }

.box_wrapper { float: left; position: relative; width: 296px; padding-top: 15px; }
.box_wrapper_dropped { float: left; position: relative; width: 296px; padding-top: 320px; }
.box_wrapper_full { float: left; position: relative; width: 296px; padding-top: 15px; margin-right: 13px; }
.box_wrapper_top { float: left; position: relative; width: 296px; padding-top: 0px; margin-top: 0px; }
.box_header_red { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-red.jpg) left top no-repeat; background-color: #c0260a; padding: 8px 15px 0px 15px; }
.box_header_grey { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-grey.jpg) left top no-repeat; background-color: #e1e1e1; padding: 8px 15px 0px 15px; text-align: left; }
.box_header_magenta_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-magenta-arrow.jpg) left top no-repeat; background-color: #652b65; padding: 8px 15px 0px 15px; }
.box_header_purple_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-purple-arrow.jpg) left top no-repeat; background-color: #4a2b66; padding: 8px 15px 0px 15px; }
.box_header_blue_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-blue-arrow.jpg) left top no-repeat; background-color: #27415c; padding: 8px 15px 0px 15px; }
.box_header_skyblue_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-skyblue-arrow.jpg) left top no-repeat; background-color: #226987; padding: 8px 15px 0px 15px; }
.box_header_green_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-green-arrow.jpg) left top no-repeat; background-color: #18462c; padding: 8px 15px 0px 15px; }
.box_header_peagreen_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-peagreen-arrow.jpg) left top no-repeat; background-color: #314719; padding: 8px 15px 0px 15px; }
.box_header_yellow_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-yellow-arrow.jpg) left top no-repeat; background-color: #afa31d; padding: 8px 15px 0px 15px; }
.box_header_orange_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-orange-arrow.jpg) left top no-repeat; background-color: #a05e12; padding: 8px 15px 0px 15px; }
.box_header_red_arrow { float: left; position: relative; width: 266px; height: 28px; overflow: hidden; display: block; background: url(../images/header-red-arrow.jpg) left top no-repeat; background-color: #c0260a; padding: 8px 15px 0px 15px; }
.box_content { float: left; position: relative; width: 266px; background: url(../images/box-border.gif) left top repeat-y; background-color: #FFFFFF; padding: 8px 15px 0px 15px; text-align: left; }
.box_screenshot { float: left; position: relative; width: 278px; background: url(../images/box-border.gif) left top repeat-y; background-color: #FFFFFF; padding: 8px 9px 0px 9px; text-align: left; }
.box_text { float: left; position: relative; width: 193px; text-align: left; padding-right: 5px; }
.box_image { float: left; position: relative; width: 68px; text-align: left; }
.box_link_red { float: left; position: relative; width: 266px; display: block; background: url(../images/arrow-red-off.gif) right top no-repeat; }
.box_link_grey { float: left; position: relative; width: 266px; display: block; background: url(../images/arrow-grey-off.gif) right top no-repeat; }
.box_footer { float: left; position: relative; width: 296px; height: 13px; overflow: hidden; display: block; background: url(../images/box-footer.gif) left top no-repeat; background-color: #FFFFFF; }
			
div#page_footer { background: url(../images/footer-bg.jpg) left top no-repeat; float: left; position: relative;  background-color: #1a1a1a; margin-top: 20px; padding: 15px 30px 50px 30px; width: 915px; }
				
div#copyright { float: left; width: 591px; }
											
				div#copyright .footer { visibility: hidden; display: none; }
				
div#icons { float: right; position: relative; text-align: right; }
											
		.ukwdaicon { float: left; position: relative; width: 103px; height: 31px; background: url(../images/logo-ukwda.gif) no-repeat; background-position: 0 0; padding-right: 10px; }
		.ukwdaicon:hover { background-position: 0 -100px; }
		.w3cicon { float: left; position: relative; width: 88px; height: 31px; background: url(../images/logo-w3c.gif) no-repeat; background-position: 0 0; }
		.w3cicon:hover { background-position: 0 -100px; }
		
div#footerlinks { visibility: hidden; display: none; }