/*===========================================================
WEBSITE: Harrogate Printing
COMPANY: outsidethebox.co.uk
===========================================================*/

body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 1.5em;		
		height: 100%;
		margin: 0px;
		padding: 0px;
		background: #ffffff;
		color: #111111;	
}

ul, ol, form {
    	padding: 0px;
    	margin: 0px;
}

/*===========================================================
HEADLINES, LINKS & PARAGRAPHS
===========================================================*/

h1, h2, h3, h4 { margin: 0px; padding: 0px; font-size: 1.0em; }
p { margin: 0px; padding: 0px; }

a:link, a:visited, a:active, a:hover { color: #ff5a00; text-decoration: none; }

/*=========================================================== 
LAYOUT
=============================================================
GENERAL SITE LAYOUT
===========================================================*/

#background_wrapper {
		display: block;
		float: left;
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
}

.wrapper {
		display: block;
		float: left;
		width: 980px;
		padding: 0px;
		margin: 0px 0px 0px 20px;
}

.print_frame {
        display: block;
        float: left;
        background: url("../images/print_frame.jpg") no-repeat;
        width: 980px;
        height: 17px;
        margin: 0px;
        padding: 0px;    
}

#content_wrapper {
	    float: left;
	    position: relative;
	    margin: 0px 20px 0px 20px;
	    padding: 0px;
	    width: 940px;
	    height: 461px;
	    overflow: hidden;   
}

#content_folio {  
	    float: left; 
	    position: absolute;  
	    top: 0;  
	    left: 0;  
	    width: 25000px;  
}

.content_repeat {
	    width: 940px;
	    height: 461px;
		margin: 0px 40px 0px 0px;
	    padding: 0;
	    float: left;
}

.content_left {
        display: block;
        float: left;
        width: 290px;
        height: 451px;
        margin: 0px;
        padding: 10px 0px 0px 0px;    
}

.content_right {
        display: block;
        float: right;
        position: relative;
        width: 620px;
        height: 461px;
        margin: 0px;
        padding: 0px;    
}

/*=========================================================== 
HEADER
===========================================================*/

#header {
		display: block;
		float: left;
		position: relative;
		width: 950px;
		height: 140px;
		margin: 0px;
		padding: 20px 20px 0px 10px;
}

a#header_logo {
		display: block; 
		float: left;
		background: url("../images/header_logo.jpg") no-repeat; 
		width: 107px;
		height: 0px !important; 
		height /**/: 107px;
		padding: 107px 0 0 0; 
		overflow: hidden;
        margin: 0px;
		border: none;
}

p#header_telephone {
  		display: block; 
		float: right;
		background: url("../images/header_telephone.jpg") no-repeat; 
		width: 133px;
		height: 0px !important; 
		height /**/: 17px;
		padding: 17px 0 0 0; 
		overflow: hidden;
        margin: 0px;
		border: none;  
}

p#header_tagline {
  		display: block; 
		position: absolute;
		bottom: 10px;
		right: 20px;
		background: url("../images/header_tagline.gif") no-repeat; 
		width: 445px;
		height: 0px !important; 
		height /**/: 36px;
		padding: 36px 0 0 0; 
		overflow: hidden;
        margin: 0px;
		border: none;  
}

/*=========================================================== 
NAVIGATION
===========================================================*/

#navigation {
		display: block;
		float: left;
		width: 480px;
		margin: 0px 0px 0px 217px;
		padding: 0px;
		line-height: 1.4em;
}

#navigation ul { display: block; float: left; width: 160px; list-style: none; margin: 0px; padding: 0px; }
#navigation ul li { display: block; float: left; width: 160px; margin: 0px; padding: 0px; }
#navigation ul li a.nav_off { display: block; float: left; margin: 0px; padding: 0px; color: #111111; } 
#navigation ul li a.nav_off:hover { color: #ff5a00; }
#navigation ul li a.nav_on { color: #ff5a00; }

/*=========================================================== 
FOOTER
===========================================================*/

#footer_wrapper {
		display: block;
		float: left;
		margin: 20px 0px 0px 0px;
		padding: 10px 0px 0px 0px;
		width: 100%;
		height: 70px;
		background: #111111;
		border-top: 15px solid #ff5a00;
}

.footer_container {
		display: block;
		float: left;
		width: 960px;
		margin: 0px 0px 0px 20px;
		padding: 0px 20px 0px 0px;
		color: #ffffff;
}

#footer_left {
        display: block;
        float: left;
        width: 520px;
        margin: 0px;
        padding: 0px;    
}

#footer_right {
        display: block;
        float: right;
        width: 440px;
        margin: 0px;
        padding: 0px;
        text-align: right; 
}

#footer_left a, #footer_right a { color: #ffffff; }
#footer_left a:hover, #footer_right a:hover { color: #ff5a00; }

/*=========================================================== 
HOMEPAGE
===========================================================*/

h2#homepage_title {
		display: block; 
		float: left; 
		background: url("../images/homepage_title.gif") no-repeat; 
		width: 287px; 
		height: 0px !important; 
		height /**/: 202px; 
		padding: 202px 0 0 0; 
		overflow: hidden;
}

#homepage_details {
        display: block;
        float: left;
        width: 290px;
        margin: 25px 0px 0px 0px;
        padding: 0px;
        line-height: 1.3em;
}

#homepage_details p { display: block; float: left; width: 290px; margin: 0px 0px 15px 0px; padding: 0px; }
#homepage_details ul { display: block; float: left; width: 290px; margin: 0px; padding: 0px; list-style: none; }
#homepage_details ul li { background: url("../images/bullet_dot.jpg") no-repeat 0px 6px; padding: 0px 0px 0px 15px; }

#homepage_news {
        display: block;
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 120px;
        height: 120px;
        padding: 15px;
}

#homepage_news h3 { display: block; float: left; width: 120px; font-size: 16px; color: #ffffff; }
#homepage_news strong { display: block; float: left; width: 120px; margin: 5px 0px 0px 0px; font-size: 14px; color: #555555; }
#homepage_news p { display: block; float: left; width: 120px; font-size: 14px; color: #c4c5c7; font-weight: bold; }
#homepage_news a { display: block; float: left; width: 120px; margin: 5px 0px 0px 0px; background: url("../images/bullet_arrow.gif") no-repeat 45px 50%; font-size: 14px; font-weight: bold; }

/*=========================================================== 
NEWS
===========================================================*/

h2#news_title {
		display: block; 
		float: left; 
		background: url("../images/news_title.jpg") no-repeat; 
		width: 108px; 
		height: 0px !important; 
		height /**/: 35px; 
		padding: 35px 0 0 0; 
		overflow: hidden;
}

.news_left {
        display: block;
        float: left;
        width: 270px;
        margin: 10px 0px 0px 0px;
        padding: 0px;
}

.news_left ul { display: block; float: left; width: 270px; height: 374px; list-style: none; margin: 40px 0px 0px 0px; padding: 0px; overflow: auto; }
.news_left ul li { display: block; float: left; position: relative; width: 240px; margin: 0px; padding: 15px 0px 15px 0px; border-top: 1px solid #111111; }
.news_left ul li.newslist_last { border-top: 1px solid #111111; border-bottom: 1px solid #111111; }
.news_left ul li a { display: block; float: left; width: 240px; margin: 0px; padding: 0px; }
.news_left ul li a strong { display: block; float: left; width: 220px; margin: 0px; padding: 0px; color: #111111; }
.news_left ul li a span { display: block; float: left; width: 220px; margin: 0px; padding: 0px; color: #111111; }

.news_left span.bullet_stencil {
        position: absolute;
        right: 0px;
        top: 26px;
        background: url("../images/bullet_stencil.gif") no-repeat;
        width: 12px;
        height: 14px;            
}

.news_right {
        display: block;
        float: right;
        width: 600px;
        margin: 0px;
        padding: 0px;    
}

.news_date {
        display: block;
        float: left;
        position: relative;
        width: 245px;
        height: 431px;
        margin: 0px;
        padding: 30px 0px 0px 0px;    
}

.news_date h3 { position: absolute; top: 85px; left: 0px; font-size: 30px; color: #ffffff; padding: 10px; line-height: 1em; }

.news_article {
        float: left;
        width: 335px;
        height: 381px;
        margin: 80px 0px 0px 0px;
        padding: 0px 0px 0px 20px;   
        overflow: auto;       
}

.news_article p { display: block; float: left; width: 295px; margin: 0px 0px 15px 0px; padding: 0px; }

/*=========================================================== 
SERVICES
===========================================================*/

h2#services_title {
		display: block; 
		float: left; 
		background: url("../images/services_title.jpg") no-repeat; 
		width: 161px; 
		height: 0px !important; 
		height /**/: 35px; 
		padding: 35px 0 0 0; 
		overflow: hidden;
}

.services_left {
        display: block;
        float: left;
        width: 270px;
        margin: 10px 0px 0px 0px;
        padding: 0px;
}

.services_left ul { display: block; float: left; width: 270px; height: 374px; list-style: none; margin: 40px 0px 0px 0px; padding: 0px; }
.services_left ul li { display: block; float: left; position: relative; width: 240px; margin: 0px; padding: 8px 0px 8px 0px; border-top: 1px solid #111111; }
.services_left ul li.servicelist_last { border-top: 1px solid #111111; border-bottom: 1px solid #111111; }
.services_left ul li a { display: block; float: left; width: 240px; margin: 0px; padding: 0px; color: #111111; }
.services_left ul li a:hover { color: #ff5a00; }
.services_left ul li a.selected { font-weight: bold; }

.services_left span.bullet_stencil {
        position: absolute;
        right: 0px;
        top: 10px;
        background: url("../images/bullet_stencil.gif") no-repeat;
        width: 12px;
        height: 14px;            
}

.services_right {
        display: block;
        float: right;
        width: 620px;
        margin: 0px;
        padding: 0px;    
}

.service_image {
        display: block;
        float: left;
        width: 620px;
        height: 149px;
        margin: 0px;
        padding: 0px;    
}

.service_article_left {
        float: left;
        width: 285px;
        height: 381px;
        margin: 20px 0px 0px 0px;
        padding: 0px;         
}

.service_article_right {
        float: right;
        width: 305px;
        height: 381px;
        margin: 20px 0px 0px 0px;
        padding: 0px;         
}

.service_article_left p, .service_article_right p { display: block; float: left; margin: 0px 0px 10px 0px; padding: 0px; }
.service_article_left h3, .service_article_right h3 { font-size: 16px; line-height: 1.2em; padding: 0px 0px 10px 0px; }

/*=========================================================== 
GALLERY
===========================================================*/

h2#gallery_title {
		display: block; 
		float: left; 
		background: url("../images/gallery_title.jpg") no-repeat; 
		width: 142px; 
		height: 0px !important; 
		height /**/: 44px; 
		padding: 44px 0 0 0; 
		overflow: hidden;
}

.gallery_left {
        display: block;
        float: left;
        width: 270px;
        margin: 10px 0px 0px 0px;
        padding: 0px;
}

.gallery_left ul { display: block; float: left; width: 270px; height: 374px; list-style: none; margin: 40px 0px 0px 0px; padding: 0px; }
.gallery_left ul li { display: block; float: left; position: relative; width: 240px; margin: 0px; padding: 8px 0px 8px 0px; border-top: 1px solid #111111; }
.gallery_left ul li.gallerylist_last { border-top: 1px solid #111111; border-bottom: 1px solid #111111; }
.gallery_left ul li a { display: block; float: left; width: 240px; margin: 0px; padding: 0px; color: #111111; }
.gallery_left ul li a:hover { color: #ff5a00; }
.gallery_left ul li a.selected { font-weight: bold; }

.gallery_left span.bullet_stencil {
        position: absolute;
        right: 0px;
        top: 10px;
        background: url("../images/bullet_stencil.gif") no-repeat;
        width: 12px;
        height: 14px;            
}

.gallery_right {
        display: block;
        float: right;
        width: 620px;
        margin: 0px;
        padding: 0px;    
}

.gallery_image {
        float: left;
        width: 620px;
        height: 300px;
        margin: 0px;
        padding: 0px;    
}

.gallery_image_links {
        display: block;
        float: right;
        width: 265px;
        height: 60px;
        margin: 20px -10px 0px 0px;
        padding: 0px;
}

.gallery_image_links a { display: block; float: left; width: 60px; height: 60px; background: #dddddd; margin: 0px 5px 0px 0px; }
.gallery_image_links a img { border: 0px; }
/* .gallery_image_links a:hover { background: #c4c5c7; } */

.gallery_text {
        float: left;
        width: 300px;
        height: 141px;
        margin: 20px 0px 0px 0px;
        padding: 0px;         
}

.gallery_text h3 { font-size: 16px; line-height: 1.2em; padding: 0px 0px 10px 0px; }

/*=========================================================== 
WHAT DOES HPL STAND FOR?
===========================================================*/

h2#stand_title {
		display: block; 
		float: left; 
		background: url("../images/stand_title.jpg") no-repeat; 
		width: 272px; 
		height: 0px !important; 
		height /**/: 79px; 
		padding: 79px 0 0 0; 
		overflow: hidden;
}

#stand_details {
        display: block;
        float: left;
        width: 290px;
        margin: 55px 0px 0px 0px;
        padding: 0px;
        line-height: 1.3em;
}

#stand_details p { display: block; float: left; width: 290px; margin: 0px 0px 15px 0px; padding: 0px; }

/*=========================================================== 
ENVIRONMENT
===========================================================*/

#environment {
        width: 940px; 
        height: 461px;
        position: relative;
}

h2#environment_title {
		display: block; 
		position: absolute;
		top: 38px;
		left: 22px; 
		background: url("../images/environment_title.gif") no-repeat; 
		width: 296px; 
		height: 0px !important; 
		height /**/: 77px; 
		padding: 77px 0 0 0; 
		overflow: hidden;
}

#environment_details {
        display: block;
        position: absolute;
        top: 150px;
        left: 22px;
        width: 310px;
        padding: 0px;
        line-height: 1.3em;
}

#environment_details p { display: block; float: left; width: 310px; margin: 0px 0px 10px 0px; padding: 0px; }

/*=========================================================== 
ABOUT
===========================================================*/

h2#about_title {
		display: block; 
		float: left; 
		background: url("../images/about_title.jpg") no-repeat; 
		width: 175px; 
		height: 0px !important; 
		height /**/: 35px; 
		padding: 35px 0 0 0; 
		overflow: hidden;
}

#about_details {
        display: block;
        float: left;
        width: 290px;
        margin: 55px 0px 0px 0px;
        padding: 0px;
        line-height: 1.3em;
}

#about_details p { display: block; float: left; width: 290px; margin: 0px 0px 15px 0px; padding: 0px; }
#about_details ul { display: block; float: left; width: 290px; margin: 0px; padding: 0px; list-style: none; }
#about_details ul li { background: url("../images/bullet_dot.jpg") no-repeat 0px 6px; padding: 0px 0px 0px 15px; }

/*=========================================================== 
PERSONALISATION
===========================================================*/

h2#personalisation_title {
		display: block; 
		float: left; 
		background: url("../images/personalisation_title.jpg") no-repeat; 
		width: 287px; 
		height: 0px !important; 
		height /**/: 35px; 
		padding: 35px 0 0 0; 
		overflow: hidden;
}

#personalisation_details {
        display: block;
        float: left;
        width: 290px;
        margin: 55px 0px 0px 0px;
        padding: 0px;
        line-height: 1.3em;
}

#personalisation_details p { display: block; float: left; width: 290px; margin: 0px 0px 15px 0px; padding: 0px; }

/*=========================================================== 
HISTORY
===========================================================*/

h2#history_title {
		display: block; 
		float: left; 
		background: url("../images/history_title.jpg") no-repeat; 
		width: 134px; 
		height: 0px !important; 
		height /**/: 44px; 
		padding: 44px 0 0 0; 
		overflow: hidden;
}

#history_details {
        display: block;
        float: left;
        width: 290px;
        margin: 55px 0px 0px 0px;
        padding: 0px;
        line-height: 1.3em;
}

#history_details p { display: block; float: left; width: 290px; margin: 0px 0px 15px 0px; padding: 0px; }

/*=========================================================== 
CONTACT
===========================================================*/

h2#contact_title {
		display: block; 
		float: left; 
		background: url("../images/contact_title.jpg") no-repeat; 
		width: 149px; 
		height: 0px !important; 
		height /**/: 35px; 
		padding: 35px 0 0 0; 
		overflow: hidden;
}

#contact_left {
        display: block;
        float: left;
        width: 290px;
        height: 451px;
        margin: 0px;
        padding: 10px 0px 0px 0px;   
}

#contact_form {
        display: block;
        float: left;
        width: 290px;
        margin: 0px;
        padding: 20px 0px 0px 0px;   
}

#contact_form h3 { display: block; float: left; width: 290px; margin: 0px; line-height: 1em; padding: 0px 0px 20px 0px; }
#contact_form h3.success { color: #339900; } 
#contact_form h3.fail { color: #b02027; } 
#contact_form p { display: block; float: left; width: 290px; margin: 0px 0px 10px 0px; }

.contact_left_field {
        display: block;
        float: left;
        width: 290px;
        margin: 10px 0px 0px 0px;
        padding: 0px;
}

.contact_left_field label { display: block; float: left; width: 80px; font-weight: bold; padding: 5px 20px 5px 0px; margin: 0px; }
.contact_left_field label span { color: #ff5a00; font-size: 14px; }
.contact_left_field .comment_input { display: block; float: left; width: 180px; height: 16px; background: url("../images/field_bg.jpg") no-repeat; border: none; margin: 0px; padding: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.contact_left_field .comment_input:focus { background-color: #ffff99; }
.contact_left_field textarea { display: block; float: left; width: 180px; height: 80px; background: url("../images/field_bg.jpg") no-repeat; border: none; margin: 0px; padding: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.contact_left_field textarea:focus { background-color: #ffff99; }

.contact_form_button { display: block; float: right; margin: 20px 0px 20px 0px; background: url("../images/bullet_right.jpg") no-repeat right 50%; padding: 0px 20px 0px 0px; color: #ff5a00; font-weight: bold; }

/*=========================================================== 
LANDING PAGES
===========================================================*/

#sme_paul {
        display: block;
        float: left;
        width: 940px; 
        height: 461px;
        background: url("../images/sme_bg_paul.jpg") no-repeat;
        position: relative;
        margin: 0px;
        padding: 0px;
}

#sme_emma {
        display: block;
        float: left;
        width: 940px; 
        height: 461px;
        background: url("../images/sme_bg_emma.jpg") no-repeat;
        position: relative;
        margin: 0px;
        padding: 0px;
}

.sme_text {
        display: block;
        position: absolute;
        width: 260px;
        height: 150px;
        top: 270px;
        left: 20px;
        font-size: 1.2em;
}

.sme_button {
		display: block; 
		position: absolute;
		top: 390px;
		left: 400px;
		background: url("../images/button_view.jpg") no-repeat; 
		width: 151px; 
		height: 0px !important; 
		height /**/: 31px; 
		padding: 31px 0 0 0; 
		overflow: hidden;
		cursor: pointer;
}

#agency {
        display: block;
        float: left;
        width: 940px; 
        height: 461px;
        background: url("../images/agency_bg.jpg") no-repeat;
        position: relative;
        margin: 0px;
        padding: 0px;
}

#agency_text, #corporate_text {
        display: block;
        position: absolute;
        width: 270px;
        height: 150px;
        top: 175px;
        left: 20px;
        font-size: 1.2em;
}

#agency_button, #corporate_button {
		display: block; 
		position: absolute;
		top: 350px;
		left: 340px;
		background: url("../images/button_view.jpg") no-repeat; 
		width: 151px; 
		height: 0px !important; 
		height /**/: 31px; 
		padding: 31px 0 0 0; 
		overflow: hidden;
		cursor: pointer;
}

#corporate {
        display: block;
        float: left;
        width: 940px; 
        height: 461px;
        background: url("../images/corporate_bg.jpg") no-repeat;
        position: relative;
        margin: 0px;
        padding: 0px;
}