/*******************************/
/* FileName: Main.css
/* Date Created: 12-19-2008
/* Author: Paul Navasard 
/*
/* This file contains the base of styles for family of KLAS websites.
/*******************************/

@import url(/Styles/Reset.css);

/*******************************/
/* Global Classes
/*******************************/
.Middle { vertical-align:middle; }
.Center { text-align:center; }
.Hide { display: none; }
.AltRow { background: #edf5ff; }
.GreenButton, .GreyButton, .BlueButton, .RedButton { display:block; float:left; padding:2px 8px; color:#fff; margin:0 2px 0 0; vertical-align:middle; line-height:11x; word-spacing:1px; cursor:pointer; font-size:11px; font-weight:bold; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.GreenButton:hover, .GreyButton:hover, .BlueButton:hover, .RedButton:hover  { text-decoration:none; }
.GreenButton { background:#3c9623 url(/Images/Global/GreenButtonBG.gif) repeat-x; }
.GreyButton { background:#595959 url(/Images/Global/GreyButtonBG.gif) repeat-x; }
.BlueButton { background:#06458b url(/Images/Global/BlueButtonBG.gif) repeat-x; }
.RedButton { background:#d83831 url(/Images/Global/RedButtonBG.gif) repeat-x; }
.PageBox {  border-top:solid 1px #ddd; margin:5px 0 0; padding:3px 10px; font-size:11px; color:#777; }
.Center { display:block; margin:0 auto; }
#LightBoxWrap, .box { border:solid 1px #ddd; background:#fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-top:solid 1px #c8c8c8;  }
#LightBoxWrapper { display:none; z-index:10; position:absolute; padding-bottom:30px; }
#LightBox { display:none; padding-bottom:30px; }
#LightBoxContent { padding:15px 20px; }
.evProduct_SizeName { font-size:11px; color:#999; font-weight:normal; line-height:14px; padding:0 0 0 5px; }
.evProduct_RegionName { font-size:11px; color:#999; font-weight:normal; line-height:14px; padding:0 0 0 5px; }
.evProduct_VendorLogo { width: 75px; padding:0 0 5px; }

/*******************************/
/* Global Elements
/*******************************/
body { font: normal 12px/18px Arial, Sans-Serif; color:#444; margin:0; background:#fff; }
a { color:#255fa2; text-decoration:none; }
a:hover { text-decoration:underline; }
a.Go { background:url(/Images/Icons/go.jpg) no-repeat; padding-left:18px; }
a.GoDark { background:url(/Images/Icons/go_dark.jpg) no-repeat; padding-left:18px;  }
a.Plus { background:url(/Images/Icons/add_small.jpg) no-repeat; padding-left:18px; }
a.Minus { background:url(/Images/Icons/delete_small.jpg) no-repeat; padding-left:18px; }
h3 { border-bottom:solid 1px #ccc; margin:0 0 10px; padding:0 0 4px 0; font-size:16px; line-height:19px; font-weight:bold; color:#444; font-family:Arial,Verdana,sans-serif; }
h3 .right { display:block; float:right; font-size:11px; font-weight:normal;  }
h3 .left {  padding:0 0 0 10px; font-size:11px; font-weight:normal;  }
textarea { padding:5px; font-family:Arial; font-size:14px; line-height:20px; }
input.checkbox, span.checkbox input { width:auto; }
h2 { color:#04438a; font-size:20px; line-height:26px; padding:15px 0 0 0; margin:0 0 5px 0; font-weight:normal; font-family:Geneva,Arial,Verdana,sans-serif; }
p { margin:0 0 10px 0; }
ul { margin:0 0 10px 0; list-style-type:disc; list-style-position:outside; }
li { margin:0 0 3px 15px; }
strong { font-weight: bold; }

/*******************************/
/* Basic Page Layout Styles
/*******************************/
#WrapperContainer { padding:0 0 0 0; }

#HeaderContainer { background:#fff; width:950px; margin:0 auto; }
#Header { height:65px; margin:0; padding:0; }
#Header a h2 { height:40px; width:140px; background:url(/Images/MainPageElements/KLASLogoV3.gif) no-repeat 0px 15px; float:left; margin:0; }
#Header a h2 span { display:none; }

#NavigationContainer { background:#fff; }
#Navigation { float:left; width:400px; }
#MainNavigation {  float:left; margin:28px 0 0 40px; }
#MainNavigation li { float:left;   margin:5px 25px 0 0; list-style:none; padding:0; }
#MainNavigation li a { display:block; font-size:14px; }
#MainNavigation li a:hover { text-decoration:none; }

#SearchBrowse { float:right; clear:right;  }
#KeywordSearch div { float:left; }

#KeywordSearch {  float:right; width:320px; }
#KeywordSearch input { width:150px; padding:3px; margin:1px 0 0; font-size:12px; margin:0; outline:none; border:solid 1px #c8c8c8; float:left; }
.SearchButton { color:#fff; background:#3c9623 url(/Images/Global/GreenButtonBG.gif) repeat-x; font-size:11px; font-weight:bold; padding:2px 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; display:block; float:left; margin:0 5px; cursor:pointer; }
.SearchButton:hover { text-decoration:none; }

#Browse { cursor:default; margin:-20px 0 0 -8px; padding:3px 8px; position:absolute; display:none; background:#595959 url(/Images/Global/GreyButtonBG.gif) repeat-x; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
*:first-child+html #Browse { margin:-4px 0 0 -66px; }
#BrowseButton { word-spacing:1px; color:#fff; background:#595959 url(/Images/Global/GreyButtonBG.gif) repeat-x; font-size:11px; font-weight:bold; padding:2px 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; display:block; float:left; margin:0 0 0 5px; cursor:pointer; }
#BrowseButton:hover #Browse, #BrowseButton.hover #Browse { display:block; }
#BrowseButton span { font-weight:normal; font-size:10px; line-height:14px;   }
#Browse a {  font-size:11px; color:#fff; font-weight:normal; word-spacing:normal; display:block; }
#Browse ul { margin:0; padding:0; }
#Browse ul li { height:auto; padding:3px 0; line-height:14px; list-style:none; margin:0; }
#Browse ul li.Vendors {  }

#PageTitleContainer { clear:left; background:#f5f5f5; border-top:solid 2px #4077B6;  }
#PageTitle { margin:0 auto; width:950px; }
#PageTitle h1 { font-size:20px; line-height:22px; margin:0; padding:15px 0 5px; color:#444; font-weight:normal; }

#HeaderRight { float:right; width:320px; }

#LoginBox { float:right;  font-size:11px; color:#444; padding:2px 8px; }
#LoginBox .checkbox label { padding-left:5px; }
#LoginForm .text { width:143px; }
.LoginButton { width:79px; padding:0; margin:0; height:18px; background:url(/Images/MainPageElements/BackpageLoginButton.gif) no-repeat; }
.LoginButton span { display:none; }

#Extras { display:none; padding:2px 10px; margin:0 5px 0 0; float:right; background:#4077B6; border:solid 1px #4077B6; border-top:none; float:right; font-size:11px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; }
#Extras a { color:#fff; }
#Extras a span { font-weight:bold }

#MainContainer { background:#f5f5f5; padding:0 0 40px; }
#Main { width:950px; margin:0 auto; }

#SideBar { width:140px; float:left; padding:23px 0 0 0; }
#SideBar h4 { font-size:13px; cursor:pointer; color:#c74a1b; margin:0 0 0px 0; font-weight:normal; }
#SideBar ul { border-bottom:solid 1px #ddd; margin:0 0 0px; }
#SideBar ul li { padding:2px 5px; background:#eee; border:solid 1px #ddd; border-bottom:none; }
#SideBar ul li a { font-size:11px; text-decoration:none;  }
#SideBar ul li.Current { background:url(/Images/MainPageElements/SideBarBullet.gif) no-repeat 0 6px; }
#SideBar .AccordionElement { margin:0 0 5px; }

#RightSideBarContianer { background:#eee; width:200px; margin:15px 0 10px 15px; font-size:11px; line-height:16px; float:right; border:solid 1px #ddd; }
#RightSideBar { padding:0 15px; }

#ContentContianer {  width:780px; float:right; padding:15px 0 0 0; }
.NoSideBar #ContentContianer { width:100%; float:none; }
#Content { padding:0 0 0 0; }

#Footer { clear:both; background:#fff; height:117px; padding:40px 0 0; color:#666; font-size:11px; border-top:solid 1px #c8c8c8; }
#FooterLinksContainer { width:950px; margin:0 auto; }
#Footer h4 { float:left; clear:left; padding:0 15px 10px 0; }
#FooterKLAS { margin-left:150px; }
#FooterResearch { margin-left:155px; }
#Footer ul li { float:left; padding:0 5px 1px 0; color:#999; list-style:none; margin:0; }
#Footer ul li a {  font-size:11px; text-decoration:none; color:#6B93BF; }
#Footer ul li a:hover { text-decoration:underline; }
#FooterCopyright { clear:both; text-align:center;  color:#999; font-size:10px; padding:5px 0 0 0; }

#LoginForm { font-size:12px; }
#LoginForm h3 { text-align:center; margin:0 0 15px; }
#LoginForm dl { margin:0px 0 10px; width:250px; margin:0 auto 10px; }
#LoginForm dt { float:left; width:75px; clear:both; margin:5px 0 0; }
#LoginForm dd { float:left;  padding:5px 0; width:170px; }


/*******************************/
/* Tabs Classes
/*******************************/
div.Tabs { padding:0; }
div.Tabs div { height:24px; padding:0px 0px 0px 0px; } 
ul.Tabs {  list-style:none; margin:0; padding:0 10px; }
ul.Tabs li { float:left; background:#e3e3e3; font-weight:bold; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border:solid 1px #d3d3d3; border-bottom:none; color:#444; cursor:pointer; margin:0 10px 0 0; padding:3px 15px; }
ul.Tabs li.Selected {  background:#4077B6; color:#fff; border:solid 1px #4077B6; border-bottom:none; }
ul.Tabs li.Load { background:#f5f5f5; border:none; float:left; cursor:auto; margin:3px 0 0 0; width:16px; height:16px;  padding:0; }
ul.Tabs li.Loading { background-image: url(/Images/Global/Load.gif); }
ul.Tabs li.Title { background-color: transparent; font-weight: bold; cursor: auto; }

.SmallTabs { height:30px; }
.SmallTabs div { padding:5px; }
.SmallTabs ul.Tabs { display:block; padding:0 5px; border:none; height:auto; }
.SmallTabs ul.Tabs li { font-size:11px; border:none; background:none; padding:1px 7px; margin:0 1px 0 0; color:#255fa2;  }
.SmallTabs.Larger ul.Tabs li { padding:4px 15px; font-size:12px; }
.SmallTabs ul.Tabs li.Load {  border:none; float:left; cursor:auto; margin:3px 0 0 5px; width:16px; height:16px;  padding:0; }
.SmallTabs ul.Tabs li.Loading { background-image: url(/Images/Global/Load.gif); }
.SmallTabs ul.Tabs li.Selected { -moz-border-radius:5px; -webkit-border-radius:5px; background:#06458b url(/Images/Global/BlueButtonBG.gif) repeat-x; color:#fff; }

/*******************************/
/* MiniProfile Styles
/*******************************/
.MiniProfile, .MiniProfileTriangle, .MiniProfileBox, .MiniProfileBox img { margin: 0 ; padding: 0 ; border: 0 ; outline: 0 ; width:auto ; height:auto ; }
.MiniProfile {  position:absolute;  font-size:11px; white-space:nowrap;   }
.MiniProfileTriangle { float:left ; font-size: 0px ; line-height: 0% ; width: 0px ; border-top: 7px solid transparent ; border-right: 10px solid #ddd ; border-bottom: 7px solid transparent ;  margin:20px 0 0 ; }
.MiniProfileBox { float:left ; padding:5px 10px ; border-radius:5px; background:#ddd; -moz-border-radius: 5px ; -webkit-border-radius: 5px ;  }
.right .MiniProfileTriangle, .right .MiniProfileBox { float:right ; }
.right .MiniProfileTriangle { border-left: 7px solid #ddd ; border-right:0 ; }
.MiniProfileBox b { font-size:12px ; font-weight:bold ; } 
.MiniProfileBox img { padding:5px ; }
.Badge span { padding:5px 5px 5px 0px; display:block; float:left; }


/*******************************/
/* AutoComplete
/*******************************/
ul.autocompleter-choices { position:absolute; margin:0; padding: 0; list-style:none; border:1px solid #7c7c7c; border-left-color:#c3c3c3; border-right-color:#c3c3c3; border-bottom-color:#ddd; background-color:#fff; text-align:left; z-index:50; background-color:#fff; font-size:14px; line-height:14px; }
ul.autocompleter-choices li { position:relative; margin:-2px 0 0 0; padding:8px 10px 8px; display:block; float:none !important; cursor:pointer; font-weight:normal; white-space:nowrap; }
ul.autocompleter-choices li div { color:#666; font-size:11px }
ul.autocompleter-choices li.autocompleter-selected { background:#06458b url(/Images/Global/BlueButtonBG.gif) repeat-x; color:#fff; }
ul.autocompleter-choices li.autocompleter-selected div { color:#fff; }
ul.autocompleter-choices span.autocompleter-queried { display:inline; float:none; font-weight:bold; margin:0; padding:0; }

/*******************************/
/* KLAS Help
/*******************************/
#KLASHelp { background:#fff; border: solid 1px #999; -moz-border-radius:5px; -moz-box-shadow:2px 2px 5px #888; -webkit-border-radius:5px; -webkit-box-shadow:2px 2px 5px #888; padding: 2px 5px; position:absolute; z-index:1000; }
#HelpText { max-width: 550px; }
img.HelpIcon { vertical-align: middle; cursor: pointer; }
a.HelpIcon { background: url(/Images/Icons/help.gif) no-repeat left; padding-left: 20px; cursor: pointer; }
#HelpArrow { display:none; position:absolute; z-index:1000; top:-11px; left:9px; border-bottom: solid 10px #999; border-left: solid 8px #fff; border-right: solid 8px #fff; width:0; height:0; }

/*******************************/
/* Mootools Tooltips
/*******************************/
.LightBoxTip {  z-index:20; }
.LightBoxTip .tip { width:400px; }
.tip { background: #fff; border:1px solid #999; padding:2px 5px; -moz-box-shadow:2px 2px 5px #888; -webkit-box-shadow:2px 2px 5px #888; -moz-border-radius:5px; -webkit-border-radius:5px; }
.tip-title { font-weight:bold; font-size:13px; }
.tip-text { font-size:11px; }

/*******************************/
/* clearfix hack
/*******************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/*******************************/
/* Form Validation Styles
/*******************************/
.formUnder { font-size:10px;  color:#666; clear:both; }
.formField { text-align:right; font-weight:bold; color:#555; }
.formRow {  }
.formOverEmpty { color:#999; }
.formText { padding:0 0 10px; }
.formOverError { color:red; }
.formError { float:left !important; width:auto !important; border:solid 1px #e36154 !important; padding:0px 3px !important; font-weight:bold !important; margin:0 5px !important; font-size:10px !important; background:#f88166 !important; color:#fff !important; }

/*******************************/
/* Product Selection Styles
/*******************************/
.sel_Prod { cursor:pointer; float:left; width:150px; border:solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:5px; font-size:12px; line-height:15px; }
.sel_Selected { background: #eee url(/Images/Icons/check.gif) no-repeat scroll 97% 5%; }
.sel_Prod div { padding:5px 5px 10px 5px;  }
.sel_Name { height:45px; overflow:hidden; display:block; text-align:center; }
.sel_Ven { height:60px; background:no-repeat 50% 50%; display:block; font-size:12px; font-weight:bold; }
.sel_Ven span { font-size:10px; display:block; float:right; }
.sel_Ven div { font-size:14px; text-align:center;  }
#QCBox { overflow:auto; height:350px; margin:0 0 5px 0; clear:both; }

/*******************************/
/* Evaluation Styles
/*******************************/
body#Evaluation { background:#f5f5f5; }
#Evaluation h1 { height:60px; width:200px; background:url(/Images/MainPageElements/KLASLogoV3.gif) no-repeat; margin:0 0 10px; }
#Evaluation h1 span { display:none; }
#EvaluationTitle { font-size:18px; line-height:22px; font-weight:bold; margin:0 0 20px 0px; }

/*******************************/
/* Evaluation Navigation Bar
/*******************************/
#NavBar {position: absolute; z-index:20; bottom:0; background:#aaaaaa; padding:3px 10px; border-top:solid 1px #23578F; }
body > #NavBar { position:fixed; }

/*******************************/
/* Beta Ribbion
/*******************************/
#FooterBar { position: absolute; z-index:20; bottom: 0; height:26px; width:100%; }
body > #FooterBar { position:fixed; }
#FooterBarInside { padding:0px 0px; font-size:11px; margin:0 10px; background:#06458b url(/Images/Global/BlueButtonBG.gif) repeat-x; border:solid 1px #06458b; border-bottom-color:#e5e5e5; }
#FooterBarLeft { float:left; padding:2px 0 0 10px; font-size:12px; color:#fff; }
#FooterBarRight { float:right; text-align:right;  }
#FooterBarRight a { display:block; float:left; padding:3px 25px 3px 5px; color:#fff; }
#FooterBarLeft a { display:block; float:left; padding:2px 0px 3px 5px; margin:0 20px 0 0; font-size:11px; color:#fff; }
#FooterBar a:hover{text-decoration:underline; }
#CommunityNumbers span { font-weight:bold; }
#FooterBarRight .connectionLink { background:url(/Images/Icons/groupFooter.gif) no-repeat 0 5px; padding-left:22px; }

/*******************************/
/* Beta Ribbion
/*******************************/
#BETA { position: absolute; z-index:20; bottom: 0; width:100%; background:#014087 url(/Images/MainPageElements/BetaBarBG.gif) repeat-x; padding:3px 10px; border-top:solid 1px #23578F; }
body > #BETA { position:fixed; }
#BETA_Left { float:left; padding:2px 0 0 10px; font-size:12px; color:#fff; }
#BETA_Right { float:right; text-align:right;  }
#BETA_Right a { display:block; float:left; padding:3px 20px 3px 0px; color:#fff; }
#BETA a:hover{text-decoration:underline;}