html *{ margin:0; padding: 0;}

html{ background: #65b3e6 url(../images/main_bg.gif) repeat-x 0 0;}

body{ font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #4b5457;}

img{ border: none;}

p{ line-height: 21px; padding-bottom: 15px;}

div#preload { display: none; }

.quote{ font-style:italic;}
.blue_design{ font-size: 14px; color:#0075a7; padding: 0px; text-align: center; width: 500px; margin-left: 50px;}

.featured h1{font-family: Arial, Helvetica, sans-serif; font-size: 26px; letter-spacing: 0px; color: #65b3e6; padding-left: 40px; }
h1{ font-size: 21px; font-weight: normal; letter-spacing: -1px; color: #fff; padding-bottom: 4px; padding-top: 1px; margin-left:0px;}
h1.services{ font-size: 22px; font-weight: normal; letter-spacing: -1px; color: #999; padding-bottom: 10px; padding-top: 12px;}
h1.designer{ font-size: 22px; font-weight: normal; letter-spacing: -1px; color: #0096db; padding-bottom: 10px; padding-top: 12px;}
h1.portfolio{ font-size: 22px; font-weight: normal; letter-spacing: -1px; color: #0096db; padding-bottom: 10px; padding-top: 12px;}
h2{ font-size: 21px; font-weight: normal; letter-spacing: -1px; color: #0096db; padding-bottom: 15px; padding-top: 10px;}
h2.services{ font-size: 20px; font-weight: normal; letter-spacing: -1px; color: #0096db; padding-bottom: 10px; padding-top: 12px; padding-left: 53px;}
h3{ font-size: 21px; font-weight: normal; letter-spacing: -1px; color: #fff; padding-bottom: 4px; padding-top: 1px;}
h4{ font-size: 14px; font-weight: normal; color: #3e829c; padding-bottom: 5px;}
.scrollContainer div.panel h2{ color: #999; font-size: 18px; margin: 10px 0 10px 0px; padding: 0px;}

.clearfloat { display: inline-block; }

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

* html .clearfloat { height: 1%; }

.clearfloat { display: block; }

a{outline: none;}
	
a:link, a:visited{ color: #fff; text-decoration: none;}

a:hover { text-decoration: underline; }

a.readMore:link, a.readMore:visited{}

#web_design a:link, #web_design a:visited{ color: #fff; text-decoration: none;}

#web_design a:hover { text-decoration: underline; }

#main-content a.button1{ background: url(../images/button1.png) no-repeat 0 0 ;display: block; width: 130px; height: 23px; padding-left: 30px; padding-top: 2px; color: #fff; margin-left: 80px; }
#main-content a.button1:hover{ background: url(../images/button1.png) no-repeat 0 -25px; text-decoration: none;}

ul{ margin-bottom: 20px; margin-left: 20px; list-style: none;}
ul li{ padding: 3px 5px 3px 15px; background: url(../images/li_icon.png) no-repeat center left;}
#main-content ul.buttons{width: 99%; margin: 15px 0;}
#main-content ul.buttons li{float: left; margin-right: 5px; background-image: none; height: 25px; padding: 0;}
#main-content ul.buttons li.order a {background: url(../images/order.png) no-repeat 0 0 ; display: block; width: 103px; height: 20px; padding-left: 15px; padding-top: 5px; color: #fff;}
#main-content ul.buttons li.order a:hover {background: url(../images/order.png) no-repeat 0 -25px ; display: block; width: 103px; height: 20px; padding-left: 15px; padding-top: 5px; color: #fff; text-decoration: none;} 
#main-content ul.buttons li.enlarge a {background: url(../images/enlarge.png) no-repeat 0 0 ; display: block; width: 103px; height: 20px; padding-left: 12px; padding-top: 5px; color: #fff;}
#main-content ul.buttons li.enlarge a:hover {background: url(../images/enlarge.png) no-repeat 0 -25px ; display: block; width: 103px; height: 20px; padding-left: 12px; padding-top: 5px; color: #fff; text-decoration: none;} 

* html div#wrapper { padding-top: 48px; }

#wrapper{ width: 940px; margin: 40px auto 0 auto;}
#header{ width: 940px; height: 40px; margin-bottom: 20px;}
.slider-container-top{ width: 940px; height: 17px; padding: 0px; background: url(../images/slider_bg_top.gif) no-repeat top left;}
#slider-container{ width: 940px; padding: 0px; margin: 0px; background: #fff;}
.featured{ float: left; padding-left: 26px; padding-top: 75px; padding-bottom: 65px; margin-top: 0px; width: 286px; background: url(../images/featured_bgd.png) no-repeat;}
.slider-bottom{ width: 940px; height: 19px; background: url(../images/slider_bg_bottom.gif) no-repeat top left; margin-bottom: 10px;}
#content{ width: 940px;}
#sidebar{float: left; width: 290px; margin-left: 15px; display: inline;}
.sidebar-element{ background: #1c292e url(../images/rounded_top.png) top left no-repeat; padding: 9px 22px 0;}
.sidebar-bottomelement{ background: #1c292e url(../images/rounded_bottom.png) no-repeat top left; width: 290px; height: 23px; margin-bottom: 10px;}


#main-content-wrapper{ float: left; width: 635px;}
#main-content-top{ width: 595px; height:20px; padding: 0px 20px 0 20px; background: url(../images/main_content_top.png) no-repeat top left;}
#main-content { width: 595px; padding: 0px 20px; background: url(../images/main_content.png) repeat top left;}
#main-content-bottom{ width: 635px; height:17px; background: url(../images/main_content_bottom.png) no-repeat top left;}


#web_design_top{ background: url(../images/web_design_top.png) no-repeat top left; padding: 9px 20px; padding-bottom: 0;} 

#web_design{ background: #00c38c; padding: 4px 25px 0px 30px; color:#fff;} 
#web_design ul li a{color:#fff;} 
#web_design ul {margin: 0px; padding: 0 0 0 5px;} 
#web_design p{ color: #fff; padding-right: 40px;}

#web_design_bottom{ height: 19px; background: url(../images/web_design_bottom.png) no-repeat top left; padding: 9px 22px; padding-bottom: 5px;}


#graphic_design_top{ background: url(../images/graphic_design_top.png) no-repeat top left; padding: 9px 20px; padding-bottom: 0;} 

#graphic_design{ background: #ea9549; padding: 4px 25px 0px 30px; color:#fff;} 
#graphic_design ul li a{color:#fff;} 
#graphic_design ul {margin: 0px; padding: 0 0 0 5px;} 
#graphic_design p{ color: #fff; padding-right: 40px;}
#graphic_design p.education{ color: #fff; font-size: 12px; padding-right: 0px; padding-bottom: 13px; line-height: 17px;}

#graphic_design_bottom{ height: 19px; background: url(../images/graphic_design_bottom.png) no-repeat top left;}

#web_hosting_top{ background: url(../images/web_hosting_top.png) no-repeat top left; padding: 9px 20px; padding-bottom: 0;} 

#web_hosting{ background: #009fbd; padding: 4px 25px 0px 30px; color:#fff;} 
#web_hosting ul li a{color:#fff;} 
#web_hosting ul {margin: 0px; padding: 0 0 0 10px;} 
#web_hosting p{ color: #fff; padding-right: 40px;}

#web_hosting_bottom{ height: 19px; background: url(../images/web_hosting_bottom.png) no-repeat top left; padding: 9px 22px; padding-bottom: 5px;}

.sidebar_design_top{ background: url(../images/graphic_design_top.png) no-repeat top left; padding: 9px 20px; padding-bottom: 0;} 

.sidebar_design{ background: #ea9549; padding: 4px 23px; padding-bottom: 0; color:#fff;} 
.sidebar_design ul li a{color:#fff;} 
.sidebar_design ul {margin: 0px; padding: 0 0 0 0px;} 
.sidebar_design p.contact-details{ padding: 3px 0 0 0px; color: #ffff0a;}
.sidebar_design p.contact-details a{color: #ffff0a;}
.sidebar_design p.contact-details span{ color: #fff;}

.sidebar_design_bottom{ height: 19px; background: url(../images/graphic_design_bottom.png) no-repeat top left; padding: 9px 22px; padding-bottom: 0;}

#footer{ margin-top: 7px;}
#footer p{ text-align: center; color: #fff;}
.spacerline{ width: 99%; margin: 10px 0; border-bottom: 2px solid #e8ecee;}
.spacerline2{ width: 99%; margin-bottom: 20px; border-bottom: 1px solid #e8ecee;}
.vancouver_services{ width: 99%; padding-top:5px;}
.design_description{ float: left; width: 90%;}
.product-description{ float: left; width: 60%;}


.icon-left{ float: left; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; margin-top: 2px; display: inline;} /* icon floated left */
.icon-right{ float: right; margin-left: 25px; display: inline;} /* icon floated right */
.icon-right2{ float: right; margin-left: 0px; padding: 5px 0 0 0; display: inline;} /* icon floated right */
.image-left{ float: left; margin: 0 25px 20px 0 ; display: inline; border: 5px solid #7e9198;} /* image floated left */
.image-right{ float: right; margin: 0 0 20px 25px ; display: inline; border: 5px solid #7e9198;} /* image floated right */



#logo-container{ float: left; width: 216px; margin-left: 15px; display: inline; }
#logo-container small{ padding: 0; margin: 0;}
h1#logo { width: 372px; height: 40px; text-indent:-9000px; background: url(../images/logo.png) no-repeat 0 0;}
h1 a { height:40px; width: 216px; display:block; text-decoration:none;}
h1 a:hover { text-decoration:none; background:transparent;}
#login{ float: right; text-align:right; width: 316px; height: 5px; display: inline; margin-top: 0px; padding-right: 15px;padding-top: 0px;font-size: 10px; }
#login a{ color: #65b3e6; margin: 0px; padding: 0px; }
#login input{float: left; width: 210px; height: 16px;  background: #1e2c31; border: 1px solid #43626e; color: #8598a0; margin: 0; margin-right: 12px; padding: 4px;}
#login .btn{float: left; width: 68px; height: 25px; cursor: pointer; padding: 0; background: url(../images/search_btn.gif) no-repeat; border: none; color: #fff;}


#navigation{ background:url(../images/menu_bg.gif) no-repeat 0 0; width: 940px; height: 46px; line-height: 35px; margin-bottom: 8px;}
#navigation ul{ list-style: none;}
#navigation ul li{ display: inline; height: 42px; text-transform:uppercase; background: transparent; padding: 0;}
#navigation ul li a{ float: left; display: block; padding: 0 20px; color: #fff; text-decoration: none; background: url(../images/menu_divider.gif) top right no-repeat; font-size: 12px;}

#navigation ul li.first a{ float: left; display: block; padding: 0 20 0 0px; color: #fff; text-decoration: none;}

#navigation ul li a:hover { color: #ffff0a;}
#navigation ul li a.current{ color: #ffffff; font-weight: bold;}


blockquote{ padding-bottom: 15px;}
blockquote div { background: #1c292e url(../images/quote_right.png) bottom right no-repeat; padding-right: 10px; padding-top: 15px;}
blockquote p.text{ background: url(../images/quote_left.png) top left no-repeat; padding-left: 10px; text-indent: 30px; color: #8598a0; font-style: italic;}
.testimonial-name {padding-left: 10px; padding-bottom: 0;}
.designer {padding-bottom: 10px; color: #3e829c;}
.company {padding-bottom: 20px; color: #3e829c;}
.company a {font-weight: bold; color:#0096db; padding-bottom: 5px; font-style: italic;}
.tasks {padding-bottom: 20px;}



/*///////////////// CONTACT FORM ///////////////////////*/
fieldset{ border: none; width: 550px; margin-top: 10px; }
fieldset legend { display: none}
form p{ padding-bottom: 0;}
/* Label */
label{ width: 140px; margin: 8px 0 8px 0px; text-align: left;}
.required{ color: #3e829c	;}
/* Input, Textarea */
input, textarea{ border: 1px solid #d6e2e7; background: #fff; color: #6c787d; width: 300px; margin: 5px 0 10px 0px; padding: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
textarea{width: 400px; height: 85px; margin-bottom: 10px;}
input:focus, textarea:focus{ border: 1px solid #9ed7ec;}
input.button{ background: url(../images/button1-hover.png) no-repeat; width: 130px; height: 25px; padding-bottom: 15px; border: none; color: #fff; cursor: pointer; }
input.button:hover{ border: none;}
.notification_error{ padding: 5px; color: #a5041e; font-size: 13px; font-weight: bold;}
.notification_ok{padding: 5px; color: #418a06; font-size: 13px; font-weight: bold; }



#slider { width: 560px; background: #fff; margin: 0 auto; padding-top: 0px; position: relative;}
.scroll { height: 270px; width: 560px; overflow: auto; position: relative; /* fix for IE to respect overflow */ clear: left; }
.scrollContainer div.panel { height: 242px; width: 560px; /* change to 560px if not using JS to remove rh.scroll */}
.scrollContainer div.panel img { border: 6px solid #f5f5f5; float: left; margin-right: 20px; margin-left: 22px; margin-top: 10px; display: inline;}
.scrollContainer div.panel div.panel-text { width: 40%; float: left; color: #8598a0;}
.scrollContainer div.panel div.panel-text p.more{ float: right; width:103px;}
.scrollContainer div.panel div.panel-text p.more a{ background: url(../images/read-more-button.png) no-repeat 0 0 ; display: block; width: 103px; height: 23px; padding-top: 2px; color: #fff; padding-left: 15px; margin-top: 10px;}
.scrollContainer div.panel div.panel-text p.more a:hover{ background: url(../images/read-more-button.png) no-repeat 0 -25px ; text-decoration: none;}
.scrollButtons { position: absolute; top: 75px; cursor: pointer;} .scrollButtons.left { left: -20px;}
.scrollButtons.right { left: 550px;}