/* Html Tags*/
body {
background-color: #a1a3a6;
font-size: 100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif
}
@font-face {
font-family: 'FuturaBold'; src: local('FuturaBold'), url('fonts/FutuBd.ttf') format('truetype');
font-family: 'Future'; src: local('Future'), url('fonts/FUTR1.ttf') format('truetype');
/*font-family: 'Agency'; src: local('Agency'), url('fonts/AGENCYR_0.TTF') format('truetype');
font-family: 'Bell'; src: local('Bell'), url('fonts/BellGothicStd-Black.otf');*/
}
/* Html Tags*/
input.entry { border: 1px solid #666699; text-align: left; width: 98%; padding: 2px; font-size: 120%; color: #060; }
.entry:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
select.entry { border: 1px solid #666699; text-align: left; padding: 2px; font-size: 120%;}
.entryTitle { font-size: 130%; }
textarea.entry {border: 1px solid #666699; font-size: 120%; width: 98%; font-family: 'Century Gothic', Arial, Helvetica, sans-serif; color: #060; font-weight: normal }
th { text-align:left !important;}
input[type=submit] { font-size: 120%; background-color: #699; color: #fff}
.contactForm input.entry, #contact input.entry, .catalogReq input.entry { border: 1px solid #666699; text-align: left; width: 98%; padding: 2px; font-size: 150%; color: #060; margin-bottom: 5px;}
.contactForm input.entry, #contact textarea.entry, .catalogReq textarea.entry {border: 1px solid #666699; font-size: 150%; width: 98%; font-family: 'Century Gothic', Arial, Helvetica, sans-serif; color: #060; font-weight: normal }
a:link { text-decoration:none; font-weight: none; color: #555; font-family: Arial, Helvetica, sans-serif background: none}
a:visited { text-decoration:none ; font-weight: none; color: #555; font-family: Arial, Helvetica, sans-serif background: none}
a:active { text-decoration:none; font-weight: none; color: #555; font-family: Arial, Helvetica, sans-serif background: none}
a:hover {font-weight: none; color: #000000; font-family: Arial, Helvetica, sans-serif text-decoration: underline }
fieldset {background-color: #efefef}
li {list-style-type: square; display: block; padding: 0px 0px 5px 0px; margin: 5px; }
h1 {font-size: 140%; margin: 0; margin-top: 5px; margin-bottom: 10px; color: #004e38; }
h2 {font-size: 130%; margin: 0; margin-top: 5px; margin-bottom: 10px; color: #000000; text-shadow: 1px 1px 0 #FFF;}
h3 {font-size: 120%; margin: 0; margin-top: 5px; margin-bottom: 10px; color: #004e38; text-shadow: 1px 1px 0 #FFF;}
h4 {font-size: 100%; margin: 0; margin-top: 5px; margin-bottom: 10px; color: #004e38; text-shadow: 1px 1px 0 #FFF;}
.clear { clear: both}
div.outer
{
position: absolute;
left:50%;
top:40%;
border:1px solid #000000; background:#ffffff; background-color:#ffffff; width:500px; z-index: 90;visibility: hidden;display: none;
margin-left: -250px; /* half of width */
margin-top: -250px; /* half of height */
}
/* Template */
.body { margin: 0 auto; background-color: #FFF;}
.header { background-color: #083e68; height: 144px; }
.headerText { height: 104px; text-align: right; width: 100%;}
.logo { /*width: 235px; height: 179px; */width: 203px; height: 155px; background-image: url(../images/kcliffs-logo.png); position: absolute; background-size: contain; background-repeat:no-repeat; text-indent: -200px; overflow: hidden; cursor: pointer;}
.navContainer { width: 507px; padding-left: 235px; height: 40px; float: left;}
.searchContainer { width: 278px; background-color: #e6e6e6; height: 40px; float: left; }
.searchBox {width: 234px; height: 34px; font-size: 18px; background-image: url(../images/icon_search.gif); background-repeat: no-repeat; padding-left: 40px; background-color: #e6e6e6;}
.main { }
.mainNotIndex { padding: 36px 5px 10px 5px; background-color: #fff; }
.footer {}
.footNotes { text-align: center; }
/* Mobile*/
.fr { float: right}
.fl { float: left}
.rightPanel {
background-color: #036 !important;
}
.menu { font-size: 100%; color: #fff; margin-top: 20px; margin-right: 10px }
.menu a { text-decoration:none; font-weight: none; color: #fff; font-family: Arial, Helvetica, sans-serif background: none}
.menu a:visited { color: #000; }
.menu a:hover { color: #F00; }
.kcliffStore { margin-top: 20px; margin-right: 10px; color: #fff}
.kcliffLink a { color: #fff; cursor: pointer; }
.kcliffLink a:link { color: #fff; }
.kcliffLink a:hover { color: #ccc; }
/* Navigation */
.navCont { width: 100%; padding: 20px 0;}
.navCont ul {
margin: 0; padding: 0;
list-style-type: none;
}
.navCont li {
margin: 5px 0;
width: 100%;
}
.navCont li a {
/*padding: 10px; */
font-size: 80%;
font-weight: bold;
}
.navCont li.nav_off a:link { text-decoration:none; font-weight: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; background: none; }
.navCont li.nav_off a:visited { text-decoration:none ; font-weight: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; background: none}
.navCont li.nav_off a:active { text-decoration:none; font-weight: none; color: #ffffff; font-family: Arial, Helvetica, sans-serif; background: none}
.navCont li.nav_off a:hover {font-weight: none; color: #eeeff3; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
.navCont li.nav_on a:link { font-weight: none; color: #FF0; font-family: Arial, Helvetica, sans-serif; text-decoration: none; background-color: #e2b437}
.navCont li.nav_on a:visited {font-weight: none; color: #FF0; font-family: Arial, Helvetica, sans-serif; text-decoration: none; background-color: #e2b437}
.navCont li.nav_on a:active { font-weight: none; color: #FF0; font-family: Arial, Helvetica, sans-serif; text-decoration: none; background-color: #e2b437}
.navCont li.nav_on a:hover { font-weight: none; color: #000; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
/* Index*/
.bannerContainer { height: 415px; background-image: url(../images/mainbg.jpg); background-repeat: no-repeat;}
.boxContainer { height: 65px; padding-top: 70px;}
.qtrBox { display: inline-block; width: 24%; text-align:center;}
.qtrBox p { font-family: 'FuturaBold', Arial,Tahoma, Geneva, sans-serif; font-size: 20px; font-style: italic; color: #052145; font-weight: bold;}
.qtrBox i { }
.prodContainer { position: relative; top: -230px;}
.catTitle a { text-align: center; font-weight: bold;}
.homeprod { float: left; text-align: center; padding-right: 20px; height: 200px;}
.homeprod img { max-height: 150px}
.prodNav { padding: 26px 16px 26px 26px; width: 300px; float: left;}
ul.catNav { padding: 0; margin: 0; list-style-type: none;}
ul.catNav li { width: 300px; padding: 4px; background-color: #a1a3a6; font-size: 18px; font-family: 'Future', 'Arial',Tahoma, Geneva, sans-serif; margin-bottom: 2px; font-weight: bold; background-repeat: no-repeat;}
ul.catNav li:hover {background-color: #000; color: #fff; cursor: pointer; }
ul.catNav li a:link { color: #052145; }
ul.catNav li a:hover { color: #fff; }
.prodList { float: right; padding-top: 26px; padding-left: 26px;}
h1.title { font-size: 36px; font-family: "FuturaBold", Arial,Tahoma, Geneva, sans-serif; color: rgb(161, 163, 166); font-weight: bold; text-shadow: 3px 4px 5px #052145; }
.featCatCont { background-color: #fff}
/* Info Box WITHOUT Headings */
.box1 {color: #333333; background-color: #FFFFFF; BORDER: 1px solid #BBC3D3; margin-top: 5px; padding: 5px; }
.box1 td {color: #333333; }
.box1 a:link {color: #333333; font-size: 8pt; font-weight: bold;text-decoration: none}
.box1 a:visited {color: #333333; font-size: 8pt; font-weight: bold;text-decoration: none}
.box1 a:hover {color: #fa8e2f; font-size: 8pt; font-weight: bold;text-decoration: underline}
.row1 {background-color: #F5F5F5; }
.row2 {background-color: #C2D3FC; }
.footer {color: #cccccc; font-size: 12px; }
.footer h2 { font-size: 150%;}
.footer b {color: #333333; font-size: 12px;}
.footer A:link {color: #cccccc; font-size: 12px; font-weight: bold; text-decoration: none}
.footer A:visited {color: #cccccc; font-size: 12px; font-weight: bold; text-decoration: none}
.footer A:hover {color: #440000; font-size: 12px; font-weight: bold; text-decoration: underline}
.pageNav A:link {color: #FFFFFF; font-size: 11pt; font-weight: bold; text-decoration: none}
.pageNav A:visited {color: #FFFFFF; font-size: 11pt; font-weight: bold; text-decoration: none}
.pageNav A:hover {color: #551A8B; font-size: 11pt; font-weight: bold; text-decoration: underline}
/* Info Box WITH Headings ( H = Heading cell ; B = Body cell ) */
.box2 {color: #333333; background-color: #99d195; BORDER: 1px solid #BBC3D3; margin-top: 5px; padding: 5px;
background-image: url(../images/img_leaf.png); background-position: left; background-repeat: no-repeat; padding-left: 42px;
}
.box2 a:link {color: #333333; font-size: 8pt; font-weight: bold;text-decoration: none}
.box2 a:visited {color: #333333; font-size: 8pt; font-weight: bold;text-decoration: none}
.box2 a:hover {color: #fa8e2f; font-size: 8pt; font-weight: bold;text-decoration: underline}
.box2H {color: #333333; background-color: #DDDDDD; PADDING: 1px}
.box2H B {color: #333333; }
.box2B {color: #333333; background-color: #FFFFFF}
.box2B B {color: #000000; background-color: #FFFFFF; font-weight: bold; font-size: 10pt}
.box2B A:link {color: #333333; text-decoration: none}
.box2B A:visited {color: #333333; text-decoration: none}
.box2B A:hover {color: #0011ff; text-decoration: underline}
.heading1 {color: #0000FF; font-size: 14px; text-decoration: none; font-weight: bold}
li.arrow {list-style-type: none; display: block; padding: 0px 0px 0px 12px; margin-left: -10px; margin-bottom: 5px; background: transparent url(../images/arrow_red.gif) no-repeat; color: #fa8e2f}
.roundtop {
background-color: #FFF;
padding: 5px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
.roundbottom {
background-color: #FFF;
padding: 5px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-left-radius: 8px;
}
.round4corners {
border: 2px solid #cccccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* box-shadow: 10px 5px 5px #888;
padding: 10px;
padding: 5px 5px 5px 5px;
*/}
/* Checkout 1*/
#checkout {
padding: 10px;
}
.checkOutBox {
margin-bottom: 2px;
border: 1px solid #bbbbbb;
width: 98%;
padding: 5px auto;
}
.checkoutEdit {
margin-top: -2px;
float: right;
text-align: right;
width: 20%;
}
.checkoutEdit img {
max-height: 19px;
}
.checkoutTitle {
float: left;
width: 79%;
}
.titleBar {
font-family: Georgia, Verdana, Verdana, Helvetica, sans-serif;
background-color: #ffffff;
height: 20px;
padding: 10px 5px 10px 5px;
text-decoration:none;
font-size: 16px;
font-weight: bold;
color: #144f63;
}
.titleBar a: link, .titleBar a: visited, .titleBar a: active {
text-decoration: none;
font-size:12px;
}
.titleBar a: hover {
color: #000000;
}
.verticalMiddle {
display:table-cell;
vertical-align:middle;
}
/* Box - Page Headings */
.pageHead { font-size: 18Px; font-weight: bold; color: #052145; }
.pageHead a:link { text-decoration:none; font-size: 18Px; font-weight: none; color: #004e38; background: none }
.pageHead a:visited { text-decoration:none ; font-size: 18Px; font-weight: none; color: #004e38; background: none }
.pageHead a:active { text-decoration:none; font-size: 18Px; font-weight: none; color: #004e38; background: none }
.pageHead a:hover { font-size: 18Px; font-weight: none; color: #8b8d08; text-decoration: underline }
/* Box - Page Navigation */
.pageNav {background-color: #EEEEEE}
/* Box - General Headings */
.genHeadings {color: #346247; font-weight: bold; background-color: #cecece; padding: 2px; height: 18px;}
.heading {color: #bbbbbb; font-weight: bold; background-color: #cecece; padding: 2px; }
/* Box - Product Image (Home page) */
.homeImg { BORDER: 1px solid #CCCCCC; background-color: #FFFFFF}
/* Box - Product Description (Home page) */
.homeDesc {border-bottom: 1px solid #CCCCCC; background-color: #FFFFFF}
.PhotoTop {BORDER-TOP: 1px solid #CCCCCC;}
/* Horizontal and Vertical lines */
.lines { background-color: #CCCCCC}
/* Product Short Description (Except Detail page) */
b.prodDesc {text-decoration: none;
font-size: 13px;
font-weight: none;
color: #004e38;
font-family: Verdana, Arial, Helvetica, sans-serif }
/* Product Short Description (Detail page only) */
.prodDescDet {
font-size: 24px;
font-family: 'Century Gothic', 'Arial Narrow',Tahoma;
color: #0068b3;
text-shadow: 1px 1px 0 #555;
}
/* Product Long Description */
.prodDescLong {font-size: 12px; color: #444444}
/* Product Detail */
.prodDet {font-size: 10pt; color: #000000 }
/* Product SKU */
.prodSKU {}
/* Product Price - Text Label */
.prodPriceT {color: #903; font-size: 10pt;}
/* Product Price - Price Value */
.prodPriceV {color: #333333; font-size: 10pt;}
.bold { font-weight: bold}
.title { font-weight: bold; color: #333333; font-size: 14px; padding-bottom: 5px; padding-top: 5px}
/* Product List Price - Text Label */
.prodLPriceT {color: #903; font-size: 10pt;}
/* Product List Price - Price Value */
.prodLPriceV {text-decoration: line-through}
/* Product Sale Price - Text Label */
.prodSPriceT {}
/* Product Sale Price - Price Value */
.prodSPriceV {color: green}
/* Free Shipping text */
.freeShipMsg {color: #888888}
/* Special */
.splcolor {color: #FFCC00}
/* Special */
.spltitle {color: #000000; font-size: 10pt; }
/* In Stock text */
.inStock {color: #E58E13}
/* Out of Stock text */
b.outStock {color: red}
/* No Image text */
.noImgT {color: #000000}
/* Category List */
.catDescList {}
/* Category Description - No products linked to it */
span.catDesc {font-family: Verdana, Arial, helvetica; font-size: 10pt; color: #fa8e2f}
/* Category Description - Has products linked to it */
span.catDescProd {font-weight: bold; font-size: 9pt}
/* Option Description for "Optional" options */
.optDesc {FONT-STYLE: italic}
/* Option Select box */
.optSel {font-family: Verdana, Arial, helvetica; font-size: 8pt}
/* Option Text box */
.optTxt {font-family: Verdana, Arial, helvetica; font-size: 8pt}
/* ------------------- */
/* ADDED - Version 2.3 */
/* ------------------- */
/* Box - 2, 3 and 4 Column Layout for product list page */
.colsView {background-color: #FFFFFF; BORDER: 0px solid #CCCCCC}
.colsView A:link {color: #000099; text-decoration: none}
.colsView A:visited {color: #000099; text-decoration: none}
.colsView A:hover {color: #000000; text-decoration: underline}
/* System Messages */
.sysMsg {font-size: 10pt}
.sysMsgErr {color: red; font-size: 10pt}
.sysMsgURL {font-size: 10pt}
/* ------------------- */
/* ADDED - Version 2.4 */
/* ------------------- */
/* Highlights used in search results */
.highlight {color: #000000; background-color: #ffff66}
/* ------------------- */
/* ADDED - Version 2.5 */
/* ------------------- */
/* Radio Button options */
.optRadio {font-family: Verdana, Arial, helvetica; font-size: 8pt}
/* Option Description for "Mandatory" options*/
.optDescM {FONT-STYLE: italic; color: Red}
/* added style */
.prodRelated { font-family: 'Arial Narrow', Helvetica, sans-serif; font-size: 18px}
/* Date picker */
/* the div that holds the date picker calendar */
.dpDiv {
}
/* the table (within the div) that holds the date picker calendar */
.dpTable {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color: #505050;
background-color: #ece9d8;
border: 1px solid #AAAAAA;
}
/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
}
/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
}
/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
}
/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
}
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
border: 1px solid #ece9d8;
}
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
}
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
background-color: #aca998;
border: 1px solid #888888;
cursor: pointer;
color: red;
}
/* the table cell that holds the name of the month and the year */
.dpTitleTD {
}
/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
}
/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
}
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
background-color: #CCCCCC;
border: 1px solid #AAAAAA;
color: white;
}
/* additional style information for the text that indicates the month and year */
.dpTitleText {
font-size: 12px;
color: gray;
font-weight: bold;
}
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlight {
color: 4060ff;
font-weight: bold;
}
/* the forward/backward buttons at the top */
.dpButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
padding: 0px;
}
/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
color: gray;
background: #d8e8ff;
font-weight: bold;
}