@charset "UTF-8";

/* CSS Document */

/* CSS Reset to start clean */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; font-family: Arial, Helvetica, sans-serif; }

body { text-align: center; background-color: #E0DEC1; /*background-image:url(../images/background.gif);*/
	background-position: center top; background-repeat: no-repeat; background-attachment:scroll; margin-top: 10px; }

/* General Link Appearance */	
a:link,
a:active,
a:visited { color:#a40046; text-decoration:none; }
a:hover { color:#a40046; border-bottom: 1px dotted #a40046; }

/* Format the wrapper div for the entire page */
#pageWrapper { display: inline-block; width: 719px; text-align: left; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: #ffffff; overflow: hidden; }
#headerWrapper { display: block; margin: 0px; padding: 0px; position: relative; height: 84px; }
#logoWrapper { display: inline-block; position: relative; float: left; clear: none; padding-top: 0px; padding-left:10px; }

/* Format of the main navigation wrapper */
#mainNavWrapper { display: block; float: right; }
#mainNavWrapper ul { display:block; list-style-type:none; margin-right:20px; margin-top:18px; padding:0; }
#mainNavWrapper ul li { display: block; float: left; clear: none; font-family: Arial, Helvetica, sans-serif; font-size: 80%; font-weight: bold; }
#mainNavWrapper ul li a { color: #FFFFFF; text-decoration: none; background-color: #7d6a55; padding: 11px 8px; border-style: none; display: block; }
#mainNavWrapper ul li a:hover { background-color: #a40046; border-style: none; }

/* Creating selectable navigation here */
#home #linkHome a,
#bags #linkBags a,
#boxes #linkBoxes a,
#bottles #linkBottles a,
#buckets #linkBuckets a,
#printing #linkPrinting a,
#contact #linkContact a { background-color: #E0DEC1; border-style: none; color:#a40046; }

/* Formatting the callout wrapper, with the buttons-icon links */
#calloutWrapper { background:#a40046 none repeat scroll 0 0; clear:right; display:block; float:right; margin:0; padding-top:5px; width:262px; }
#calloutWrapper h3 { font: normal 14px Georgia, "Times New Roman", Times, serif; color: #FFFFFF; padding-bottom:5px; padding-left:10px; padding-top:5px; border-bottom: 1px dotted #9EB8B1; margin: 0px; }
#calloutWrapper #calloutNav { list-style: none; display: block; text-align: left; padding: 0px; margin: 0px;
/*border-top: 1px dotted #9EB8B1;*/
}

#calloutWrapper #calloutNav li { display: inline; padding:0px; }
#calloutWrapper #calloutNav li a img { padding-right: 5px; padding-left: 10px; display: block; float: left; }
#calloutWrapper #calloutNav li a { display: block; width: 50%; float: left; clear: none; padding-top: 7px; padding-bottom: 7px; color: #FFFFFF; font: 10px Arial, Helvetica, sans-serif; border-bottom: 1px dotted #9EB8B1; background: #7d6a55; }
#calloutWrapper #calloutNav li a:hover { background: #E0DEC1;color:#a40046; }

/* Formatting the samples wrapper*/
#samplesWrapper { display: block; /*height: 157px;*/
	width: 262px; float: right; padding-top:5px; background: #ffffff; margin-bottom: 25px; }
#samplesWrapper h3 { font: normal 21px Georgia, "Times New Roman", Times, serif; color: #7d6a55; padding-bottom:5px; padding-left:10px; padding-top:5px; }
#samplesWrapper #samplesNav { list-style: none; display: block; text-align: left; padding: 0px; margin: 0px; }
#samplesWrapper #samplesNav li { display: block; padding: 3px 0px; float: left; width: 50%; }
#samplesWrapper #samplesNav li a { display: block; width: 123px; float: left; clear: none; color: #FFFFFF; font: 10px Arial, Helvetica, sans-serif; background: #ffffff; border: 1px solid #CCCCCC; }
#samplesWrapper #samplesNav li a:hover { border: 1px solid #4F9B50; }
#samplesWrapper #samplesNav li a img { border-top: none; border-right: none; border-bottom: none; border-left: none; }

/* Format the contact us box and it's content */
.contactUsBox { display: block; position: relative; float:left; clear:both; color: #333333; font-weight: bold; margin-top: 10px; padding-top: 5px; padding-bottom: 7px; border-top: 1px dotted #9EB8B1; }
.contactUsBox img { padding-right: 12px; display: block; float: left; }

/* One-off stylings for the homepage banner wrapper */
#homeBannerWrapper { display: block; float: left; background-color:#FFFFFF; background-image: url(../../devon-packaging/images/Banner-Background.gif); background-repeat: repeat-x; background-position: 0px 0px; height: 247px; width: 670px; padding-left:29px; padding-top:15px; padding-right: 20px; }
#homeBannerWrapper h1 a:link, #homeBannerWrapper h1 a:visited, #homeBannerWrapper h1 a:active {color:#ffffff; font-family: Georgia, "Times New Roman", Times, serif;border-bottom:1px dotted white;}
#homeBannerWrapper h1 a:hover { border-bottom: solid 1px #ffffff;font-style:italic;}
.HomeRightCol { margin-top: -90px; margin-bottom:30px; z-index: 1; position: relative; clear:none; display:block; float:right; /*overflow:hidden;*/ }

/* Formatting the main wrappers for the content area, and the various columns */
#BannerWrapper { display: block; float: left; height: 95px; width: 670px; background: #FFFFFF url(../../devon-packaging/images/Banner-Background.gif) repeat-x 0px -150px; padding: 5px 20px 12px 29px; }
.bannerImage { clear:none; display:inline; float:right; margin:-129px -20px 0 -100px; position:relative; z-index:15; }
.bannerImage img { /*display:block;float:right;padding:0;*/}
#contentWrapper { display: block; float: left; clear: none; width:100%; font: 13px/20px Arial, Helvetica, sans-serif; background-color:#FFFFFF; }
#contentWrapper #LeftCol { display:block; float:left; padding-left:28px; width:381px; padding-bottom: 5px; }
#contentWrapper #RightCol { clear:none; 
/*float:right;*/
/*overflow:hidden;*/
padding-right: 20px; padding-left: 20px; }

/* Format the footer area */
#footerWrapper { display: block; float: left; clear: both; width: 691px; background-color: #373737; font-size:10px; color:#FFFFFF; padding: 5px 0px 5px 28px; z-index: 99; position: relative; }
#contentWrapper ul { padding-left: 5px; color: #525252; }
#contentWrapper ol { padding-left: 22px; color: #525252; list-style: decimal; }
#contentWrapper ul li { list-style: none; margin: 0px; padding: 0px 0px 0px 16px; background: url(../../devon-packaging/images/bullet.gif) no-repeat 0px 0.4em; display: list-item; }

/* elements */
h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 26px; font-weight: normal; line-height: 41px; color:#ffffff; }
h2 { color:#FFFFFF; font: normal 17px Georgia, "Times New Roman", Times, serif; }
h4 { font-size: 14px; color: #000000; margin-top: 24px; }
p { color: #525252; margin-top: 10px; margin-bottom: 10px; padding-right: 45px; }
dd { padding-bottom: 5px; }
fieldset { }

/* classes */
.white { color:#FFFFFF; font-family: Georgia, "Times New Roman", Times, serif; }

/* form elements */
.input,
.select { border: 1px solid #333333; width: 175px; height: 20px; background: #EEEEEE; }
.inputEmail { border: 1px solid #333333; width: 225px; height: 20px; background: #EEEEEE; }
.inputPhone { border: 1px solid #333333; width: 125px; height: 20px; background: #EEEEEE; }
.formSubhead { font-size: 16px; color: #333333; }

/* Spry Validation CSS | SELECT */
/* SpryValidationSelect.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* These are the classes applied on the messages
 * (required message and invalid state message)
 * which prevent them from being displayed by default.
 */ 
.selectRequiredMsg,
.selectInvalidMsg { display: none; }

/* These selectors change the way messages look when the widget is in one of the error states (required, invalid).
 * These classes set a default red border and color for the error text.
 * The state class (.selectRequiredState or .selectInvalidState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg { display: inline; color: #CC0000; border: 1px none #FFCC00; padding: 3px; background: #FFFFCC; margin-top: 3px; font: bold 10px Arial, Helvetica, sans-serif; }

/* The next three group selectors control the way the core element (SELECT) looks like when the widget is in one of the states: 
 * focus, required / invalid, valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the SELECT
 * - the widget id is placed on the SELECT element itself (there are no error messages)
 */
 
/* When the widget is in the valid state the SELECT has a green background applied on it. */
.selectValidState select,
select.selectValidState { background-color: #B8F5B1; }

/* When the widget is in an invalid state the SELECT has a red background applied on it. */
select.selectRequiredState,
.selectRequiredState select,
select.selectInvalidState,
.selectInvalidState select { background-color: #FF9F9F; }

/* When the widget has received focus, the SELECT has a yellow background applied on it. */
.selectFocusState select,
select.selectFocusState { background-color: #FFFFCC; }

/* Spry Validation CSS | Text Field */
/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg,
.textfieldInvalidFormatMsg,
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg { display: none; }

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg,
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg { display: inline; color: #CC0000; border: 1px none #FFCC00; padding: 3px; background: #FFFFCC; margin-top: 3px; font: bold 10px Arial, Helvetica, sans-serif; }

/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input,
input.textfieldValidState { background-color: #B8F5B1; }

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState,
.textfieldRequiredState input,
input.textfieldInvalidFormatState,
.textfieldInvalidFormatState input,
input.textfieldMinValueState,
.textfieldMinValueState input,
input.textfieldMaxValueState,
.textfieldMaxValueState input,
input.textfieldMinCharsState,
.textfieldMinCharsState input,
input.textfieldMaxCharsState,
.textfieldMaxCharsState input { border: 1px solid #CC0000; }

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input,
input.textfieldFocusState { background-color: #FFFFCC; }

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input,
input.textfieldFlashText { color: red !important; }

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input,
input.textfieldHintState { /*color: red !important;*/
	color:#999999; }

/* Lightbox CSS */
#lightbox { position: absolute; top: 40px; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox a img { border: none; }
#outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer { padding: 10px; }
#loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav { left: 0; }
#hoverNav a { outline: none; border-style: none; }
#prevLink,
#nextLink { width: 49%; height: 100%; background: transparent url(../../devon-packaging/images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; border-style: none; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover,
#prevLink:visited:hover { background: url(../../devon-packaging/images/prevlabel.gif) left 15% no-repeat; border-style: none; }
#nextLink:hover,
#nextLink:visited:hover { background: url(../../devon-packaging/images/nextlabel.gif) right 15% no-repeat; border-style: none; }
#imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; }
#imageData { padding:0 10px; }
#imageData #imageDetails { width: 70%; float: left; text-align: left; }
#imageData #caption { font-weight: bold; }
#imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; }
#overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000;/*filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;*/
	}

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html>body .clearfix { display: inline-block; width: 100%; }
* html .clearfix { /* Hides from IE-mac \*/
	height: 1%;/* End hide from IE-mac */
	}
	
.intl-site-link {width:304px;margin-top:20px;}	
.intl-site-link img {display:block;float:left;width:130px;margin-right:20px;}	

#RightCol .intl-site-link {width:250px;padding:20px 0px;float:right;clear:right;}