/* CSS positioning classes for MKiD by Michael Kurtz  Aug 2004*/

/* part 1 of the centering hack this setting also sets the baseline for the font size for the site.*/
body {
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	font-size:1em;
	margin-top:10px;
	padding:0px;
	float:none;
	clear:none;
}
table {
	font-size:.90em;
	text-align: left;
}


/*  the classes below control how links appear through the site unless they are controlled specifically via other claesses */
a, a:visited {
	text-decoration:none;
	color:#000000;
	font-weight:bold;
}
a:hover {
	color:#000000;
	background-color: #66CCFF;
	text-decoration:none;
}

b {
	color:#111111;
}

.listLinks{
	text-decoration:none;
	color:#BCBCBC;
	font-weight:normal;
	font-size:.6em;
	line-height:1.5em;
	background-image:url(../images/css/arrow.gif);
	background-position:right top;
	background-repeat:no-repeat;
	padding:2px 18px 2px 0px;
}

.linksSmall, .linksSmall:visited{
	background-image:url(../images/css/arrow.gif);
	background-position:left;
	background-repeat:no-repeat;
	height:18px;
	padding-left:20px;
	text-indent:18px;
	text-decoration:none;
	color:#000000;
	font-weight:normal;
	font-size:.9em;
}
/* the container that holds the contents of the page  - set the width to equal the width you want*/
#containerDiv {
	margin:0px auto;
	padding:0px;
	width:96%;
	/* part 2 of the centering hack*/
	text-align:left;
	clear:none;
	float:none;
}

/* the values of the header div. Use a separate css class to control the color, but use this declaration to control all else. Use the background image attribute to add the logo to the header.*/
#headerDiv {
	width:100%;
	height: 50px;
	padding: 5px 0px 0px 0px;
	margin:0px auto;
	float:none;
	text-align: right;
	/*border-bottom:1px solid #ABABAB;*/
}

#mkidHeaderDiv{
	width:380px;
	height: 38px;
	margin:0px auto;
	float:left;
	clear:left;
	background-image: url(../images/headers/brand3/header2.gif);
	background-repeat: no-repeat;
	background-position: 6px 5px;
}

/*the following classes are used to control just the color of the header on the various pages, the second class  is used to control which of the header graphics is used. This allows you to control the look of the header based on the css file not by changing the HTML.*/
.headerDivGreen{
	background-color: #FFFFFF;
}
#headerImgGreen{
	/*background-image:url(../images/headers/brand2/welcome_header.gif);
	background-position:right;
	background-repeat:no-repeat;*/
	padding-top:0px;
	height:54px;
}

.headerDivOrange{
		background-color:#FFFFFF;
}
#headerImgOrange{
	background-image:url(../images/headers/brand2/about_header.gif);
	background-position:right;
	background-repeat:no-repeat;
	padding-top:15px;
}

.headerDivRed{
		background-color:#FFFFFF;
}
#headerImgRed{
	background-image:url(../images/headers/brand2/portfolio_header.gif);
	background-position:right;
	background-repeat:no-repeat;
	padding-top:15px;
}

.headerDivPurple{
		background-color:#FFFFFF;
}
#headerImgPurple{
	background-image:url(../images/headers/brand2/contact_header.gif);
	background-position:right;
	background-repeat:no-repeat;
	padding-top:15px;
	height:20px;
}

.headerDivBlue{
		background-color:#FFFFFF;
}
#headerImgBlue{
	background-image:url(../images/headers/brand2/customer_header.gif);
	background-position:right;
	background-repeat:no-repeat;
	padding-top:15px;
	height:20px;
}

#youAreHereDiv {
	width:100%;
	height:11px;
	margin:0px auto;
	padding: 0px;
	border-bottom:1px solid #BCBCBC;
}

/*  THE NAVIGATION CLASSES
 the container that holds the horizonal main nav bar also includes the font sizes and styles for the nav buttons note that the colors for the individual buttons are controlled in the nav button classes*/
#navDiv {
	width:100%;
	height:30px;
	margin:0px auto;
	padding: 0px 5px 0px 0px;
	vertical-align:top;
}

/* change the properties of the UL used for the navigation */
#navDiv ul{
	/*width:100%;*/
	margin:0;
	padding:0;
	display:inline;
}

#navDiv li{
	margin:0;
	list-style:none;
	display:inline;
}

.navButtonLine{
	margin:0px auto;
	padding-top:0px;
	background-position: bottom left;
	background-image: url(../images/css/divider.gif);
	background-repeat:no-repeat;
	height: 26px;
}

/*  NAVIGATION BUTTON CLASSES
Meta-nav button classes. The four classes below determine the look of the metanav buttons
*/
#navButton1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	background-color:#bbbbbb;
	width:20%;
	height:26px;
	text-indent: 15px;
	float:left;
	padding:5px 0px 0px 0px;
	text-align: left;
	margin: 0px auto;
	background-image: url(../images/css/header_blend.jpg);
	background-repeat: no-repeat;
	background-position: 0;
	cursor: hand;
	border-bottom:1px solid #FFFFFF;
	display:block;
}

#navButton2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	background-color: #aaaaaa;
	width:20%;
	height:26px;
	text-indent: 15px;
	float:left;
	padding:5px 0px 0px 0px;
	text-align: left;
	margin: 0px auto;
	background-image: url(../images/css/header_blend.jpg);
	background-repeat: no-repeat;
	background-position: 20%;
	cursor: hand;
	border-bottom:1px solid #FFFFFF;
}

#navButton3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	background-color: #999999;
	width:20%;
	height:26px;
	text-indent: 15px;
	float:left;
	padding:5px 0px 0px 0px;
	text-align: left;
	margin: 0px;
	background-image: url(../images/css/header_blend.jpg);
	background-repeat: no-repeat;
	background-position: 40%;
	cursor: hand;
	border-bottom:1px solid #FFFFFF;
}

#navButton4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	background-color: #666666;
	width:20%;
	height:26px;
	text-indent: 15px;
	float:left;
	padding:5px 0px 0px 0px;
	text-align: left;
	margin: 0px;
	background-image: url(../images/css/header_blend.jpg);
	background-repeat: no-repeat;
	background-position: 60%;
	cursor: hand;
	border-bottom:1px solid #FFFFFF;
}

#navButton5 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	text-decoration:none;
	color:#FFFFFF;
	background-color: #444444;
	width:20%;
	height:26px;
	text-indent: 15px;
	float:left;
	padding:5px 0px 0px 0px;
	text-align: left;
	margin: 0px ;
	cursor: hand;
	background-image: url(../images/css/header_blend.jpg);
	background-repeat: no-repeat;
	background-position: 80%;
	border-bottom:1px solid #FFFFFF;
	display:block;
}
/*the class below is used to control the hover state of all the nave buttons above*/
#navButton1:hover, #navButton2:hover , #navButton3:hover , #navButton4:hover , #navButton5:hover  {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.7em;
	font-weight:bold;
	text-decoration:none;
	color:#666666;
	background-color:rgb(250,250,250);
	text-indent: 19px;
	float:left;
	padding-top:5px;
	text-align: left;
	margin: 0px;
	background-image: url(../images/css/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0px 4px;
	cursor: hand;
	border-bottom:1px solid #CDCDCD;
}


/* THE CONTAINER CLASSES*/
/* the container that holds the main page content located between header & nav and footer this class also sets the default font for any of the text use in the site*/
#mainContentDiv {
	width:100%;
	background-color:#FFFFFF;
	float:left;
	clear:none;
	margin: 0px auto;
	padding-top:8px;
	vertical-align:top;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.75em;
	color:#333333;
	text-decoration:none;
	text-align:left;
	/*border:1px solid #898989;*/
}


/* the container that holds the footer information*/
#footerDiv {
	width:100%;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: .65em;
	color:#666666;
	float:none;
	clear:left;
	margin-top: 15px;
	padding-top:20px;
}

/* The classes below are used in the template  :: layoutA :: */
/* the class below is for the main content part that is 60% of the width */
#mainDivA {
	width:56%;
	height:400px;
	margin: 0px auto;
	padding:0px;
	float:left;
	text-align:center;
	clear:none;

}

/* the class below is for the main content part that is 40% of the width */
#sideDivA {
	width:40%;
	margin: 0px auto;
	padding:0px;
	float:right;
	font-size:1em;
	clear:none;
}
#sideDivA a{
	font-style:normal;
	font-weight:normal;
	text-decoration:none;
	/*border-bottom:1px dotted #787878;*/
	color:#333333;
	font-size:1em;
}

/* The classes below are used in the template  :: layoutB :: */
/* the class below is for the main content part that is 50% of the width */
#mainDivB {
	width:58%;
	margin: 0px auto;
	padding:0px;
	float:left;
	clear:none;
	z-index:10
}

/* the class below is for the smaller content part that is 30% of the width */
#sideDivB {
	width:20%;
	margin: 0px auto;
	padding:0px;
	float:right;
	clear:none;
	background-color:#FFFFFF;
	z-index:99;
}

/* the class below is for the section containing the list of links that is 30% of the width */
#navDivB {
	width:19%;
	margin: 0px auto;
	padding:0px 2px 0px 5px ;
	float:right;
	clear:none;
	z-index:100;
}

/* The classes below are used in the template  :: layoutC :: */
/* the class below is for the main content part that is 80% of the width */
#mainDivC {
	width:80%;
	margin: 0px auto;
	padding:0px;
	float:left;
}

/* the class below is for the navigation list that is 20% of the width */
#navDivC {
	width:20%;
	margin: 0px auto;
	padding:0px;
	float:right;
}

/* The classes below are used in the template  :: layoutD :: */
/* the class below is for the main content part that is 50% of the width and centered on the page */
#mainDivD {
	width:50%;
	margin: 0px auto;
	padding:0px ;
	float:left;
	clear:none;
}
#spacerDivD{
	width:25%;
	margin: 0px auto;
	padding:0px ;
	float:left;
	clear:none;
}
#portfolioBlurb{
	font-size:1em;
	width:17%;
	margin: 0px auto;
	padding:0px 9px 0px 0px ;
	float:left;
	clear:none;
	background-image:url(../images/css/arrow.gif);
	background-repeat:no-repeat;
	background-position: bottom left;
}

/*SIDEBAR CLASSES
the following classes control the look of the sidebar list of links
with the line around it*/

#sb_top_left{
	margin:0px auto;
	background-image:url(../images/css/sb_upper_left.gif);
	background-repeat:no-repeat;
	background-position:top left;

}

#sb_top_right{
	margin:0px auto;
	background-image:url(../images/css/sb_upper_right.gif);
	background-repeat:no-repeat;
	background-position:top right;

}

#sb_header{
	background-color:#C7C7C7;
	color:#666666;
	margin:0px auto;
	padding:0px ;
	text-indent:11px;
	font-size:.95em;
	font-weight:normal;
	line-height:2em;
	
}
#sb_header2{
	background-color:#DEDEDE;
	color:#333333;
	text-indent:8px;
	font-size:.9em;
	line-height:1.5em;
	width:100%;
}

#sb_left{
	margin:0px auto;
	padding:0px;
	background-image:url(../images/css/grey_pixel.gif);
	background-repeat: repeat-y;
	background-position:left;
	float:none;
	width:100%;
}

#sb_right{
	margin:0px auto;
	padding:0px;
	background-image:url(../images/css/grey_pixel.gif);
	background-repeat: repeat-y;
	background-position:right;
	float:none;
	width:100%;
}

#sb_text{
 	color:#333333;
	font-size:.9em;
	padding:0px 5px 0px 8px;
	margin:0px auto;	
	float:none;
	line-height:1.3em;
 }
 #sb_image{
 	text-align:center;
	float:none;
	width:100%;
	border-bottom:1px solid #333333;
	margin-bottom:5px;
 }
 
#sb_bottom{
	margin:0px auto;
	background-image:url(../images/css/grey_pixel.gif);
	background-repeat: repeat-x;
	background-position:bottom;	
	font-size:1em;
	color:#353535;
	text-decoration:none;
	float:none;
	width:100%;
}
#sb_bottom_left{
	margin:0px auto;
	background-image:url(../images/css/sb_bottom_left.gif);
	background-repeat:no-repeat;
	background-position:bottom left;
	float:none;
	width:100%;
}
#sb_bottom_right{
	margin:0px auto;
	background-image:url(../images/css/sb_bottom_right.gif);
	background-repeat:no-repeat;
	background-position:bottom right;
	text-align:center;
	float:none;
	width:100%;
}

/* NAVIGATION LIST CLASSES 
these next classes are used to define the look and behaviour of the vertical list of links 
(differnt from the meta nav at the top) */
#navListUL{
	list-style-type:none;
	list-style-position:outside;
	margin:0px auto;
	padding:3px 4px 3px 6px;
	text-indent:0em;
	color:#DDDDDD;
}

#navListUL li{
	width:95%;
	padding-bottom:2px;
	border-bottom:1px solid #CCCCCC;
	margin-bottom:2px;
	font-weight:normal;
	display: list-item;
	line-height:1em;
}

#navListUL li:hover, a:hover{
	background-color: #C0DFEB;
}

#navListUL a, a:visited{
	font-size:.85em;
	text-decoration:none;
	color:#000000;
}


/*  Other classes */
/* The following   classes control the way the main categories in the portfolio  section */
.greySquareDiv1:hover, .greySquareDiv2:hover, .greySquareDiv3:hover, .greySquareDiv4:hover {
	width:140px;
	height:140px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	color:#000000;
	text-decoration:none;
	background-color:#CCCCCC;
	border:1px solid #AAAAAA;
	margin:1px;
	padding:5px 0px 0px 0px;
	text-indent:5px;
	background-image:url(../images/css/grey_pixel.gif);
} 

.greySquareDiv1 {
	width:140px;
	height:140px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	margin:1px;
	padding:5px 0px 0px 0px;
	text-indent:5px;
	color:#000000;
	text-decoration:none;
	background-color:#FFFFFF;
	border:1px solid #DDDDDD;
	background-image:url(../images/css/interactiondesign.gif);
	background-position:bottom;
	background-repeat:no-repeat;
}

.greySquareDiv2 {
	width:140px;
	height:140px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	margin:1px;
	padding:5px 0px 0px 0px;
	text-indent:5px;
	color:#000000;
	text-decoration:none;
	background-color:#FFFFFF;
	border:1px solid #DDDDDD;
	background-image:url(../images/css/graphicdesign.gif);
	background-position:bottom;
	background-repeat:no-repeat;
}

/*  not used currently
.greySquareDiv3 {
	width:140px;
	height:140px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	color:#FFFFFF;
	text-decoration:none;
	background-color:#CCCCCC;
	border:1px solid #AAAAAA;
	margin:1px;
	padding:5px 0px 0px 0px;
	text-indent:5px;
	color:#000000;
	text-decoration:none;
	background-color:#FFFFFF;
	border:1px solid #999999;
	background-image:url(../images/css/productdesign.gif);
	background-position:bottom;
	background-repeat:no-repeat;
}
*/

.greySquareDiv4 {
	width:140px;
	height:140px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	margin:1px;
	padding:5px 0px 0px 0px;
	text-indent:5px;
	color:#000000;
	text-decoration:none;
	background-color:#FFFFFF;
	border:1px solid #DDDDDD;
	background-image:url(../images/css/personalprojects.gif);
	background-position:bottom;
	background-repeat:no-repeat;
}

/* FORM ELEMENT STYLES*/
/* the classes below are used to control the appearance of the elements in forms for example in the client login page */

#formLabel {
	width: 30%;
	text-align:right;
	font-weight:bold;
	float:left;
	clear:left;
	margin:2px;
}
#formElement {
	width: 50%;
	text-align:left;
	float:left;
	margin:2px;
}

.buttons {
	background-color:#EFEFEF;
	background-image:url(../images/css/button_bkgnd.gif);
	background-repeat:repeat;
	font-size:1em;
	color:#333333;
	border-top:1px solid #333333;
	border-bottom:1px solid #111111;
	border-right:1px solid #111111;
	border-left:1px solid #333333;
	padding:2px 6px 2px 6px;
}

.textFieldDynamic {
	background-color:#FFFFFF;
	color:#666666;
	border-top:1px solid #000000;
	border-bottom:1px solid #999999;
	border-right:1px solid #666666;
	border-left:1px solid #222222;
	width:98%;
	padding:2px;
}

/* PROCESS CLASSES
these classes are used on the page where we describe the process that we go through */
#phaseOne{
	border:1px solid #333333;
	background-color:#E3E3E3;
	padding:10px;
	margin:5px;
	color:#333333;
}

#phaseTwo{
	border:1px solid #333333;
	background-color:#dadada;
	padding:10px;
	margin:5px;
	color:#333333;
}

#phaseThree{
	border:1px solid #333333;
	background-color: #C4C4C4;
	padding:10px;
	margin:5px;
	color:#333333;
}

#phaseFour{
	border:1px solid #333333;
	background-color:#A7A7A7;
	padding:10px;
	margin:5px;
	color:#333333;
}

.helpLink{
	text-decoration:none;
	color:#333334;
	font-weight:bold;
	cursor:help;
	/*background-image:url(../images/css/question.gif);
	background-position:bottom right;
	background-repeat:no-repeat;
	padding-right:15px;*/
}
.helpLink:visited{
	text-decoration:none;
	color:#333334;
	font-weight:bold;
	cursor:help;
	/*background-image:url(../images/css/question.gif);
	background-position: right;
	background-repeat:no-repeat;
	padding-right:15px;*/
	font-size:1em;
}

.helpDiv{
	width:250px;
	color:#333333;
	background-color: #EFEFEF;
	border:1px solid #333333;
	padding:10px 5px 3px 10px;
	display:none;
	z-index:99;
	position:absolute;
	top:25%;
	left:35%;
}

#errorDiv {
	background-color:#ffffff;
	color:#990000;
	text-transform:uppercase;
	padding:10px;
}

/* the class for the hit counter div */
#hitCounterDiv{
	float:left;
	width:100%;
	visibility:hidden;
	display:none;
}
/* the class for the floating annoucement div */
#announcementDiv{
	z-index:200;
	position:absolute;
	top:0px;
	right:0px;
	background-color:transparent;
}
.annoucementDivA:hover{
	background-color:transparent;
}