/**
 * CSS - styles.css
 * - Main CSS page for UniversalPacking.co.uk
 * @author Jonathan Fullbrook (jpfullbrook@hotmail.com)
 * @copyright Universal Packing Specialists Ltd, 2009
 */
 @charset "utf-8";
/* CSS Document */

/*************************************/
/********** MAIN HTML ITEMS **********/

/*****
 * FONT = Verdana, 10px, #666666
 * Background colour = #e3e3e3
 * Line colour = #cccccc
 * Heading Font = Trebuchet MS, 12px, #666666
 * Dark Red = #660000
 * Lighter Red = #cc0000
 * Dark Grey Font = #666666
 * Old Font = "Trebuchet MS",Trebuchet,"Helvetica Neue",Arial,Helvetica,sans-serif;
*/

/*** MAIN BODY ***/
body { font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 11px; font-weight: normal; color: #666; margin: 0px; background-color: #e3e3e3; background-image:url(../img/grey_fade_background.png); background-repeat:repeat-x; background-position:left top;

}

td, p, div, th { font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 11px; font-weight: normal; }

p { margin:0; padding:0; }
img {border: 0;}
ul {list-style-type:square} /* Bulleted Lists are now squares */

/*** HYPER LINKS ***/
a { color: #666; font-weight: inherit; text-decoration: none; }
a:visited { color: #666; font-weight: inherit; text-decoration: none; }
a:hover { color: #dd0000; font-weight: inherit; text-decoration: none; }
a:active {color: #dd0000; font-weight: inherit; text-decoration: none; }

/*** BODY, HEADER, MAIN, FOOTER div id's ***/
#body{ display: block; margin: 0 auto; width: 860px; height: 100%; position: relative;}
#header{ display: block; width: 100%; height: 110px; position: relative; z-index: 100; font-size:9px; color:#999;}
#main{ display: block; width: 858px; height:auto; position: relative; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; background-color: white;}
#footer{ display: block; width: 100%; height: 100px; position: relative; }

/*** ROUNDED CORNERS ***/
div.top_left{display:block; position:absolute; top:110px; left:0px; z-index: 2;}
div.top_right{display:block; position:absolute; top:110px; right:0px; z-index: 2;}
/*div.bottom_corners{margin:0;padding:0;}*/
div.bottom_corners{display:block; width: 100%; position:relative; margin:0;padding:0;}

/*** HEADER ***/
/*div.ups_logo{ display:block; width:258px; height:72px; position:absolute; top:14px; left:20px; /*background-image:url(../img/universalpacking.png); background-repeat:no-repeat; background-position:left top;}*/}
div.header_ups_logo{ display:block; position:absolute; width:150px; height:110px;  top:0px; left:20px; text-align: left;  /*background-image:url(../img/universalpacking.png); background-repeat:no-repeat; background-position:left top;}*/}

div.header_ups{display:block; width:150px; font-size:9px; height:14px; position:absolute; top:0px; left:20px; text-align: left; }
div.header_text{display:block; width:400px; font-size:9px; height:14px; position:absolute; top:14px; right:20px; text-align: right; }
/*div.header_text_phone{display:block; position:absolute; top:42px; right:20px; text-align: right; color:#666; font-size:16px;}*/

/*div.header_text{display:block; width:400px; font-size:9px; height:14px; position:absolute; top:20px; right:20px; text-align: right; }*/
div.header_text_phone{display:block; position:absolute; top:48px; right:20px; text-align: right; color:#666; font-size:16px;}


/* NOT USED = div.header_text.sign_in{position:absolute; top:38px;}*/
div.header_navigation{display: block; height: 16px; position: absolute; bottom: 5px; right: 20px;}

div.header_text a{color: #999; font-weight: inherit; text-decoration: none;}
div.header_text a:visited{color: #999; font-weight: inherit; text-decoration: none;}
div.header_text a:hover{color: #dd0000; font-weight: inherit; text-decoration: underline;}



/********** MAIN **********/
/* Big Red - News Box */
#homepage{height:665px; background-color: white;}
div.news_box{ display: block; width: 820px; height: 220px;  position: relative; margin-top: 19px; margin-left: 19px; background:url(../img/news_box.png); background-repeat:no-repeat; background-position: left top;}
/* Homepage Text */
div.homepage_box{ display: block; width: 800px; height: auto; position: relative; margin: 30px 0px 30px 29px;}
div.homepage_box h1{font: normal 18px Verdana,Helvetica,Arial,sans-serif; color: #555; letter-spacing: -1px; padding-bottom: 4px; margin-bottom: 10px; border-bottom: 1px dotted #ccc;}

/* Three Main Boxes - Casemaking, Dangerous Goods, General Packing */
div.main_box_left{ display: block; float:left; width:260px; height:150px; position:realtive; margin-left: 19px; background:url(../img/main_box.png); background-repeat:no-repeat; background-position: left top; }
div.main_box_middle{ display: block; float:left;  width: 260px; height: 150px; position: relative; margin-left:20px; background:url(../img/main_box.png); background-repeat:no-repeat; background-position: left top; }
div.main_box_right{ display: block; float:left; width: 260px; height: 150px; position: relative; margin-left:20px; background:url(../img/main_box.png); background-repeat:no-repeat; background-position: left top; }

div.main_box_header{ display: block; width: 180px; position: relative; padding: 8px 0px 10px 10px; font-size: 18px; color: #555; letter-spacing: -1px;}
div.main_box_header a{color:#555;}
div.main_box_header a:hover { color: #dd0000; text-decoration: none; }
div.main_box_text{ display:block; float:left; width:120px; height:110px; position:relative; padding-left:10px;}
div.main_box_icon{display:block; float:left; width:110px; height:73px; position:realtive; margin-left:10px;}
div.main_box_link{ display:block; float:left; width:110px; height:auto; position:realtive; margin-left: 10px; margin-top:20px; text-align: right; font-size:9px; color:#660000;}


/* Contact Us */
div.main_contactus_icon{ display: block; float:left; width: 80px; height: 80px; position: realtive; margin: 20px 0px 0px 299px; }
div.main_contactus_info{ display: block; float:left; width: 180px; height: 60px; position: relative; margin-top:20px;}

div.main_contactus_info div.small_text{font-size:10px;}
div.main_contactus_info div.call_text {font-size:19px; color: #ee0000; padding: 0px 0px 5px 10px;}
div.main_contactus_info div.operational_text{font-size:19px; color: #cc0000; padding: 0px 0px 0px 10px;}

div.main_25years{display:block; float:left; width:80px; height:80px; position:realtive; margin: 20px 0px 0px 200px;}


/********** MAIN - OLLLLLD STYLE **********/
/*#homepage{height:550px;}*/

/* News Box */
/*div.news_box{ display: block; width: 820px; height: 260px; position: absolute; top: 19px; left: 19px; background:url(../img/news_box2.png); background-repeat: no-repeat; background-position: top left;}*/
/*div.news_box{ display: block; width: 820px; height: 220px; position: absolute; top: 19px; left: 19px; background:url(../img/news_box.png); background-repeat: no-repeat; background-position: top left;}

div.homepage_box{ display: block; width: 820px; height: 100px; position: absolute; top: 259px; left: 19px;}
div.homepage_box h1{font: normal 16px Verdana,Helvetica,Arial,sans-serif; color: #555; margin-bottom: 10px; border-bottom: 1px dotted #ccc;}

/* Three Main Boxes - Casemaking, Dangerous Goods, General Packing */
/*div.main_box_left{ display: block; width:260px; height:150px; position:absolute; top:299px; left: 19px; background:url(../img/main_box.png); background-repeat:no-repeat; background-position: left top; }
div.main_box_middle{ display: block; width: 260px; height: 150px; position: absolute; top: 299px; left:299px; background:url(../img/main_box.png); background-repeat:no-repeat; background-position: left top; }
div.main_box_right{ display: block; width: 260px; height: 150px; position: absolute; top: 299px; right:19px; background:url(../img/main_box.png); background-repeat:no-repeat; background-position: left top; }

div.main_box_header{ display: block; width: 180px; position: absolute; top:8px; left:10px; font-size: 18px; color: #555; letter-spacing: -1px;}
div.main_box_header a{color:#555;}
div.main_box_header a:hover { color: #dd0000; text-decoration: none; }
div.main_box_text{ display:block; width:120px; height:80px; position:absolute; top:40px; left:10px; background-color:; }
div.main_box_text2{ display:block; width:140px; height:80px; position:absolute; top:40px; left:10px; background-color:; }
div.main_box_link{ display:block; width:100px; height:14px; position:absolute; bottom:10px; right:10px; text-align: right; font-size:9px; color:#660000;}
div.main_box_icon{display:block; position:absolute; top:40px; right:10px;}

/* Contact Us */
/*div.main_contactus_icon{ display: block; width: 80px; height: 80px; position: absolute; top: 469px; left: 299px; }
div.main_contactus_info{ display: block; width: 220px; height: 60px; position: absolute; top: 469px; left:379px; }

div.main_contactus_info div.small_text{font-size:10px;}
div.main_contactus_info div.call_text {font-size:19px; color: #ee0000; padding: 0px 0px 5px 10px;}
div.main_contactus_info div.operational_text{font-size:19px; color: #cc0000; padding: 0px 0px 0px 10px;}

div.main_25years{display:block; width:80px; height:78px; position:absolute; top: 469px; right:19px;}*/

/********** ALL PAGES **********/
/* Seperators */

#left_content{position:absolute; z-index:0; left:0px; right:0px; width:220px; min-height:500px; } /* had to use absolute, originally had a float:left and a float left in righ content - but the JS wouldnt work in Firefox*/
#right_content{margin-left:220px; z-index:0; padding-bottom: 10px; :638px; height:auto; line-height: 16px; }

/***** LEFT CONTENT - Left Hand Navigation *****/
#left_nav_header{font: bold 11px Verdana,Helvetica,Arial,sans-serif; margin-bottom: 6px; color:#555;}
#left_nav_top {margin-left: 20px; margin-top: 20px; width: 180px; height: 9px; z-index: 1; background:url(../img/left_nav_top.png); background-repeat: no-repeat; background-position: top left;}
#left_nav_content{ margin-left:20px; padding-left: 10px; width: 168px; height:auto; line-height: 15px; font-size: 11px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background:url(../img/left_nav_background.png); background-repeat: repeat-x; background-position: bottom left;}
#left_nav_bottom { margin-left: 20px; margin-bottom: 20px; width:180px; height:9px; z-index: 1; background:url(../img/left_nav_bottom.png); background-repeat: no-repeat; background-position: top left;}



div.left_nav_links_title{font-weight: bold; padding: 3px 0px;}
div.left_nav_links{padding: 3px 0px 3px 16px;}


.selected a{color: #dd0000;}
.selected a:hover{color: #dd0000; text-decoration: underline;}


/*  about us = Twenty Five Year Wreath */
#left_content div.twenty_five_years{padding-top: 20px; padding-left: 70px;}

#left_red{margin: 20px 0px 20px 20px;}

/***** RIGHT CONTENT *****/
/* Icon & Title */
#page_icon{ position:absolute; top:10px; right:10px; }
#page_title{ margin-top:37px; margin-bottom: 37px; }

/* H1 & H2 */
#right_content h1{font: normal 32px Verdana,Helvetica,Arial,sans-serif; color:#444; letter-spacing: -1px; margin: 20px 0px 20px 0px;}
#right_content h2{font: normal 16px Verdana,Helvetica,Arial,sans-serif; color:#555; margin: 20px 0px 10px 0px;}
#right_content h2.first{font: normal 16px Verdana,Helvetica,Arial,sans-serif; color:#555; margin: 0px 0px 10px 0px;}
#right_content h2.forms{border-bottom-style: dotted; border-bottom-width: 1px; border-color: #ccc; padding: 5px 0px; margin-bottom: 10px;}
#right_content h3{font: normal 14px Verdana,Helvetica,Arial,sans-serif; color:#555; margin: 20px 0px 5px 0px;}
#right_content h3.forms{border-bottom-style: dotted; border-bottom-width: 1px; border-color: #ccc; padding: 5px 0px; margin-bottom: 10px;}
#right_content h4{font: normal 12px Verdana,Helvetica,Arial,sans-serif; color:#555; margin: 20px 0px 5px 0px;}
#right_content h4.careers{font-weight:bold; border-bottom-style: dotted; border-bottom-width: 1px; border-color: #ccc; padding: 5px 0px; margin-bottom: 10px;}

/* Column Container & Text Container */
#right_content div.columnContainer{width:608px; height:auto; margin-bottom:20px; padding:0px; float:left;}
#right_content div.column{width:304px;height:auto; float:left;}
#right_content div.column3{width:202px;height:auto; float:left;}
#right_content div.textContainer{width:608px; height:auto; margin: 0px 0px 10px 0px; padding: 0px;}

#right_content div.textContainer a{color:#666; text-decoration: underline;}
#right_content div.textContainer a:hover{color:#dd0000; text-decoration: none;}
#right_content div.textConatiner a:visited{color:#666; text-decoration: underline;}

#right_content div.textContainer div.red_links a{color: #cc0000; font-weight: inherit; text-decoration: none; }
#right_content div.textContainer div.red_links a:hover{color: #dd0000; font-weight: inherit; text-decoration: underline; }
#right_content div.textContainer div.red_links a:visited{color: #cc0000; font-weight: inherit; text-decoration: none; }

#right_content div.textContainer div.alert{font-weight: bold; color:#cc0000;}
.alert2{font-weight: normal; color:#cc0000;}

#right_content div.textContainer ul li a{text-decoration: none;}

#gallery{min-height: 520px;}
#gallery_large_size{min-height: 586px;}

.siteMap {list-style-type: none; font-weight: bold; font-size:12px; margin:0px;}

.siteMap li ul {margin:0px; font-weight: normal; padding:5px 0px 15px 15px; border-top: 1px dotted #ccc;}

.siteMap li ul li{list-style-type: none;  font-size:11px;}





/****** JOB APPLICATION FORM ******/

/* cols1 = textarea - only one column, spans whole page title on top, text below */
#right_content div.textContainer div.cols1_title{width: 608px; height: 20px; display: block; float: left;} 
#right_content div.textContainer div.cols1_data{width: 608px; height:60px; display: block; float: left;} 
/* cols2 = when only 2 columns are rquired, title on left, data on right */
#right_content div.textContainer div.cols2_title{width: 254px; height:30px; display: block; float: left;} 
#right_content div.textContainer div.cols2_data{width: 354px; height:30px; display: block; float: left;} 
/* cols_yesno for the yes / no radio buttons, so radio buttons are aligned to right */
#right_content div.textContainer div.cols2_yesno_title{width: 480px; height:30px; display: block; float: left;} 
#right_content div.textContainer div.cols2_yesno_data{width: 128px; height:30px; display: block; float: left;} 
/* cols2_textarea = textarea, has title to left, textarea to right */
#right_content div.textContainer div.cols2_textarea_title{width: 104px; height:45px; display: block; float: left;}
#right_content div.textContainer div.cols2_textarea_data{width: 504px; height:45px; display: block; float: left; back}
/* cols4 = four columns, 2 titles and 2 data areas */
#right_content div.textContainer div.cols4_title{width: 104px; height:30px;  display: block; float: left;}
#right_content div.textContainer div.cols4_data{width: 200px;  height:30px; display: block; float: left;}
/* cols4 = as above, but for when longer titles are required */
#right_content div.textContainer div.cols4_2lines_title{width: 104px; height:40px;  display: block; float: left;}
#right_content div.textContainer div.cols4_2lines_data{width: 200px;  height:40px; display: block; float: left;}
.col2_input_text{width:150px;}


/*** END OF job application form ***/



div.photo200_left{margin:20px 0px; float:left;}
div.photo200_center{margin:20px 20px; float:left;}
div.photo200_right{margin:20px 0px; float:left;}

#column_first{width:213px; height:149px; display:block; float:left;}
#column_last{width:193px;height:149px; display:block; float:left;}

/****** CONTACT US - Contact Details ******/
#right_content div.textContainer div.contact_image{width:45px; height:45px; margin-right:5px;display: block; float:left;}
#right_content div.textContainer div.contact_address{width:558x; height:33px; padding-top:12px; margin-bottom: 5px; display:block; float:left; font-weight: normal; font-size:12px;}
#right_content div.textContainer div.contact_text_phone{width:200px; padding: 12px 0px 12px 0px; display:block; float:left; font-weight: normal; font-size:12px; letter-spacing: -0.5px;}
#right_content div.textContainer div.contact_text_fax{width:308px; height:21px; margin-bottom: 20px; padding:12px 0px 12px 0px; display:block; float:left; font-weight: normal; font-size:12px; letter-spacing: -0.5px;}
/*div.contact_text_email{width:200px; padding: 6px 0px 6px 0px; display:block; float:left; font-weight: normal; font-size:14px; letter-spacing: -0.5px;}*/

/* 2 Columns - E.G. Phone & Mail */
#right_content div.textContainer div.contact_2col_image{width:45px; height:45px; margin: 30px 5px 0px 0px; display:block; float:left;} /* Margin top = 30 and bottom = 20px */
#right_content div.textContainer div.contact_2col_text{width:254px; vertical-align: middle; padding: 42px 0px 0px 0px; font-weight: normal;  font-size:14px; display:block; float:left; letter-spacing: -0.5px;} /* As above margins + 12 - to center text */
#right_content div.textContainer div.contact_2col_text a{color:#666; font-weight: inherit; text-decoration: none;}
#right_content div.textContainer div.contact_2col_text a:visited{color:#666; font-weight: inherit; text-decoration: none;}
#right_content div.textContainer div.contact_2col_text a:hover{color:#dd0000; font-weight: inherit; text-decoration: underline;}
#right_content div.textContainer div.contact_2col_text a:active{color:#666; font-weight: inherit; text-decoration: none;}
.ie8spacer{color:white; font-size: 1px; margin:0px; padding:0px;} /* IE8 was causing alignment issues - telephone / enquiry logos */




/* Casemaking & General Packing Quote */
#quote_title{width:180px; padding-bottom:5px; display:block; float: left;}
#quote_input{width:420px; padding-bottom:5px; display: block; float: left;}
#quote_5cols{width:84px; padding-bottom:5px; display:block; float:left; text-align: center;}

/*old color = eee*/
#quote_8cols_header_60{width:59px; float:left; font-weight: bold; background-color: #d4d4d4; padding:4px 0px 4px 0px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; text-align: center;}
#quote_8cols_header_150{width:149px; float:left; font-weight: bold; background-color: #d4d4d4; padding:4px 0px 4px 0px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; text-align: center;}
#quote_8cols_header_98{width:76px; float:left; font-weight: bold; background-color: #d4d4d4; padding:4px 0px 4px 0px; border-bottom: 1px solid #fff; text-align: center}

div.quote_8cols_60{width:59px; float:left; padding:2px 0px 2px 0px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; text-align: center;}
div.quote_8cols_150{width:144px; float:left; padding:2px 0px 2px 5px; border-bottom: 1px solid #fff;border-right: 1px solid #fff;}
div.quote_8cols_98{width:70px; float:left; padding:2px 0px 2px 5px; border-bottom: 1px solid #fff;}

div.quote_8cols_60.odd{background-color: #F1EFF8;}
div.quote_8cols_150.odd{background-color: #F1EFF8;}
div.quote_8cols_98.odd{background-color: #F1EFF8;}

div.quote_8cols_60.even{background-color: #E7E7E7;}
div.quote_8cols_150.even{background-color: #E7E7E7;}
div.quote_8cols_98.even{background-color: #E7E7E7;}

#quote_8cols{width:76px; float:left;}

div.quote_2cols1_header{width:280px; float:left; font-weight: bold; background-color: #d4d4d4; padding:4px 0px 4px 0px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; text-align: center;}
div.quote_2cols2_header{width:280px; float:left; font-weight: bold; background-color: #d4d4d4; padding:4px 0px 4px 0px; border-bottom: 1px solid #fff; text-align: center;}

div.quote_2cols1{width:270px; float:left; padding:4px 5px 4px 5px; border-bottom: 1px solid #fff; border-right: 1px solid #fff; text-align: left;}
div.quote_2cols2{width:270px; float:left; padding:4px 5px 4px 5px; border-bottom: 1px solid #fff; text-align: left;}

div.quote_2cols1.odd{background-color: #F1EFF8;}
div.quote_2cols2.odd{background-color: #F1EFF8;}

div.quote_2cols1.even{background-color: #E7E7E7;}
div.quote_2cols2.even{background-color: #E7E7E7;}





#quote_buttons{width:560px; text-align: center;padding-top: 10px;}
.verylong{width:400px;}
.long{width: 200px;} /* Following are used in the Quotation section...*/
.medium{width:150px;}
.short{width:100px;}
.textarea{width:400px; height:200px;}
.number{width:70px;}
.number_small{width:50px;}

/* General Classes */
.bold{font-weight: bold;}
.footnotes{font-size: 10px;}
.red{color:#cc0000;}
.font12{font-size: 12px;}
.button{width:126px; height:20px; border:0; background:url(../img/button.png); background-repeat: no-repeat; background-position: top left; font-family: Verdana,Helvetica,Arial,sans-serif; font-size:10px; font-weight:bold; color:#444;}
.underline{text-decoration: underline;}



/* Frequently Asked Questions */
.faq {font-size:11px; font-weight: bold; text-decoration: none; color:#444; padding-top: 20px; padding-bottom: 4px;}

/* Input, Select etc */
#right_content input,select,textarea{font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 11px; font-weight: normal; color: #444;}




/* Gallery Viewer - jQuery */
#gallery_viewer{ margin-left:10px; margin-right:20px; margin-bottom: 20px;}
#gallery_viewer h2{margin:5px 0px 5px 0px; font-weight:normal; font-size:18px; color:white;}

.panel-overlay h2,
.panel-overlay p{ font-family:Verdana,Helvetica,Arial,sans-serif; margin: .3em 0; }
.panel-overlay p { line-height: 1.2em; }

/***** FOOTER *****/
div.footer_navigation{ display:block; width:100%; height:20px; position:absolute; top:10px; text-align: center;}
div.copyright{ display:block; width:100%; height:15px; position:absolute; top:40px; text-align:center; font-size:9px; color:#999;}
div.copyright a{color:#999; text-decoration: none;}
div.copyright a:hover{color:#666; text-decoration: underline;}
div.copyright a:visited{color:#999; text-decoration: none;}