/*********************** Reset Styles *********************/

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,
b, u, i, center, 
dl, dt, dd, 
fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}
body { line-height: 1; }
blockquote, q { quotes: none; }
:focus { outline: 0 }

.left { float:left }
.right { float:right }
.center { text-align: center }
.clear { clear:both }

hr { 
	height: 1px;
	border-width: 0;
	color: black;
	background-color: black;
	}

ol, ul, li { margin:0; padding:0; }
ul, li { list-style: none; }

/*********************** Default Styles *********************/

body {
	background: url(/images/bg.gif) repeat;
	font: normal 13px/17px Tahoma, Arial, Verdana, sans-serif;
	color: #000000;
	}
a {
	font: normal 13px/17px Tahoma, Arial, Verdana, sans-serif;
	color: #ec6c05;
	text-decoration: underline;
	}
a:hover { text-decoration: none; }
p { padding: 7px 0 }

h1 {
	font: bold 24px/28px Tahoma, Arial, Verdana, sans-serif;
	color: #000000;
	}
h2 {
	padding-top: 16px;
	font: bold 20px/24px Tahoma, Arial, Verdana, sans-serif;
	color: #000000;
	}
h3, h3 a  {
	padding-top: 16px;
	font: bold 18px/24px Tahoma, Arial, Verdana, sans-serif;
	color: #000000;
	}
h3.small, h3.small a  {
	padding: 0;
	font-size: 12px;
	text-decoration: none;
	color: #ec6c05;
	}
h3.small a:hover { color: #3789d9; text-decoration: underline; }
h4 {
	padding: 8px 20px 4px;
	font: normal 16px/20px Tahoma, Arial, Verdana, sans-serif;
	color: #000000;
	background: url(/images/pen-classes-border.gif) repeat-x left bottom;
	}
		
h4 a {
	font: normal 16px/20px Tahoma, Arial, Verdana, sans-serif;
	color: #000000;
	text-decoration: none;
	}
h4 a:hover {
	text-decoration: underline;
}
h5 {
	padding: 0 0 8px;
	font: bold 15px/24px Tahoma, Arial, Verdana, sans-serif;
	color: #333333;
	text-transform: uppercase;
	}

/*********************** Page Styles *********************/

#wrap {
	width: 982px;
	margin: 2px auto;
	}
	
#header {
	width: 982px;
	height: 175px;
	background: url(/images/header-bg.jpg) no-repeat;
	
	}
.headerTop {
	padding: 0; 
	font: bold 26px/35px Helvetica, Arial, sans-serif; 
	color: #ffffff; 
	text-indent: 46px;
	}
.headerBottom { 
	padding: 0;
	font: bold 20px/34px Arial, Helvetica, sans-serif; 
	color: #010101; 
	text-indent: 177px;
	}
.headerBottom a { 
	font: bold 20px/34px Arial, Helvetica, sans-serif; 
	color: #fefefe; 
	text-decoration: none; 
	}
.headerBottom a:hover { text-decoration: underline; }
.logo { padding-left: 6px; }

#content {
	background-color: #ffffff;
	border-top: 1px solid #3789d9;
	border-right: 1px solid #777676;
	border-left: 1px solid #777676;
	}
#mainSubcontent {
	margin-left: 190px;
}
.sidebar {
	float: left;
	width: 190px;
}
.penClasses { padding: 11px 5px; }
.penClasses li {
	padding: 0 20px 2px 27px;
	font: bold 11px/20px Verdana, Arial, sans-serif;
	color: #333333;
	background: url(/images/pen-classes-border.gif) repeat-x left bottom;
	}
.penClasses li.noBkg { background: none; }
.penClasses li a {
	display: block;
	font: bold 11px/20px Verdana, Arial, sans-serif;
	color: #333333;
	text-decoration: none;
	}
.penClasses li a:hover { text-decoration: underline; }
.listOfPens {
	position: relative;
	width: 190px;
	height: 86px;
	/*background: url(/images/list-of-pens-bg.gif) no-repeat;*/
	}
	

		
#pensList {
	position: absolute;
	top: 74px;
	left: 18px;
	width: 154px;
	max-height: 400px;
	overflow: auto;
}
#pensList li {
	width: 138px;
	display: none;
	background-color: white;
}
#firstOne a, #pensList li a {
	color: #333;
	font-size: 10px;
	text-decoration: none;
	padding: 0 9px 1px 9px;
}
#firstOne {
	position: absolute;
	top: 54px;
	left: 18px;
	display: block;
	background: url(../images/bg-top-pen1.gif) no-repeat left top;
	width: 190px;
}
#pensList li a {
	display: block;
	border: 1px solid #a5acb2;
	border-top: none;
}
#pensList li a:hover {
	background-color: #a5acb2;
	color: white;
}
#pensList li#firstOne a {
	padding: 1px 10px 2px 10px;
	border: none;
}
	
#menu {
	float: left;
	width: 790px;
	margin:0;
	padding:0;
}
.menu {
	padding-left: 15px;
	height: 33px;
	background: url(/images/menu-bg.gif) no-repeat left top;
	}
.menu li { float: left; }
.menu li a {
	float: left;
	display: block;
	padding: 0 9px;
	font: bold 12px/33px Verdana, Arial, sans-serif;
	color: #000000;
	text-decoration: none;
	}
.menu li a:hover { text-decoration: underline; }
.content { 
	margin: 20px 10px 15px; 
	padding: 33px 0 0;
}
.futherInfoBG {
	float: right;
	margin: 10px 0 0 20px;
	width: 467px;
	height: 155px;
	background: url(/images/further-info-bg.jpg) no-repeat;
	}
#furtherInfo {
	margin: 8px 0 0 160px;
	font-size: 0.8em;
	width: 300px;
	text-align: left;
	border: 1px solid #bbb;
	padding: 1px 1px 2px 1px
}
#furtherInfo table td { padding: 0 0 1px; }
#furtherInfo strong { color: #ef7600; }
#furtherInfo input, #furtherInfo select, #furtherInfo textarea { font: normal 1em/12px Arial, Helvetica, sans-serif; color: #707070; }
.futherInput { height: 13px; }
.futherSelect { height: 19px; }
.futherSubmit { height: 19px; }
#furtherInfo h3 { font: bold 11px/12px Tahoma, Arial, Helvetica, sans-serif; color: #3D64C5; padding:0; }
.orange { font: bold 24px/26px Tahoma, Arial, Verdana, sans-serif; color: #ec6c05; }
.promoBox {
	border: 1px solid #ec6c05;
	border-top-width: 5px;
}
.promoBox td { padding: 7px 14px 12px; }
.promoDetails {
	padding-left: 27px;
	/*background-color: #3d98f1;*/
	font: normal 12px/16px Tahoma, Arial, Verdana, sans-serif;
	color: #000000;
}
.promoDetails a {
	margin-left: 210px;
	font: bold 12px/16px Tahoma, Arial, Verdana, sans-serif;
	color: #3d98f1;
	text-decoration: none;
}
.promoDetails a:hover { text-decoration: underline; }

.quickLinks { 
	font: normal 11px/17px Tahoma, Arial, Verdana, sans-serif;
	color: #999;
	text-align: center; 
}
.quickLinks a {
	font: bold 13px/17px Tahoma, Arial, Verdana, sans-serif;
	color: #ec6c05;
	text-decoration: none;
}
.quickLinks a:hover {
	text-decoration: underline;
}
.product {
	position: relative;
	/*margin: 20px 0 30px 200px;*/
	margin: 10px 0 15px 200px;
	padding: 3px 14px 6px;
	/*padding: 7px 14px 12px;*/
	width: 600px;
}
.singleDetails {
	font: bold 13px/17px Tahoma, Arial, Verdana, sans-serif;
	color: #333;
	text-align: center;
}
.price {
	padding: 10px 0;
}

#paging, .browseBy {
	margin-left: 200px;
	width: 600px;
	padding: 4px 5px 8px;
	text-align: center;
}
.browseBy {
	margin-top: 20px;
	color: #ec6c05;
	font-size: 14px;
	font-weight: bold;
}
#paging a {
	padding: 0px 5px;
	margin: 0 2px;
	font: bold 14px/14px Tahoma, Arial, Verdana, sans-serif;
}

.faqQ, .bList {
	font: bold 12px/18px Tahoma, Arial, Verdana, sans-serif;
	color: #3789d9;
}
.faqQ span { padding-right: 20px; }
.faqQ a {
	font: bold 12px/18px Tahoma, Arial, Verdana, sans-serif;
	color: #ec6c05;
	text-decoration: none;
}
.faqQ a:hover {
	text-decoration: underline;
}
.backLink {
	display: block;
	float: right;
	font-size: 11px;
	margin: 5px 20px;
	color: #3789d9;
}

.orangeBox { /* width and height of this box must be specified where it is used */
	border: 1px solid #d53a0a;
	background: #f5bd58 url(/images/ob-bg.gif) repeat-x left top;
}
.greyBox { /* width and height of this box must be specified where it is used */
	border: 1px solid #858585;
	background: #c7c7c7 url(/images/gb-bg.gif) repeat-x left top;
}
.pensBg {
	background: url(/images/pens-bg.jpg) no-repeat 400px bottom;
}

.penColumn {
	width: 225px;
	height: 133px;
	padding: 5px 10px;
	background: url(/images/pc-bg.jpg) no-repeat left top;
	font: normal 11px/16px Arial, Verdana, sans-serif;
	color: #000000;
}

#footer {
	height: 20px;
	background-color: #ec6c05;
	border: 1px solid #777676;
	border-top: none;
	font: normal 11px/20px Tahoma, Arial, Verdana, sans-serif;
	color: #ffffff;
	text-align: center;
	}
#footer a { font: normal 11px/20px Tahoma, Arial, Verdana, sans-serif; color: #ffffff; }

/*********************** Tab Table *********************/

.tabTable {
	width: 384px;
	
}
.tabTable table tr td {
	text-align: center;
	color: white;
}
.tabTable table th {
	height: 38px;
	font-weight: normal;
	color: white;
}
.tabs {
	
}
.tabs a {
	display: block;
	float: left;
	width: 128px;
	height: 31px;
	background-position: 0 -31px;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
#tabPG {
	background-image: url(../images/tb-pricing-grid.gif);
}
#tabFQ {
	background-image: url(../images/tb-fast-quote.gif);
}
#tabON {
	background-image: url(../images/tb-order-now.gif);
}
.tabs a.activeTab {
	background-position: 0 0;
}

#ttcPG {
	display: block;
	background-color: #398bdd;
	font: normal 13px/17px Tahoma, Geneva, sans-serif;
}
.pgl01, .pgl02, .pgl03, .pgl04 {
	width: 80px;
	height: 38px;
	background-repeat: no-repeat;
	background-position: center top; }
.pgl01 { background-image: url(/images/pgl01.gif); }
.pgl02 { background-image: url(/images/pgl02.gif); }
.pgl03 { background-image: url(/images/pgl03.gif); }
.pgl04 { background-image: url(/images/pgl04.gif); }
#ttcPG a {
	font-weight: bold;
	color: white;
}
#ttcPG table tr th {
	/*text-shadow: 1px 1px 0px #2f72b6;*/
}
#ttcPG table tr td {
	height: 21px;
	/*text-shadow: 1px 1px 0px #f28026;*/
}
#ttcPG table tr.light td {
	background-color: #f7a462;
}
#ttcPG table tr.dark td {
	background-color: #f28d3b;
}
#ttcFQ {
	display: none;
	padding: 5px;
	background: #f08127 url(../images/fqbg.gif) no-repeat left bottom;
	/*text-shadow: 1px 1px 0px #965b27;*/
}
#ttcFQ.wcc { background-image: url(../images/fqbgwcc.gif); }
#ttcFQ p {
	padding: 5px;
	color: white;
}
#ttcFQ p.warn {
	padding: 0 5px 15px;
	font-weight: bold; 
}
#ttcFQ fieldset,
#ttcFQ .quoteInformation {
	padding: 2px;
	margin-bottom: 10px;
	border: 1px solid white;
}
#ttcFQ fieldset legend,
#ttcFQ .quoteInformation .leg{
	color: white;
	font-size: 14px;
	margin: 0 0 2px 10px;
	padding: 2px;
}
#ttcFQ .quoteInformation {
	margin-top: 10px;
	position: relative;
	padding: 10px;
}
#ttcFQ .quoteInformation .leg{
	position: absolute;
	top: -12px;
	left: 0;
	background-color: #f08127;
}
#ttcFQ .quoteInformation table tr td {
	text-align: left;
	padding: 2px 0;
}
#ttcON {
	position: relative;
	display: none;
	height: 671px;
	background: #60c325 url(../images/onbg.gif) no-repeat left top;
	font: normal 13px/17px Tahoma, Geneva, sans-serif;
	color: white;
	/*text-shadow: 1px 1px 0px #429d0b;*/
}
#ttcON a.linkFaq {
	position: absolute;
	top: 57px;
	left: 116px;
	display: block;
	width: 166px;
	height: 19px;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
}
#ttcON input,
#ttcON select,
#ttcON textarea {
	position: absolute;
	left: 198px;
}
#ttcON h3 {
	padding: 5px 0 0;
	font: bold 15px/19px Tahoma, Geneva, sans-serif;
	color: #f2ff83;
	/*text-shadow: 1px 1px 0px #429d0b;*/
}
#ttcON p {
	padding: 4px 0;
}
#ttcON a {
	color: #f6ff00;
}
#ttcON table tr td {
	text-align: left;
	padding: 3px 2px;
	border-bottom: 1px solid #76db3a;
	font-size: 12px;
}
#ttcON input,
#ttcON select,
#ttcON textarea {
	border: 1px solid #429d0b;
	width: 174px;
}
#ttcON textarea {
	height: 45px;
}
#ttcON input.btnSubm {
	left: 304px;
	top: 624px;
	border: none;
	width: 70px;
	height: 24px;
	background: transparent url(../images/btn-submit-yellow.png) no-repeat 0px 0px;
}


.pd {
	width: 385px;
	margin: 0 0 14px;
	background: transparent url(/images/gbgm.gif) repeat-y left top;
}
.pdTop {
	background: transparent url(/images/gbgt.gif) no-repeat left top;
}
.pdBottom {
	padding: 10px;
	background: transparent url(/images/gbgb.gif) no-repeat left bottom;
	min-height: 50px;
}
.pd p {
	padding: 0;
	font: normal 14px/16px Arial, Verdana, sans-serif;
	color: #1d1d1d;
}


/* Email this page */
.emThPg {
	margin: 14px 2px;
	width: 154px;
	height: 150px;
	padding: 0 18px 10px;
	background: url(/images/etp-bg.gif) no-repeat left bottom;
	font: normal 13px/17px Arial, Verdana, sans-serif;
	color: #1d1d1d;
}
.emThPg h3 {
	padding: 0 0px 10px;
	font: normal 18px/22px Arial, Verdana, sans-serif;
	color: #1d1d1d;
}
.emThPg input {
	margin: 4px 0;
}
.emThPg input.formLongEdit {
	width: 100%;
}

.ProductImageMaxWidth {
	max-width: 340px;
}

.captionBarrel,
.captionClip,
.captionRefill,
.captionBox,
.captionMinOrder,
.captionAverage {
	display: block;
	width: 113px;
	height: 24px;
	background: transparent url(../images/text-captions.gif) no-repeat 0 0;
}
.captionBarrel { background-position: 0 0; }
.captionClip { background-position: 0 -24px; }
.captionRefill { background-position: 0 -48px; }
.captionBox { background-position: 0 -72px; }
.captionMinOrder { background-position: 0 -96px; }
.captionAverag { background-position: 0 -120px; }

/*********************** Buttons *********************/

.btnQuote,
.btnRecalculate,
.btnReset,
.btnSubmit,
.btnMoreInfo {
	display: block;
	height: 32px;
	font-size: 0px;
	line-height: 0px;
	border: none;
	cursor: pointer;
}

.btnQuote { width:92px; background: url(/images/btn-quote.png) no-repeat 0px 0px; }
.btnRecalculate { width:132px; background: url(/images/btn-recalculate.png) no-repeat 0px 0px; }
.btnReset { width:92px; background: url(/images/btn-reset.png) no-repeat 0px 0px; }
.btnSubmit { width:102px; background: url(/images/btn-submit.png) no-repeat 0px 0px; }
.btnMoreInfo { width:162px; background: url(/images/btn-more-information.png) no-repeat 0px 0px; margin: 0 auto; }

.btnQuote:hover,
.btnRecalculate:hover,
.btnReset:hover,
.btnSubmit:hover,
.btnMoreInfo:hover { 
	background-position: 0px -32px; 
}

/*********************** Form Data *********************/

.formEdit, .formHalfEdit, .formSmallEdit, .formLongEdit, .formTextarea, .formBigTextarea, .formSmallTextarea {
	border: 1px solid #a5acb2;
	}
.formEdit { width: 190px; }
.formHalfEdit { width: 100px; }
.formSmallEdit { width: 60px; }
.formLongEdit { width: 155px; }
.formTextarea { height: 100px; width: 400px; }
.formBigTextarea { height: 150px; width: 80%; }
.formSmallTextarea { height: 80px; width: 190px; }

.formButton, .formSmallButton, .formLongButton {
	border: 1px solid #0fb6f7;
	background-color:#0fb6f7;
	font-weight: bold;
	color: #FFFFFF;
	}
.formButton { height: 23px; width: 100px; }
.formSmallButton { height: 20px; width: 80px; }
.formLongButton { height: 30px; width: 120px; }

/*********************** Table Data *********************/

.tableBorder { border: 1px solid #2462AB; }
.tableBorderHeader {
	height: 27px;
	background-color: #DCDBBD;
	padding-left: 5px;
	}
.tableHeader {
	height: 22px;
	background-color: #F1F1D8;
	padding-left: 5px;
	}
.tableDataDark {
	background-color: #ECECEC;
	padding-left: 5px;
	height: 24px;
	}
.tableDataLight {
	background-color: #FFFFFF;
	padding-left: 5px;
	height: 24px;
	}

/*********************** Designed by MetaVisia *********************/
.optionProduct 
{ 
	font: 10px/12px Verdana,Arial,sans-serif; 
	width:200px; 
	border-top:1px solid silver;						
}

.selectProduct					
{
	font: 10px/12px Verdana,Arial,sans-serif; 
	width:155px; 
	border-top:1px solid silver;						
}

h3.quickFind {
	padding-left:5px;
	color:#3D64C5;
	font:bold 13px/15px Tahoma,Arial,Verdana,sans-serif;
}

.BackgroundNone{
	background:none;
}


