/*	Fog Creek Software Basic Style */
/* d.shea - dave@mezzoblue.com */


/**********************************************************************
BASIC HTML ELEMENTS 
**********************************************************************/
html {
	margin: 0;
	padding: 0;
}
body {
	font: small georgia, 'Times New Roman', serif; 
	color: #002233;
	background-color: #fff;
	margin: 0;
	padding: 0;
	min-width: 780px;
} html>body {font-size: medium;}

a:link {
	color: #01547B; 
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	color: #658;   /* 658 = soft purple */
	font-weight: bold;
	text-decoration: none;
}
a:hover {
	color: #016A9B;
	text-decoration: underline;
	border: 0;
}
a.image:link, a.image:visited{ 
	border: 0;  /* don't underline image links */
}

#mainContent a:link {
	border-bottom: dotted 1px #abc;
}
#mainContent a:visited {
	border-bottom: dotted 1px #bad;
}
#mainContent a:hover {
	text-decoration: underline;
	border: 0;
}
#mainContent a.image:link, #mainContent a.image:visited{ 
	border: 0;  /* don't underline image links */
}


#sideBar a:link {
	border-bottom: dotted 1px #89a; /* underline colors are different over the blue background */
}
#sideBar a:visited {
	border-bottom: dotted 1px #a9c; /* 96899c; */
}
#sideBar a:hover {
	border: 0;
	color: #016A9B;
	text-decoration: underline;
}
#sideBar a.image:link, #sideBar a.image:visited{ 
	border: 0;  /* don't underline image links! */
}



h1 {
	font: 900 100% verdana, tahoma, arial, sans-serif;
	color: #014D6D;
	background: transparent url(http://www.fogcreek.com/i/bg5a.gif) bottom left repeat-x;
}
h2 {
	font: 900 100% verdana, tahoma, arial, sans-serif;
	color: #2F302B;
	background: transparent url(http://www.fogcreek.com/i/bg5b.gif) bottom left repeat-x;
}
h3 {
	font: 900 84% verdana, tahoma, arial, sans-serif;
	color: #014D6D;
}
h4 {
	font: 900 84% verdana, tahoma, arial, sans-serif;
	color: #2F302B;
}
h5 {
	font: 900 70% verdana, tahoma, arial, sans-serif;
	color: #014D6D;
	/* color: #014D6D; */
	letter-spacing: 0.3em;
}
h6 {
	font: 900 70% verdana, tahoma, arial, sans-serif;
	color: #2F302B;
	letter-spacing: 0.3em;
}
img {
	border: 0;
}
cite {
	font-style: normal;
}




/***********************************************************************
STRUCTURE / LAYOUT 
***********************************************************************/

#textWrapper {
	background: #B9CBD9 url(http://www.fogcreek.com/i/bg7.gif) top left repeat-y;
	position: absolute;
	top: 26px;
	left: 0;
	margin: 0;
    width:100%;
}

ul#topNav {
	text-align: right;
	list-style-type: none;
	background: #9FA193 url(http://www.fogcreek.com/i/bg1.gif) bottom left repeat-x;
	padding: 3px;
	margin: 0;
	height: 26px;
} * > ul#topNav {height: 20px;}

#sideBar {
	position: absolute;
	left: 0;
	top: 0;
	width: 250px;
}

#mainContent {
	background: #fff url(http://www.fogcreek.com/i/bg3.gif) top left repeat-x;
	padding: 0;
	margin: 0 0 0 250px;
	voice-family: "\"}\""; /* tantek hack  */
	voice-family:inherit;
	border-bottom: solid 1px #fff;
	padding: 0 5px 0 0;
	width: auto;
}

#contentArea {
	line-height:1.3em;
	padding: 0 2em;
	margin: 1em 0;
}

.threeColumn #contentArea {
	margin-right: 176px;
}

.threeColumn #linkList {
	position: absolute;
	top: 193px;
	right: 1em;
	width: 166px;
}

#copyright {
	font-size: 10px;
	font-family: verdana, tahoma, arial, sans-serif;
	color:#789;
	position:absolute;
	top:auto;
	right:auto;
	bottom:50px;
	left:35px;	
	text-align:center;
}


ul#footer {
	text-align: left;
	background: #014D6D url(http://www.fogcreek.com/i/bg4.gif) top left repeat-x;
	list-style-type: none;
	padding: 0.5em;
	margin: 0;
	clear: both;
}





/*********************************************************************** 
TOP 
***********************************************************************/
ul#topNav li {
	font: bold x-small verdana, tahoma, arial, sans-serif;
	color: #fff;
	display: inline;
	margin: 0;
} * > ul#topNav li {font-size: small;}

ul#topNav li a:link, ul#topNav li a:visited {
	color: #fcfcfc;
	padding: 3px 10px;
	margin: 0 0.5em;
	text-decoration: none;
	font-weight: bold;
}

ul#topNav li a:hover {
	color: #fff;
	background: #BEBFB6 url(../i/bg2.gif) 0 0 no-repeat;
	text-decoration: none;
	font-weight: bold;
}





/*********************************************************************** 
LEFT HAND SIDE 
***********************************************************************/

#sideBar h2 {
	margin: 0 1em;
	padding: 5px 6px 0 6px;
	background: #92AABF url(http://www.fogcreek.com/i/bg8.gif) top left repeat-x;
}
#sideBar h2.doubleHeight {
	background: #88A1B7 url(http://www.fogcreek.com/i/bg9.gif) bottom left repeat-x;
}

#sideBar h3 {
	margin: 1em; 
	font: 900 75% verdana, tahoma, arial, sans-serif;
}

#sideBar p {
	padding: .5em;
	color: #062633;
	font:	80%/1.4 verdana, tahoma, arial, sans-serif;
	margin: 0em 1em .5em 1em ;
}



#sideBar ul {
	margin: 0 1em 1em 1em;
	padding: 0 0 1em 0;	
}
#sideBar li {
	margin: 0 0 0.5em 0;
	color: #062633;
}


#linkList ul {
	margin: 0;
	padding: 0;
}
#linkList li {
	padding: 0 0 .5em 15px;
	margin: 0.5em 0 0 0;
	list-style: none;
	background: transparent url(http://www.fogcreek.com/i/box-sm.gif) top left no-repeat;
	font: 75%/1.3em verdana, tahoma, arial, sans-serif;
}


/* DK basic list style: for navigation links. Can be used in sidebar or main content area  */
ul.basic{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.basic li{
	margin: 0.5em 0 0 0;
	padding: 0 0 .5em 15px;
	color: #062633;
	font: 75%/1.3 verdana, tahoma, arial, sans-serif;
	background: transparent url(http://www.fogcreek.com/i/box-sm.gif) top left no-repeat;
}


#sideBar ul.sideBarBox {
	list-style-type: none;
	background-color: #B0C3D3;
	margin: 0 1em 2em 1em;
	padding: 0.6em;
	font-family: verdana, tahoma, arial, sans-serif;
}

#sideBar ul.sideBarBox li {
	font-size: 70%;
	margin: 0 0 .7em 0;
	line-height: 1.7em;
}
#sideBar ul.sideBarBox h5 {
	color: #334455;
	margin: 0 2em 0.2em -.5em;
	letter-spacing: 0.1em;
	font-size:90%;
}






#fogCreekLogo{ 
	margin-bottom: 1em;
}








/*********************************************************************** 
CONTENT AREA 
***********************************************************************/





#mainContent .flLeft {
	float: left;
	padding: 0.5em;
}

#mainContent .flRight {
	float: right;
	padding: 0.5em;
}





/* CONTENT */

#contentArea h1 {
	color: #6A6D58;
	font: 100 120% georgia, 'Times New Roman', serif;
	margin: 2em 0 1em 0; 
}



/* used in CDNews for RSS feed links*/
#badges {
	margin-top: 2em;
	text-align: center;
}
#badges img {
	margin-right: 10px;
	background-color: #FF6E0D;
}
#badges a:link, #badges a:visited {
	border: 0;
}
#badges a:hover img {
	background-color: #F4580B;
}




/*********************************************************************** 
RIGHT HAND SIDE 
***********************************************************************/

/* all these extra id selectors are needed to make the specifity bulletproof */
#sideBar a.buy:link, #sideBar a.buy:visited, #sideBar a.buy:hover, #linkList a.buy:link, #linkList a.buy:visited, #linkList a.buy:hover {
	color: #fff;
	border: solid 1px #014D6D;
	text-decoration: none;
	width: 166px;
	font: bold 80% verdana, tahoma, arial, sans-serif;
	text-align: center;
	display: block;
	padding: 0.5em;
}
#sideBar a.buy:link, #sideBar a.buy:visited, #linkList a.buy:link, #linkList a.buy:visited {
	background: #014D6D url(http://www.fogcreek.com/i/bg4.gif) top left repeat-x;
}
#sideBar a.buy:hover, #linkList a.buy:hover {
	background: #085C80; /* rollover effect */
}

#sideBar a.buy:link, #sideBar a.buy:visited, #sideBar a.buy:hover {
	margin: 2em 0 2em 16px; /* sidebar buy link needs a different margin */
}
#linkList a.buy:link, #linkList a.buy:visited, #linkList a.buy:hover {
	margin: 0 0 0 0; 
}





#linkList h2 {
	background: #92AABF url(http://www.fogcreek.com/i/bg8.gif) top left repeat-x;
	padding: 4px 0 0 3px;
	margin: 1em 0 2px 0;
}








/* DK: dave originally had these attached only to #linkList */
dl {
	font: 80% verdana, tahoma, arial, sans-serif;
}
dt {
	font-weight: bold;
}
dd {
	padding: 0 0 0.8em 1em;
	margin: 0 0 0.8em 0;
	background: transparent url(../i/bg5b.gif) bottom left repeat-x;
}




/*********************************************************************** 
FOOTER 
***********************************************************************/

ul#footer li {
	display: inline;
}
ul#footer li a:link, ul#footer li a:visited {
	font: bold 70%  verdana, tahoma, arial, sans-serif;
	color: #eef;
	margin-left: 9px;
	padding-left: 16px;
	text-decoration: none;
} * > ul#footer li a:link, * > ul#footer li a:visited {font-size: 70%;}

ul#footer li a:hover {
	background: transparent url(http://www.fogcreek.com/i/mo1.gif) center left no-repeat;
	text-decoration: none;
}




/* USABILITY TWEAK */
.skipLink {
	position: absolute;
	left: -999px;
	width: 990px;
}




/* DK: used for blockquotes (the blockquote tag is already in use all over the place for non-quotes) */

#mainContent .quote {
	font:	80%/1.4 verdana, tahoma, arial, sans-serif;
	background-color: #ECECE9;
	border: solid 1px #ccc;
	margin: 1em;
	padding: .7em;
}
#sideBar .quote {
	font:	75%/1.4 verdana, tahoma, arial, sans-serif;
	background-color: #B0C3D3;  /* cad5e0; */
	border: solid 1px #9ab;  /* bac5d0; */
	margin: 1em;
	padding: .7em;
}



/*********************************************************************** 
SPECIFIC TO HOME PAGE 
***********************************************************************/

/* DK: html table that replaces productList UL*/
#homeList{
	line-height:1.3em;
	font-size:small;
} * > #homeList {font-size: medium;}


#homeList td{
	padding: 1.4em 0 .7em 0;
}


#homeList td.text{
	background: transparent url(http://www.fogcreek.com/i/bg5a.gif) bottom left repeat-x;
}

#homeList h3 {
	font: x-small verdana, tahoma, arial, sans-serif;
	letter-spacing: 1px;
	margin: 0;
	margin-bottom: .5em;
}* > #homeList h3 {font-size: small;}


#homeList h3 a:link, #homeList h3 a:visited, #homeList h3 a:hover {
	font-weight: bold;
	color: #014D6D;
	border-bottom-color:#abc;
}






.bullet { /* apply this to any text block to give it a list-style bullet */
	margin: 0 1em;
	padding: 0 0 .5em 15px;
	background: transparent url(http://www.fogcreek.com/i/box-low.gif) top left no-repeat;
}

.indent { /* apply this to anything to give it the same indent as the above bullet*/
	margin: 0 1em;
	padding: 0 0 .5em 15px;
}



.sideBarPhoto{
	border: solid 7px #abc;  /* bac5d0; */
	margin:1em;
}

.center{
	text-align:center;
}


/*********************************************************************** 
  SHOP 
***********************************************************************/

caption.productHead {
	text-align:			left;
	color:				  #426280; 
	font-weight:		bold;
	font-family: verdana, tahoma, arial, sans-serif; 
	font-size:			125%;
}



th.productHead {
	font-family: verdana, tahoma, arial, sans-serif; 
	font-size:			75%;
	color:				black;
	background-color:	#CCCCCC;
}

.product {
	font-family: verdana, tahoma, arial, sans-serif; 
	font-size:			90%;
	text-align:			left;
	color:				black;
	font-weight:		bold;
}

.subProduct {
	font-family: verdana, tahoma, arial, sans-serif; 
	font-size:			75%;
	text-align:			left;
	color:				#999999;
}

th.dlg				/* Dialog box label column */
{
	font-family: verdana, tahoma, arial, sans-serif; 
	font-size:			0.7em;
	font-weight:		bold;
	padding-right:		1.5em;
	text-align:			left;
	vertical-align:		top;
	padding-bottom:		2ex;
}

td.dlg				/* Dialog box data column */
{
	xpadding-bottom:		2ex;
}

p.dlg				/* Caption of a dialog box */
{
	font-size:			1.5em;
	font-family:		Palatino Linotype, Georgia, Times, serif; 
}

input.dlg			/* Edit box in a dialog */
{
	font-family: verdana, tahoma, arial, sans-serif; 
}


input.dlgError		/* Put a red box around input boxes to indicate errors */
{
	border: 1px solid #c33;
	font-family: verdana, tahoma, arial, sans-serif; 
	background-color:fafafa; /* d9d9f0 */
	color:#002233;
}

.editInstructions	/* Small instructions below an edit box */
{
	font-size:			0.7em;
	font-family: verdana, tahoma, arial, sans-serif; 
	color:				#666666;
}

.errorLabel			/* Small text below input boxes to describe errors */
{
	font-size:			0.7em;
	font-family: verdana, tahoma, arial, sans-serif; 
	font-weight:		bold;
	color:				#C33;
	vertical-align:		top;
}


/* text box */
.box {            
	font-family: verdana, tahoma, arial, sans-serif; 
	background-color:f5fafa; /* d9d9f0 */
	color:#002233;
	border: 1px solid #bbb;
}

/* droplist */
.list {
	font-family:Verdana, Arial, Sans-Serif;
	font-size:12px;
	color:#003333;
	background-color:#fafdfd;  
}


/* buttons */
.btn {
	background-color:#D29D5C; /* DA8F36 DA9C51 689 blue */
	border: #EEB877 outset 1px; /*#abd */
	height:21;
	font: bold 11px verdana, tahoma, arial, sans-serif ;
	color: #fff;
}


.promptMsg {
	color:#426280;
}

.errorMsg {
	color:#C33;
}


.smallText {
	font-size: 80%
}

.tinyText {
	font-family: verdana, tahoma, arial, sans-serif; 
	font-size:10px;
}


.code {
	font: bold 80% courier, monospace;
	color: #060;
}