/*****************************************************/
/*   Design:  Your WEBcrew.com                          */
/*            Stylesheet for screen rendering        */
/*---------------------------------------------------*/
/*   Author:  Stacie Johnstun                            */
/*   Email:   stacie@yourwebcrew.com                        */
/*   Date:    January 28, 2008                         */
/*---------------------------------------------------*/

body {
	font-size: 62.5%; 
	margin: 0em auto; 
	padding: 0em; 
	background-color: #F6F6F6;
	font-family: "trebuchet ms", verdana, arial, sans-serif;
}

#page-container {
	width: 795px; 
	margin: 0px auto; 
	padding: 0px; 
	background-image: url(../images/bg.gif);
	background-repeat: repeat-y;
	background-position: top center;
}

/**********************/
/* SECTION 2 - HEADER */
/**********************/

/*--------------------------------------*/
/* Section 2.1 - Global navigation menu */
/*--------------------------------------*/

.nav-global-container { 
	float: right; 
	margin-right:20px;
	width: 250px; 
	padding: 5px 15px 0px 0px; 
	background-color: #FFFFFF; 
}

.nav-global ul {	
	float: right; 
	margin: 0px; 
	padding: 0px; 
	list-style: none;
}	

.nav-global li {
	float: left; 
	white-space: nowrap; 
	text-transform: uppercase;
}

.nav-global li a {
	display: block; 
	margin: 0px; 
	padding: 0px 5px 0px 5px; 
	border-right: solid 1px rgb(150,150,150); 
	background-color: rgb(255,255,255); 
	color: rgb(150,150,150); 
	text-decoration: none; 
	font-size: 100%;
}

.nav-global a:hover {
	background-color: rgb(255,255,255); 
	color: #333333; 
	text-decoration: underline;
}

.nav-global a:visited {
	color: #333333; 
	text-decoration: underline;
}

/*--------------------------------------*/
/* Global navigation menu staff         */
/*--------------------------------------*/

.nav-global-container-staff  { 
	float: right; 
	margin-right:20px;
	width: 400px; 
	padding: 5px 15px 0px 0px; 
	background-color: #FFFFFF;
}
/*------------------------------------*/
/* Section 2.3 - Main navigation menu */
/*------------------------------------*/

#header {
	position: relative;
	width: 100%;
	height: 3em;
	width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
	font-size: 100%;
}

#header ul#primary {
	margin-left: 15px;
	padding: 0px;
	position: absolute;
	bottom: -1px;
	width: 55em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#header ul#primary li  {
	display: inline;
	list-style: none;
}



#header ul#primary a,#header ul#primary span,#header ul#primary a.current {
	width: 8.5em;
	display: block;
	float: left;
	padding: 4px 0;
	margin: 1px 2px 0px 0px;
	text-align: center;
	font-family: tahoma, verdana, sans-serif;
	text-decoration: none;
	color: #333333;
}

#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
	border: 1px solid #666;
	border-bottom: none;
	background: #cccccc;
	padding-bottom: 6px;
	margin-top: 0;
}

#header ul#primary a {
	background: #F9F9F9;
	border: 1px solid #AAA;
	border-bottom: none;
}

#header ul#primary a.selected {
	background: #666666;
	border: 1px solid #AAA;
	border-bottom: none;
	color: #FFFFFF;
}

#header ul#primary a:hover {
	margin-top: 0;
	border-color: #666;
	background: #CCCCCC;
	padding-bottom: 5px;
}

#header ul#secondary {
	position: absolute;
	margin: 0;
	padding: 2px;
	bottom: -1.4em;
	left: 0px;
	width: 756px; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
	background: #FEFEFE;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	border-top: 1px solid #666;
}

#header ul#secondary li a,#header ul#secondary li span {
	width: auto;
	display: block;
	float: left;
	padding: 0 10px;
	margin: 0;
	text-align: auto;
	border: none;
	border-right: 1px dotted #AAA;
	background: #FEFEFE;
}

#header ul#secondary li a {
	color: #0665A8;
	text-decoration: underline;
}

#header ul#secondary li a:hover {
	color: #0665A8;
	background: transparent;
	padding: 0 10px;
	border: none;
	border-right: 1px dotted #AAA;
}

#header ul#secondary li a:active {
	color: #0665A8;
	background: transparent;
}

#header ul#secondary li a:visited{ 
text-decoration: undeline; 
color: #333333;
}

#header ul#secondary li:last-child a { border: none; }


/*-----------------------------------*/
/* Logo */
/*-----------------------------------*/

.logo {
	width: 300px; 
	height: 115px;
	margin-top: 0px; 
	margin-left: 10px; 
	padding: 0px;
}

/*-----------------------------------*/
/* phone */
/*-----------------------------------*/

.chat {
	float: left;
	width: 161px;
	height: 60px;
	margin-top: -80px;
	margin-left: 600px;
	padding: 0px;
	background: #FFCCFF;
}

.banner {
	float: left;
	margin-top: -80px;
	margin-left: 500px;
	padding: 5px;
}

.phone {
	float: right;
	width: 140px;
	height: 50px;
	margin-top: -50px;
	margin-right: 15px;
	padding: 20px 10px 0px 30px;
	font-size: 175%;
	font-weight: bold;
	color: #0066CC;
	background-repeat: no-repeat;
	text-align: center;
}

/*-----------------------------------*/
/* Section 2.2 - Banner */
/*-----------------------------------*/

#img-header {
	float: left; 
	width: 760px; 
	height: 170px; 
	margin-left: 15px; 
	margin-top: 5px;
	border-right: 1px solid #666;
	border-left: 1px solid #666;
	border-bottom: 5px solid #666;
	background-image: url("../images/banner_bg.jpg");
	background-repeat: repeat-x;
	background-position: top left;
	z-index: 10;
}

.flash {
	float: left;  
	margin-top: 5px;
	padding: 0px 0px 0px 0px; 
	background: inherit;
	color: #333333;
	font-size: 16pt;
}

.ad {
	float: right;  
	margin-top: 20px;
	padding: 0px 5px 0px 0px;
	background: inherit;
}

.button {  
	padding: 80px 0px 0px 360px;
}

.portfolio {  
	padding: 30px 0px 0px 80px;
}
/*************************************/
/* SECTION 3 - FRONT-PAGE SIDEBANNER */
/*************************************/

.img-sidebanner {
	width: 160px; margin: 0px; padding: 0px; border: none;
}

.container-content-sidebar {
   float: left; 
   width: 761px; 
   margin-left: 15px; 
   padding: 0px; 
   background-color: #FFFFFF;
   border-left: 1px solid #666;
}

.container-content-sidebar-staff {
   float: left; 
   width: 761px; 
   margin-left: 15px; 
   padding: 0px; 
   background-color: #FFFFFF;
   border-top: 1px solid #666;
   border-left: 1px solid #666;
}

/* IE6-hack for min-height. Also works for IE7-Beta2 */
* html .container-content-sidebar {
	height: 400px;
} 
/* End IE-Hack */

/* Put a buffer between sub-navigation column and      */
/* main-navigation so that the global page background  */
/* color does not come through in this place           */

.buffer {
 	float: left; 
	width: 160px; 
	height: 20px; 
	margin: 0px; 
	padding: 0px; 
	background-color: rgb(255,255,255);	
}

/***********************/
/* SECTION 6 - CONTENT */
/***********************/

/*--------------------*/
/* Section 6.1 - Size */
/*--------------------*/

.content {
	float: left; 
	width: 550px; 
	margin: 0px; 
	padding: 5px 0px 0px 10px; 
	background-color: #FFFFFF;	
}

/*-------------------------*/
/* Section 6.2 - Pagetitle */
/*-------------------------*/

.content-pagetitle {
	width: 390px; 
	margin: 0px 0px 10px 0px; 
	padding: 0px;
}

.content-pagetitle p {
	padding: 0px; 
	margin: 0px; 
	font-weight: 
	bold; font-size: 140%;
}

/*----------------------------------*/
/* Section 6.3 - Extra container    */
/*----------------------------------*/
/* To ensure that no problems arise */
/* with right and left floatings    */
/* and make the implementation      */
/* robuster.                        */
/*----------------------------------*/

.contentbox-container-full {
	 float: left; 
	 width: 550px; 
	 margin: 0px 0px 1.5em 0px; 
	 padding: 0px;
	 background:#FFFFFF;
}

.contentbox-container-left {
	float: left; 
	width: 220px; 
	margin: 0px 0px 1.5em 0px;
	padding: 0px;
}

.contentbox-container-right {
	float: right; 
	width: 220px; 
	margin: 0px 0px 1.5em 0px; 
	padding: 0px;
}

/*-----------------------------*/
/* Section 6.4 - Content title */
/*-----------------------------*/

.contentbox-title-noshading-noline {
	display: block; 
	margin: 0px; 
	padding: 0px; 
	background-color: transparent; 
	text-transform: none; 
	font-weight: bold; 
	font-size: 150%;
}

.contentbox-title-noshading-line {
	display: block; 
	margin: 0px 0px 0.2em 0px; 
	padding: 0px; 
	border-bottom: solid 2px rgb(135,135,135); 
	background-color: transparent; 
	text-transform: none; 
	font-weight: bold; 
	font-size: 150%;
}

.contentbox-title-shading {
  	margin: 0px; 
	padding: 1px 0px 2px 3px; 
	background-color: rgb(225,225,225); 
	font-weight: bold; font-size: 150%;	
}

/*--------------------------------*/
/* Section 6.5 - Contentbox size  */
/*--------------------------------*/

/* No shading */
.contentbox-noshading {
	margin: 0px; 
	padding: 0.7em 0px 0px 4px; 
	background-color: #FFFFFF;
}

/* Shading */
.contentbox-shading {
	margin: 0px; 
	padding: 7px 10px 5px 10px; 
	background-color: transparent;
}

/*-------------------------------*/
/* Section 6.6 - Contentbox text */
/*-------------------------------*/

/* Heading */
h1 {
	clear: left; margin: 1.0em 0px 1.0em 0px; font-weight: bold; font-size: 150%;
}

h2 {
	clear: left; margin: 1.5em 0px 1.0em 0px; font-weight: bold; font-size: 140%;
}

h3 {
	clear: left; margin: 1.0em 0px 0.6em 0px;	font-weight: bold; font-size: 130%;
}

h4 {
	clear: left; margin: 0.5em 0px 0.5em 0px;	font-weight: bold; font-style: italic; font-size: 130%;
}

/* Paragraph text */
p {
   clear: left; margin: 0em 0px 0.5em 0px; padding: 0px; font-size: 130%;
}

/* Quote */
p.quote {
   clear: left; margin: 0em 30px 0.6em 30px;	line-height: 120%; font-size: 120%;
}

/* Embedded */
.embed {
   float: left; width: 120px; margin: 2px 7px 2px 0px; padding: 5px 5px 5px 5px; background-color: rgb(225,225,225); font-style: italic; font-weight: bold;  line-height: 1.2em; font-size: 180%;
}

.embed-caption {
   float: left; margin: 5px 0px 0px 0px; padding: 0px; font-style: italic; font-weight: normal; line-height: 1.2em; font-size: 50%;
}

/* Unordered list */
.content ul {
	margin: 0px 10px 0px 10px; 
	padding: 0px 0px 0px 10px; 
	list-style-type: disc; 
	list-style-position: outside; 
	font-size: 130%;
}

/* Ordered List */
.content ol {
	margin: 0px 10px 0px 17px; padding: 0px 0px 0px 30px; list-style-type: decimal; list-style-position: outside; font-size: 130%;
}

/*--------------------------*/
/* Section 6.7 - Datatables */
/*--------------------------*/

.menu {
	clear: left; 
	width: 400px;
	margin: 0.5em 0px 0.2em 10px; 
	border: none; 
	empty-cells: show; 
	border-collapse: collapse; 
	background-color: #ffffff;
	font-size: 100%;
}

.update {
	clear: left; 
	width: 400px;
	margin: 0.5em 0px 0.2em 10px; 
	border: solid 1px rgb(150,150,150); 
	
	background-color: #ffffff;
	font-size: 120%;
}

.timesheet {
	clear: left; 
	width: 650px;
	margin: 0.5em 0px 0.2em 10px; 
	border: none; 
	empty-cells: show; 
	border-collapse: collapse; 
	background-color: #CCCCCC;
	color: #FFFFFF;
	font-size: 80%;
}

.tabledata {
	clear: left; 
	width: 540px;
	margin: 0.5em 0px 0.2em 10px; 
	border: solid 1px rgb(150,150,150); 
	empty-cells: show; 
	border-collapse: collapse; 
	background-color: #ffffff;
}

.tabledata tr {
	margin: 0px; 
	padding: 0px;
}

.tabledata td {
	padding: 0px; 
	border: solid 1px rgb(150,150,150); 
	text-align: center; 
	font-size: 120%;
}

.tabledata th {
	margin: 0px; 
	padding: 2px 7px 2px 7px; 
	border: solid 1px rgb(150,150,150); 
	empty-cells: show; 
	text-align: left; 
	font-size: 120%; 	
}

p.tabledata-caption {
	margin: 0em 0px 10px 30px;
	padding: 0px; 
	clear: both; 
	text-align: left; 
	font-size: 120%;
}

/*----------------------*/
/* Section 6.8 - Images */
/*----------------------*/

/* No border */
.img-left-noborder {
	float: left; margin: 0.3em 7px 3px 0px;
}

img {
	border: none;
}

/* Border */
.img-left-border {
	float: left; margin: 0.3em 7px 3px 0px; border: solid 1px rgb(150,150,150);
}

.img-right-border {
	float: right; margin: 0.3em 0px 3px 7px; border: solid 1px rgb(150,150,150);	
}

/***********************/
/* SECTION 7 - SIDEBAR */
/***********************/

.sidebar {
	 float: right; 
	 width: 200px; 
	 margin: 0em 0px 0em 0px; 
	 padding: 5px 0px 0px 0px; 
	 background-color: #FFFFFF;
	 border-right: 1px solid #666;
}

.sidebar-staff {
	 float: right; 
	 width: 75px; 
	 min-height: 500px;
	 margin: 0em 0px 0em 0px; 
	 padding: 5px 0px 0px 0px; 
	 background-color: #FFFFFF;
	 border-right: 1px solid #666;
}
/*-----------------------*/
/* Section 7.2 - Textbox */
/*-----------------------*/

.sidebarbox-noborder {
	float: right; 
	width: 170px;
	margin: 0em 10px 1.0em 0px; 
	padding: 0px;
	border: solid 1px rgb(200,200,200);
	background-color: #FFFFFF;
	text-align: center;
}

.sidebarbox-border {
    float: right;
	width: 165px; 
	margin: 0px 10px 1.0em 0px; 
	padding: 4px 4px 4px 4px; 
	border: solid 1px rgb(200,200,200);
	background-color: #FFFFFF;
}

/*-----------------------------*/
/* Section 7.3 - Textbox title */
/*-----------------------------*/

.sidebarbox-title-noshading-noline {
	 display: block; 
	 margin: 0px 0px 0.5em 0px; 
	 padding: 1px 0px 1px 0px;
	 font-weight: bold; 
	 font-size: 120%;
}

.sidebarbox-title-noshading-line {
	display: block; 
	margin: 0px 0px 0.5em 0px; 
	padding: 1px 0px 1px 0px; 
	border-bottom: solid 1px rgb(135,135,135); 
	background-color: transparent; 
	font-weight: bold; 
	font-size: 120%;
}

.sidebarbox-title-shading {
	display: block; 
	margin: 0px 0px 0.5em 0px; 
	padding: 2px 5px 2px 5px; 
	background-color: #0665A8; 
	font-weight: bold; 
	font-size: 120%;
	text-align: center;
}

/*------------------------------*/
/* Section 7.4 - Paragraph text */
/*------------------------------*/

.sidebarbox-noborder p {
	margin: 0px 4px 0.4em 4px; 
	padding: 0px; 
	background-color: transparent; 
	font-size: 110%;
	border: 5px;
}

.sidebarbox-border p {
	margin: 0px 0px 0.4em 0px; 
	padding: 0px; 
	background-color: transparent; 
	font-size: 110%;
}

/*------------------------------*/
/* Form */
/*------------------------------*/
.form {
	color: #333333;
	font-size: 100%;
	color: #666666;
}

.submit {
	background: #FF5C00;
	color: #CCCCCC;
	font-size: 60%;
}

input {
	line-height: 18px;
}

.option {
font-size: 90%;
color: #666666;
}
/**********************/
/* SECTION 8 - FOOTER */
/**********************/

.footer {
	clear: both; 
	width: 760px; 
	margin: 0em 0px 0px 15px; 
	padding: 5px 0px 5px 0px; 
	border-right: solid 1px #666; 
	border-left: solid 1px #666;
	border-bottom: solid 1px #666; 
	background-color: #ffffff; 
	text-align: center;	
}

/***************************************************/
/* SECTION 9 - HYPERLINKS FOR NON-NAVIGATION TEXTS */
/***************************************************/

.content a, .sidebar a {
	color: #0665A8; 
	text-decoration: underline;
}

.content a:hover, .sidebar a:hover {
	color: rgb(110,110,110); 
	text-decoration: none;
}

.content a:visited, .sidebar a:visited {
	color: #0665A8;
}

.footer a {
	color: rgb(150,150,150); text-decoration: underline;
}

.footer a:hover {
	color: rgb(0,0,0); text-decoration: none;
}

/********************************/
/* SECTION 10 - GENERIC CLASSES */
/********************************/

/*------------------------------------------*/
/* Section 10.1 - Global default fonts      */
/*------------------------------------------*/
/* Only applied to the main div-statements  */
/* for the basic page regions.              */
/*------------------------------------------*/

.nav-global-font {
	font-size: 1.0em;
}

.nav-main-font {
	font-size: 1.0em;
}

.nav-sub-font {
	font-size: 1.0em;
}

.content-font {
	font-size: 1.0em; 
	line-height: 1.7em; 
	color: rgb(110,110,110);
}

.sidebar-font {
	font-size: 1.0em; 
	line-height: 1.4em; 
	color: rgb(110,110,110);
}

/* Percentage value does not work in "footer", so we     */
/* cannot give the normed size of "1.0em" here and scale */
/* it up inside the "footer". Thus we define the final   */
/* font-size here the way it will appear on screen.      */
.footer-font {
	font-size: 1.1em; color: rgb(150,150,150);
}

/*--------------------------------------*/
/* Section 10.2 - Horizontal alignments */
/*--------------------------------------*/

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

/*-------------------------------------*/
/* Section 10.3 - Title decoration box */
/*-------------------------------------*/

.box-on {
	float: left; 
	width: 1.0em; 
	margin-right: 0.2em; 
	padding-left: 0.3em;
}

.box-off {
	display: none;
}

/*---------------------------*/
/* Section 10.4  Text colors */
/*---------------------------*/

/* Basic Colors */
.txt-white {
	color: rgb(255,255,255);
}

.txt-black {
	color: rgb(0,0,0);
}

/* Grey */
.txt-grey01 {
	color: rgb(242,242,242);
}

.txt-grey02 {
	color: rgb(230,230,230);
}

.txt-grey03 {
	color: rgb(217,217,217);
}

.txt-grey04 {
	color: rgb(204,204,204);
}

.txt-grey05 {
	color: rgb(191,191,191);
}

.txt-grey06 {
	color: rgb(178,178,178);
}

.txt-grey07 {
	color: rgb(153,153,153);
}

.txt-grey08 {
	color: rgb(127,127,127);
}

.txt-grey09 {
	color: rgb(89,89,89);
}

.txt-grey10 {
	color: rgb(51,51,51);
}

/* orange */
.txt-orange01 {
	color: #FF5C00;
}

.txt-orange02 {
	color: rgb(253,249,201);
}

/* Blue */
.txt-blue01 {
	color: #0665A8;
}

/* Red */
.txt-red01 {
	color: rgb(252,235,233);
}

/*---------------------------------*/
/* Section 10.5 - Background colors */
/*----------------------------------*/

/* Basic Colors */
.bg-white {
	background-color: rgb(255,255,255);
}

.bg-black {
	background-color: rgb(0,0,0);
}

/* Grey */
.bg-grey01 {
	background-color: #F6F6F6;
}

/* Orange */
.bg-orange01 {
	background-color: color: #FF5C00;
}

.bg-orange02 {
	background-color: #FF9900;
}

/* Blue */
.bg-blue01 {
	background-color: #77BFEF;
}

.bg-blue02 {
	background-color: #24A4FB;
}

/******************************/
/* SECTION 11 - MISCELLANEOUS */
/******************************/

/* Horizontal line */
hr {
	clear: both; width: 425px; height: 1px; border: none;
}

/* HTML-code examples */
.showcode {
  font-family: monospace; font-weight: bold; font-size: 13px; color: rgb(255,0,0);
}

/* Hide HTML-tags. Good when no pagestyle supported by browser */
.hide {
	display: none;
}

br {
	clear: both;
}