/* browser specific strategy:

we are using a separate file named "browserfix.php" which determines
browser type using php, and then applies overrides to some of the stuff below
so all the main code is here, with a few overrides in the other file.
*/

p { margin:0;}
ul, li{ 
	margin-top:0;
	/* margin-left:0; */ /*05/10/2009 - I don't know when this was put in, but it completely causes Windows IE to lose the bullets */
						/* and there's no good way to reset it in the browserfix to do what it normally does. Taking this out seems
						/* to have made everything normal again. I'm not sure what the purpose of this was, I haven't noticed a difference on Safari as of yet. */
	margin-right:0;
	margin-bottom:5px;
	
}
ul.systemRequirements, ul.systemRequirements li  {margin-bottom:0px; padding-right:10px; }

img {border:0px}

#body {
	background-color: #393d4b; /* page background, which will show through underneath the gradient pict when it runs out */
	vertical-align:top; 
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height:14px;
	text-align:center;
	color:#c9ccd8; 
}

	/* 01/26/2012 - adding this fixed the problems with the text being too large when
	run through the auto-translation code. For some reason, when doing so, the table
	tag in the user agent style sheets takes precedence over the #body ID above, this
	corrects it - I'm not sure if it destroyed anything else - theoretically, if I never
	had this defined, it would follow the #body tag above anyway */
table {
	font-size:10px;
	line-height:14px;
}

    /* 06/20/19 - however, on the karmasoft.html page, I was getting 3px spaces between certain image rows */
.ksoftimagerow {line-height: 0px;}

/* provide a gradient pict background */
#container1 {
	background:url(/images/bg_gradient.gif) repeat-x top;
	width:100%;
	padding-top:15px;	/*offset the next container down */
	padding-bottom:5px;	/*offset the bottom from the edge of the browser */
}

/* limit the width of the entire page */
#container2{
	width: 968px;	
	/* float it in the center of the window */
	margin-left: auto;	
	margin-right: auto;
}

/* classes for creating tables with CSS */

.dt { display:table; width:100%;}
.dr { display:table-row; width:100%; height:100%;}
.dc { display:table-cell; text-align:left; vertical-align:top; width:100%; color:#c9ccd8;} /* color of small text in product descr boxes */

/* EXPERIMENT! */
/*
.dt { overflow:auto; width:100%;}
.dr {overflow:auto; width:100%; height:100%;}
.dc { overflow:auto; text-align:left; vertical-align:top; width:100%; color:#c9ccd8;}*/ /* color of small text in product descr boxes */

#header{
	width:968px;
	margin:0;
	text-align:left;
}

#kl-logo{
	width:187px;
	padding-left:20px;
}

#top-graphic{
	width:703px;
	height:86px;
	padding-left:20px;
}
/* 	because of the way css works, do not use percentages
	use absolute calculated values:
	
	math is NOT CORRECT ANYMORE, but the concept is
	
	fixed width of overall page = 980			#container2
	980 - (15*2 padding) = 950 - border = 948	#main-wrapper
	948 - (15*2 padding) - 918 					#main
   	188 (918 - 760)								#sidebar
   	730 (918 - 188)								#content-wrapper
*/

#sidebar {
	/*text-align:center;*/
	vertical-align:top;
	float:left;
	width:188px;
}

.sb-divider {
	width:auto;
	height:2px;	/* 03/31/12 - went from 1 to 2 to make stripes line up with background again */
	margin-left:10px;
	margin-right:10px;
	margin-top:0px;
	margin-bottom:0px;
}

#navbar { width:auto; display:block; margin:10px; text-align:left; }

/* The links in the navbar */
#navbar ul{ display: block; margin: 0; padding: 0; list-style: none; }
#navbar ul li{ margin-top:5px; display:block; }

#navbar li a { 
	margin: 0;
	display: block;
	padding-left: 1em;
	padding-top: 4px; 
	padding-bottom: 4px; 
	text-decoration: none; 
	border-color: #454959 #000000 #000000 #454959; 
	border-style: solid; 
	border-width: 1px; 
	background:url(/images/sidebar_but_back.gif) repeat top left;
}
#navbar li a:hover { background:url(/images/sidebar_but_back2.gif) repeat top left; }

#transbar {
	width:auto;
	margin-left:10px;
	margin-right:10px;
	padding-top:5px;
	text-align:center;
}

#transtable-top {
	text-align:center;
	height:20px;
}

#transtable-bot {
	/*width:168px;*/
	margin-left:20px;
	margin-right:20px;
}

#transtable-lastrow {
	width:168px;
}

#transtable-lastrow td {
	height:18px;
	text-align:center;
}
.transtable-flag{
	padding:2px;
	width:28px;
	text-align:center;
}

	/*background grey bottom square surrounding content*/
	/* contains sidebar, content, footer */
#main-wrapper{
	border-left: 4px solid #0a0a0b;
	border-right: 4px solid #0a0a0b;
	background-color:#17181c;
}

#main-wrapper-inside {
	border-left: 1px solid #282b32;
	border-right: 1px solid #282b32;
}
	/* contains sidebar, content, footer */
	/* use this for the color of the sidebar, so the whole length is colored */
#main {
	background:url(/images/sidebar_back.gif);	/* left sidebar background */
	margin:18px;
	width:auto;
	border:1px solid #262932;
}


/* the main content area, contains content and footer */
#content-wrapper {
	background:url(/images/content_back.gif);
	float:left;
	width:731px;
	border-left:1px solid #000000;
}

/* top bar only template */
#content-wrapper-tbo {
	background:url(/images/content_back.gif);
	float:left;
	width:920px;
	border-left:1px solid #000000;
}

/* registration form software - no float */
#content-wrapper-reg {
	background:url(/images/content_back.gif);
	width:920px;
	border-left:1px solid #000000;
}

#content {
	margin:0;
	width:auto;
	min-height:550px;
  	height:auto !important;	/* hack for IE 6 */
  	height:550px;
}

#footer {
	width:auto;
}

hr {
	border:0;
	height:1px;
	color:#595f75;
	background-color:#595f75;
	/*background:url(/images/line.gif) repeat-x top; height:1px !important;*/
}
/*.line{ background:url(/images/line.gif) repeat-x top; height:1px; }*/

/* sidebar links */

.menulink:link    { color: #c9ccd8; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.menulink:visited   { color: #c9ccd8; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.menulink:active   { color: #c9ccd8; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.menulink:hover    { color: #54d4ff; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline }
.topmenulink:link    { color: #ffff66; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.topmenulink:visited    { color: #ffff66; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.topmenulink:active    { color: #ffff66; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.topmenulink:hover     { color: #ffff66; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline }
.forumlink:link      { color: #54d4ff; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.forumlink:visited    { color: #54d4ff; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.forumlink:active    { color: #54d4ff; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none }
.forumlink:hover     { color: #54d4ff; font-weight: bold; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline }

/* give a slight border to certain images */
.border1 { border:1px solid #303642; /*#252a33;*/}

/* displays the browser and OS under the transbar - comment back in to see it */
.browser-message {display:none; /*color: #b3b7c5; text-align:center; */}

.pageheader {
	background: #0d0d10 url(/images/pageheader_back.gif) repeat-x top;
	border-bottom:1px solid #20222b;
	vertical-align:middle;
	text-align: center;
}
.tablepaddingLR {
	padding-left:20px;
	padding-right:20px;
}
.listnopad, ul.systemRequirements {
	padding-left:0px; margin-left:10px;
}
.listnospace, .listnospace li {
	margin-bottom:0;
}

.preloadImage {
	display:none;
}
.store-buy-button { margin: 0 10px 0 0; width: 87px; height: 30px; }
.button-center { text-align:center; };


/* page header includes styles */
img.pagelogo{	/* used with no title line underneath */
	height:50px;
	width:69px;
}
img.pagelogopad{	/* used with a title line underneath */
	height:50px;
	width:69px;
	margin-bottom:5px;
}
img.pagelogo-soft{	/* used with no title line underneath */
	height:87px;
	width:75px;
}
img.pagelogopad-soft{	/* used with a title line underneath */
	height:87px;
	width:75px;
	margin-bottom:5px;
}
img.pagelogo-store{	/* used with no title line underneath */
	height:50px;
	width:180px;
}
img.pagelogopad-store{	/* used with a title line underneath */
	height:50px;
	width:180px;
	margin-bottom:5px;
} 

.socialmediaicon {	/* for the icons on the main page sidebar */
padding-left:5px;
padding-right:5px;
}

.socialmediaicon64 {	/* for the icons on the community page */
padding-left:10px;
padding-right:10px;
}

/* the following tweaks the microsoft translation widget in the main site */

.MSTWBox{ width:164px; text-align:center; }
#MSTWMenu { margin-left:5px !important;}
#MSTWBrand, #MSTWShareButton, #MSTWGetButton{ display:none !important; }
#MSTWGetShare, #MSTWFooter {height:0px !important; }
#MicrosoftTranslatorWidget {
	font-size:10px !important;
	border:1px solid !important;
	border-top-color: #454959 !important;
	border-left-color: #454959 !important;
	border-right-color: #111215 !important;
	border-bottom-color: #111215 !important; }

#MicrosoftTranslatorWidget select {	/* popup menu */
	width: 125px !important; 
	color:#c9ccd8 !important;
	background-color:#454959 !important; 
	border-top-color:#2b2e38 !important;
	border-left-color:#2b2e38 !important;
	border-right-color:#17181c !important;
	border-bottom-color:#17181c !important;
	border-width:1px !important;
}
/* tweak for ipad/iphone to make text black since background is much lighter*/
/* first line is ipad, in horiz or vertical, while second lineis iphone */	
/* http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/ */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
only screen and (max-device-width: 480px) {
  #MicrosoftTranslatorWidget select {	/* popup menu */
	color:#000000 !important;
  }
}	
#MSTWHeaderText {color:#c9ccd8 !important; width:auto !important; }
#MSTWHeader { margin-top:3px !important; }