/*-----------------------------------------------------------------------
   AUTHOR:  	BAC Software Consulting LLC - Boutros AbiChedid 
   START DATE:  May 02, 2008
   PURPOSE: 	Stylesheet for computer screen. Styles for print and 
   			    projector are separate.
				This Stylesheet is a normal contrast layout intended for 
				the general population. The page layout is not fluid, which
				is not optimal.
-------------------------------------------------------------------------*/
 
/*************** Master Reset - This is not set in stone ***************/
html,body,div, span, ul, ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input  { 
	margin: 0;
	padding: 0; 
}

body {
	font-size: 16px; /* In general set this to 100% which means it will take the default browser's font settings, but I am using em all over. 1em=16px */
}

h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { 
	font-weight: normal; 
	font-style: normal; 
}

img { 
	border: none; 
}
caption,th { 
	text-align: left; 
}
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
}

/*************** Header -- Top of the Page ***************/

div#error { 
	background-color:inherit; 
	color:#FF1355;
	margin-left:auto; 
	margin-right:auto;
	padding-left:5%;
	padding-right:5%;
	text-align: center;
}

div#error span { 
	font-size: 130%;
	font-weight: bold;
}

/* Changed the error image dimensions to em (1em = 16 px) to increase/decrease with font increasing/decreasing.  */
div#error img { 
	width: 1.3125em;
	height: 1.25em;
}

/* Here I Kept the image sizes in px, safest way. Since I declared the main div to be fixed and not fluid.
It does not work if changed to em (1em = 16 px). 
Default font size for IE 7 and Firefox 3 is 16px, which is equivalent to 1 em. IE represents this font size as "medium" text.    */

#topimg img, #bottomimg img { 
	width: 780px;
	height: 26px;
}

div#header img { 
	width: 51px;
	height: 51px;
}

img.arrow {
	padding: 0px;
	display:inline;
	border: 0px;
}

.menu {
	margin-bottom: 54px;
	background:#fff;
	font-size:1.1em;
	color: inherit;  
}

.menu ul li {
	float:right;
	width: auto;
	list-style:none;
	padding:4px;	
    font-variant: small-caps;
	font-weight: normal;
	font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
}

.menu a {
	background-color:inherit;
	color: #696969;
	padding:3px;
	text-decoration:none;
}

.menu a:hover, a:active {
	color:#3a4a3f;
	background:#cfc9bd;
	text-decoration:none;
}

.menu a:hover {
	font-weight:normal;
	font-size:1.0em;
}

#header{
	clear:both;
	height:58px;
	width:780px;
	float:left;
}

#header img{
	display:inline; 
	margin:0;
	padding: 0 5px;
}

#header h1 {
	display:inline; 
	font: 29px/1.2em 'Kristen ITC', 'Tempus Sans ITC', 'Marker Felt', Arial, sans-serif; 
	font-style:italic; 
	font-weight: bold;
	vertical-align: top;
}

p#topimg {
   margin: 0;
   padding:0;
}

p#bottomimg {
   margin: 0 0 8px 0;
   padding:0;
}

/**************** Main Content ****************/

body#back, body#back1, body#back2 {
	background-color: inherit;
	color:#1B1B1B;  
	cursor: default;
	font:0.94em 'Trebuchet MS', Arial, sans-serif;
}
/* **** This is the background with the old 'company name' pictures
body#back {
	background: #F1F1F1 url(../images/background.gif) repeat;
	color: inherit;
}

body#back1 {
	background: #F5F5F5 url(../images/background1.gif) repeat;
	color: inherit;
}

body#back2 {
	background: #F5F5F5 url(../images/background2.gif) repeat;
	color: inherit;
*** end ****/


/* **** Background with the new Logo picture fixed in the backround - keep #back1, even if it is redundant
DOES NOT LOOK GOOD IN IE6 + DISPLAY DIFFERENTLY WITH DIFFERENT MONITOR SIZES.
body#back {
	background: #F5F5F5 url(../images/backgroundlogo.png) repeat-x fixed;
	color: inherit;
}

body#back1 {
	background: #F5F5F5 url(../images/backgroundlogo.png) repeat-x fixed;
	color: inherit;
}

body#back2 {
	background: #F5F5F5 url(../images/backgroundlogo.png) no-repeat fixed;
	color: inherit;
}
*** end ****/

/* Background with NO pictures - keep #back1, and #back2 even if it is redundant*/
body#back {
	background-color: #F5F5F5;
	color: inherit;
}

body#back1 {
	background-color: #F5F5F5;
	color: inherit;
}

body#back2 {
	background-color: #F5F5F5;
	color: inherit;
}

#wrapper {
	width:780px;
	margin:10px auto;
	background:#F9F9F9;
	color: inherit;
}

#content {
	clear:both;
	border-left:2px groove #008000;
	border-right:2px ridge #003366;
	border-bottom:2px solid #3a4a3f;
	border-top:2px solid #3a4a3f;
	margin:0px;
	padding:7px 13px 7px 13px;
	color:inherit;
	background:#FDFDFD;
	font:0.9em Arial, Tahoma, sans-serif;
	text-align:justify;
}

div#switch a ,div#switch a:link { 
   padding: 2px;
   text-align:center;
   float:left;
   width: 280px;
   margin: 0 0 15px 0;
   font-size: 1.0em;
   border: 1px solid #66A933;
}

div#switch a:hover {
	font-weight: bold;
	text-decoration: none;
	border: 2px solid #009;
}

#content p:first-letter {
	background-color: inherit;
	color: #cc0033;
	font-size: 1.3em;
	padding-left:15px;
}

h1, h2, h3{
	color:#3a4a3f;
	background-color: inherit;
}

h2.resource_header{
	text-align: center;
	color:#3a4a3f;
	background-color: #eaeaea;
	margin: 8px 0 8px 0;
	padding: 2px;
	font-weight:bold;
	font-size:1.0em;
}

h1{
	font-size:1.4em;
	padding:0 0 4px;
}

h2{
	font-size:1.2em;
	padding:3px;
	font-variant: small-caps;
	margin-top: 1.0em;
}

h3{
	font-size:1.0em;
	padding:3px;
}

h2.resume_subheader {
	font-size:1.0em;
	font-variant: normal;
}

p{
	padding-left:5px;
}

p.ref{
	text-align:right;
	font-size:0.8em;
}

#content a, #content a:link{
	background-color:inherit;
	color:#6E6E6E;
	padding:0 3px;
	text-decoration:none;
}

#content a:visited {
	color: red;
	background-color: inherit;
} 

#content a:hover , #content a:active {
	color:#2B403F;
	background:#cfc9bd;
	text-decoration:none;
}
/* This is not used at the moment. Keep it. 
blockquote{
	padding:5px 10px 5px 25px;
	margin:15px 25px;
	background:#EDEFE9 url(../images/blockquote.jpg) top left no-repeat;
	font: 1.0em "Courier New", Courier, monospace;
	text-align: justify;
	color: inherit;
}
*/

/* Changed the blockquote image dimensions to em (1em = 16 px) to increase/decrease with font size.  */
td.fullwidth img { 
	width: 1.25em;
	height: 1.25em;
}

#content ul, ol{
	padding:5px 10px 5px 40px;
}

#content ul{
	list-style:circle;
}

#content ol{
	list-style:lower-roman;
}

#decimal ol{
	list-style:decimal;
}

#answers dl dt {
	font-weight:bold;
	margin: 8px 5px;
	padding: 5px;
}

input, textarea, select{
	border:2px solid #E2E7FF;
	color:#6B707A;
	padding:3px;
	background-color: inherit;
}

input:hover, textarea:hover, select:hover{
	border:2px dashed #707070;
}

/* for this declarations IE behaves differently than Mozilla, Safari, and Opera */ 
input:focus, textarea:focus, select:focus{
	border:2px solid #707070;
}
/*----*/

span.header_info {
	font-size: 85%;
	color: #006;
	background-color: inherit; 
	font-style: italic;
}

span.header_info_big {
	font-size: 165%;
}

span.red {
	color:red;
	background-color:inherit;
	font-size: 120%;
}
legend.main {
	color: #517ed3;  
	background-color: inherit; 
	font-size: 1.2em;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}

table {
	text-align:center;
	margin: auto;
}

table th{
	padding: 3px;
	background-color:#eaeaea; 
	color: inherit;
}

table tr td{
	padding-left:10px;
	padding-top:4px;
	padding-bottom: 4px;
	text-align:left;
}

.submit_clear {
	width:140px;
	margin-right:20px; 
	color:#000;
	background-color:#eaeaea; 
	font-weight:bold; 
	padding:3px;
}

div.right img {
	display: inline;
}

.check li{
   list-style: url(../images/check.png);
   padding: 2px 0 5px 0;
}

.checkblue li{
   list-style: url(../images/checkblue.png);
   padding: 2px 0 5px 0;
}

/*********** rounded corners blockquote ***********/

table#roundedblock {
	background-color: #EDEFE9;
	width: 88%;
	border: 0;
	font: 0.84em "Courier New", Courier, monospace;
	text-align: justify;
	border-collapse: collapse; 
	color: inherit;
}

#roundedblock  td , #roundedblock tr {
	padding: 0;
	margin:0;
	border: 0;
}  

#roundedblock td.fillwidth {
	width: 100%;
}

table#roundedblock img {
	border: 0;
	background-color: #EDEFE9;
	color: inherit;
	
}

#updated { 
	margin-right: 35px;
	font-weight:bold;
	font-size: 0.9em;
	font-variant:small-caps;
}
/* 1em = 16px */
img#signature {
	margin-bottom: 10px;
	height: 1.68em;
	width: 11.68em;	
}

/*********** bottom menu ***********/

div.center ul li {
	float:left;
	width: auto;
	list-style:none;
    font-variant: small-caps;
	font-weight: normal;
	padding:1px;	
	font-size: 0.9em;
}

/*********** Table for Portfolio Page ***********/
/* also centering the table */
#tableLayout {
	border: 0px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width: 91%;
}

#tableLayout, #tableLayout td {
	border-collapse: collapse;
}

#tableLayout td {
	padding: 10px;
	 width: 29%;
}
/* Selects any td element that immediately follows a td element that is a descendant of any element 
with an id attribute that equals tableLayout. --- In other words the second td of the table */
#tableLayout td+td {
	 width: 70%;
}

/* 1em is equal to the current font-size of the element in question. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px. */
/* 1em = 16px; Image width = 150px; Image height = 114px; 
Since some of the images are slightly different in size. That's OK, the browser will adjust the image size accordingly But for future websites that is not a good idea for the browser to resize the image.*/
#tableLayout td img{
	border: 2px solid #006699;
	margin-top:7px;
	height: 7.125em;
	width: 9.375em;	
}

/*********** Table for Summary of Experience Page ***********/

table.experience { 
    border-collapse:collapse;
    font-size:1.0em;
    width: auto;
    border: 2px ridge #006;
}

table.experience caption {
     background-color:inherit;
     color:#003399;
	 text-align: center;
	 margin: 0 auto;
	 padding: 3px;
	 font-size:1.26em;
	 font-family: 'Monotype Corsiva', cursive;
}

table.experience th {
    font-size:1.0em;
    border: 1px solid #000;
    text-align:center;
	background-color:#F0F0F0;
    color:inherit;
}

table.experience th acronym {
  cursor: help;
  border-bottom: 1px dashed #000;
}

tr.darkerth th {
    background-color:#DCDCDC; 
	color: inherit;
	border: 2px solid #006;
	font-variant:small-caps;
	font-size:1.1em;
}

table.experience tr { 
   vertical-align: middle;
}

table.experience td {  
    font-size:1.0em;
    background-color:#EFFFDE;
    color:inherit;
    border: 1px solid #999;
    text-align:center;
	padding: 7px 9px;
}

tr.lightertd td {
    background-color:#FDFDFD; 
	color: inherit;
}

/*************** Resources Page *****************/

#leftcolumn { 
   padding: 7px;
   margin: 0px 385px 6px 10px;
   font-size:0.93em;
   text-align: justify;
}

#leftcolumn ul {
	margin-left:5px;
}

#leftcolumn a, #leftcolumn a:link {
	color: #5A89CF;
	background-color: inherit;
	text-decoration: none;
	display: inline;
	padding: 0;
}
	
#leftcolumn a:hover	{
	color: #1B1B1B;
	background-color: #FCFCFA;
	text-decoration: underline;
}
       
#rightcolumn { 
   padding: 7px;
   float: right;
   width: 340px;
   margin: 0 10px 8px 10px;
   font-size:0.93em;
   text-align: justify;
}

#rightcolumn ul {
	margin-left:5px;
}

#rightcolumn a, #rightcolumn a:link	{
	color: #5A89CF;
	background-color: inherit;
	text-decoration: none;
	display: inline;
	padding: 0;
}
	
#rightcolumn a:hover {
	color: #1B1B1B;
	background-color: #FCFCFA;
	text-decoration: underline;
}

.listone li{
   list-style: url(../images/arrow.gif);
   padding: 2px 0 2px 0;
}

.listtwo li{
   list-style: url(../images/arrowgray.gif);
   padding: 2px 0 2px 0;
}

.listthree li{
   list-style: url(../images/arrowgreen.gif);
   padding: 2px 0 2px 0;
}

.listfour li{
   list-style: url(../images/arrowblue.gif);
   padding: 2px 0 2px 0;
}

.listfive li{
   list-style: url(../images/doublearrow.jpg);
   padding: 2px 0 2px 0;
}

.listsix li{
   list-style: url(../images/doublearrowgray.jpg);
   padding: 2px 0 2px 0;
}

.listseven li{
   list-style: url(../images/doublearrowgreen.jpg);
   padding: 2px 0 2px 0;
}

.listeight li{
   list-style: url(../images/doublearrowblue.jpg);
   padding: 2px 0 2px 0;
}

/**************** Resume Page ****************/

.resume_header {
	font-size: 1.4em;
  	font-style: normal; 
	font-variant: small-caps;
	font-weight: bold;
	margin-left: 8px;
	text-align: justify; 
}

.resume_list li {
   list-style: url(../images/bullet.jpg);
   padding: 3px 0 3px 0;
}

.resume_list1 li {
   list-style: url(../images/bulletbrown.jpg);
   padding: 3px 0 3px 0;
}

.resume_list2 li {
   list-style: url(../images/bulletblue.jpg);
   padding: 3px 0 3px 0;
}

.resume_list3 li {
   list-style: url(../images/bulletgreen.jpg);
   padding: 3px 0 3px 0;
}

#resume_name_address {
	text-align: center;
	margin: 20px auto;
}

/* Set padding and margin to ZERO, in order to to keep left and Right columns aligned in all 
browsers and in all versions of IE including standard and compatibility view modes */

#resume_leftcolumn { 
   padding: 0;
   margin: 0;
   float:left;
   width: 320px;
   font-size:0.9em;
   text-align: left;
}

#resume_rightcolumn { 
   padding: 0;
   margin: 0 50px 0 0;
   font-size:0.9em;
   text-align: left;
}

#attachment th {
   border-bottom:3px ridge #A9A9A9;
   padding: 2px 4px;
}

#attachment td {
   border-bottom:1px solid #A9A9A9;
   padding: 2px 4px;
}

/************ response page ************/
#response {
	text-align: center;
	margin: 40px auto 90px auto;
}

/************ Footer -- Bottom of the Page ************/

#footer {
	clear: both;
	margin: 0 auto;
	padding: 5px 5px 0;
	text-align: center;
	border: 0px;	
	color: #808080;
	background-color: inherit;
	font-size: 0.95em;
}

#footer a {
	color: #3a4a3f;
	background-color: inherit;
	text-decoration: underline;
}

#footer a:link {
	color: #008080;
	background-color: inherit;
}
 
#footer a:visited {
	color: #f00;
	background-color: inherit;
} 

#footer a:hover, #footer a:active  {
	text-decoration: none;
	color: #191919;
	background-color: inherit;
}

#footer span {
	font-variant: small-caps;
	font-weight: bold;
	font-size: 1.0em;
}

#footer p + p {
	font-variant: small-caps;
	font-weight: bold;
	color:#003399;
	font-size:0.96em;
	background-color: inherit;
}

a.contact {
	font-size: 0.9em;
}

acronym {
  cursor: help;
  border-bottom: 1px dashed #7B8682;
}

abbr {
  cursor: help;
  border-bottom: 1px dotted #7B8682;
}

/************ General classes ************/

.strong {
	font-weight:bold;
	font-style: normal;
}

.big {
  	font-size: 1.2em;
  	font-style: oblique;  
}

.small {
  	font-size: 0.8em;
	font-variant: normal; 
}

.time {
	text-align:center;
	margin: 0 0 15px 525px;
	padding: 2px;
	color: #009;
	background-color: inherit;
	font: italic bold 0.85em "Courier New", Courier, monospace;
}

.center {
	text-align: center;
	margin: 17px auto 16px auto;
}

.middle {
	text-align: center;
	margin:0 auto;
}


.right {
	text-align: right;
	margin-right: 15px;
	margin-bottom: 6px;
	margin-top: 9px;
}

.oblic {
	font-style:oblique;
	font-variant: small-caps;
}

.underline {
	text-decoration:underline;
}

.tab {
	margin-left: 30px;
	margin-bottom: 5px;
}

.onethirdtab {
	margin-left: 10px;
}

.bottomspace {
	margin-bottom: 8px;
}
/* Here I get a validation warning: "Same color for background-color and color." 
 That's OK since I need to satify all Non IE browsers (i.e. Gecko based browsers.) */
hr.separator {
   color: #3a4a3f; 
   background-color: #3a4a3f;
   width: 47%;
   height: 1.2pt;
   text-align: center;
   margin: 13px auto;
}

#shiftright {
	text-align: right;
	margin: 5px;
}

.clearboth {
	clear:both;
}

.flash {
	text-align: center;
	margin: 10px 175px;
	padding: 8px;
	color: #000033;
	background-color: #E6E6FF;
	font-size: 0.92em;
	font-weight:bold;
}

.flash img{
	display:inline; 
	margin:0;
	padding:0;
	border: 0;
}

.searchbox {
	text-align: right;
	margin: 0;
	padding: 0;
}