/* 

Style sheet for Qvalla.com - controls the design of Qvalla.com, separating content from design.

Qvalla.com copyright 2008

TOC
1. defaults
2. element selectors
3. id selectors
4. class selectors

*/



/* 1. DEFAULTS */

* { 
  margin: 0;
  padding: 0;
  }


/* 2. ELEMENT SELECTORS */
/*    setting of elements to work a certain way */

body  {
	background: #FFFFFF;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}




A {
   color:#333333; 
	text-decoration:none; 
	font-weight: bold; 
}

A:hover {
	color:#990066;
}



/* the bottom margin is set, not the top margin, just like in H1, H2 and H3 as this is good practice */
p  {
    border-top-width: 0;
    padding-top: 0;
    margin-bottom: 10px;
    border-bottom-width: 0;
    padding-bottom: 0;

}


h1 {
	font-size: 18px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#990066;
	margin-bottom:10px; 
}

/* h2 is used on the clients overview page to list the clients */
h2 {
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#990066;
	margin-bottom:0px; /*changed 15 oct from 5px */
	
}


/* this one spaces out the city font on Contacts page */
h2.city {
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#990066;
	margin-bottom:0px;
	letter-spacing:1px;
   
}

/* h3 is used to highlight consultant names on Consultant page, list success story titles on Success Stories page, 
  and list capability topics on Capbilities page */

h3 {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
	margin-bottom:0px;
}

/* used to format tables on capability and company pages */
table {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin:0px;
   padding:0;
	border-collapse: collapse;
}

li  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

td {
	font-family: Arial, Helvetica, sans-serif;
	padding-right: 10px;
	padding-bottom: 5px;
   vertical-align:top;
}

/* used to format a table column that contains a list like on the company page - this is an element specific CLASS SELECTORS*/
td.list {
	font-family: Arial, Helvetica, sans-serif;
	padding-right: 10px;
	padding-bottom: 5px;
   vertical-align:top;
	padding-left: 40px;
}


/* the table header is similar to H2 */
th {
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#990066;
	padding-bottom:5px;
	text-align:left;
}


/* turn off the border on all images */
img {
    border: 0;
}

/* add bottom border to image */
img.border {
    border-bottom: 1px solid #990066;
}
  

/* element specific CLASS SELECTORS for promo display */

/* have currently got these as element specific CLASS selectors - only for use with DIV */

div.promoPanel {
   position: relative; 
	width: 175px; 
	height: 175px; 
	top: 10px; 
	margin-bottom: 10px;
	background-color: #CCCCCC; 
}

div.promoLinks {
    position:relative; 
	 width:175px; 
	 top:10px; 
	 margin-bottom:10px; 
	 text-align:right; 
}

div.actionText {
   position:relative; 
	padding: 5px 0px 0px 5px;
   
}


/* 3. ID SELECTORS for structural use */

#container {
   width: 750px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	
}

#navigation {
  width: 750px;
  margin: 0 54px; /*top and bottom are 0; left and right are 54*/
  
}

#banner {
  width: 750px;
}

/* used to divide the navigation from the main content on pages where there is no banner */

#divider {
  width: 750px;
  border-bottom: 1px solid #990066;
} 

#contentArea {
  float: left; 
  width: 565px;
  padding: 10px 5px 5px 5px; 
  background-color: #ffffff;
}  

#promoArea {
  float: left;
  width: 175px;
  background-color:#ffccff;
} 

#footer {
  width: 750px;
  text-align: right;
  border-top: 1px solid #990066;
}   

#columnWrapper {
  overflow: hidden;
}   

#columnWrapper2 {
  overflow: hidden;
  background-color: #ffccff;
}   

/* 4. CLASS SELECTORS */
/*    setting CLASSES that can be applied to different elements or groups of elements */

/* the clearfloat class is placed on a div or break element and is the final element before the close of the container that 
   contains the float */

.clearfloat { 
	 clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}


.center {
   text-align: center;
}

.bold {
    font-weight: bold;
}