/*----------------------------------------------------------------------
   AUTHOR:  	BAC Software Consulting LLC - Boutros AbiChedid 
   START DATE:  June 03, 2008
   PURPOSE: 	Stylesheet for computer screen. Styles for print and 
   			    projector are separate.
				This Stylesheet is a high contrast layout intended for 
				people with visual impairement.
-----------------------------------------------------------------------*/
 
/*************** 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:red;
	margin-left:auto; 
	margin-right:auto;
	padding-left:5%;
	padding-right:5%;
	text-align: center;
}

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

/* Kept the image sizes in px, safest way. Since I declared the main div to be fixed and not fluid. */
#topimg img, #bottomimg img { 
	width: 780px;
	height: 26px;
}

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

.menu{
	margin-bottom: 58px;
	background:#fff;
	font: 1.0em/1.6  Arial, Helvetica,'Trebuchet MS', Verdana, sans-serif;
	color: inherit;  
}

.menu ul li{
	float:right;
	width: auto;
	list-style:none;
	padding:4px;	
    text-transform: uppercase;
	font-weight: normal;
	color: inherit;   /* this to satisfy Opera */
	background:#444;   /* this to satisfy Opera */
}

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

.menu a:hover, a:active{
	color:#222;
	background:#cccc3d;
	text-decoration:none;
}

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

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

#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;
	
}

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

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

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

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

body {
	padding:0.5em 1em 1em;
	background-color: #222;
	color:#ddd;  
	font:90%/1.5 Verdana,Geneva,Arial,Helvetica,sans-serif;
	letter-spacing:1px;
}
/* **** This is the backgroung with the old 'company name' pictures

body#back {
	background: #444 url(../images/background.gif) repeat;
	color: inherit;
}

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

body#back2 {
	background: #444 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:#444 url(../images/backgroundlogo_highcontrast.png) repeat-x fixed;
	color: inherit;
}

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

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

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

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

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

#wrapper{
	width:780px;
	margin:5px auto;
	background:#444;
	color: #ddd;
}

#content{
	clear:both;
	margin:0px;
	padding:7px 13px 7px 13px;
	color: #ddd;
	background:#222;
	border-right: 2px inset #FFF;
	border-bottom: 2px inset #FFF;
	border-left: 2px outset #FFF;
	border-top: 2px outset #FFF;
	text-align:justify;
}

.time {
	text-align:center;
	margin: 0 0 15px 480px;
	padding: 2px;
	font: italic normal 1.0em "Courier New", Courier, monospace;
}

div#switch a , div#switch a:link { 
   padding: 0px;
   text-align:center;
   color: #EE2;
   background-color: inherit;
   border: 2px solid #66A933;
   float:left;
   width: 315px;
   margin: 0 0 15px 0;
   font-size: 0.9em;
}

div#switch a:hover, div#switch a:active {
	font-weight: bold;
	text-decoration: none;
	border: 2px solid #FFF;
	color:#000;
	background:#dddd3d;
}

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

h1,h2,h3 {
	font-weight:bold;
	color:#ddd;
	background-color: inherit;
	font-family:Helvetica,Arial,Geneva,sans-serif;
	letter-spacing:2px;
}

h1 {
	font-size:1.6em;
	line-height:1.2;
	margin:0 0 0.625em;
}

h2 {
	font-size:1.32em;
	margin:1.4em 0 0;
}

h3 {
	font-size:0.9em;
	text-transform:uppercase;
}

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

h2.resume_subheader {
	font-size:0.9em;
	text-transform:uppercase;
}

p  {
	padding-left:5px;
}

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

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

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

#content a:hover, a:active{
	color:#000;
	background:#dddd3d;
	text-decoration:none;
	font-weight:normal;
}

blockquote {
	padding:10px 25px 5px 25px;
	margin:2em 2em;
	color: inherit;
	background:#444 url(../images/blockquotewhite.gif) top left no-repeat;
	font: 1.0em "Courier New", Courier, monospace;
	text-align: justify;
}

#updated { 
	margin-right: 35px;
	font-weight:bold;
	font-size: 0.85em;
	font-variant:small-caps;
}

#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: #FFF;
	padding:3px;
	background-color: #444;
}

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

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

span.header_info {
	font-size: 105%;
	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:#D7D7D7; 
	color: black;
}

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

.submit_clear {
	width:150px;
	margin-right:20px; 
	color:#000;
	background-color:#eaeaea; 
	font-weight:bold; 
	font-size: 1.1em;
	padding:2px;
}

div.right img {
	display: inline;
}

img#signature {
	margin-bottom: 10px;
	height: 1.68em;
	width: 11.68em;
}

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

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

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

div.center a:hover {
	font-weight:normal;
}

/*********** 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 white;
}

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

table.experience th {
    font-size:0.9em;
    border: 1px solid #000;
    text-align:center;
	padding-bottom:4px;
}

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

tr.darkerth th {
	border: 2px solid white;
    font-variant:small-caps;
    font-size:1.1em;
}

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

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

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

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

#leftcolumn { 
   padding: 7px;
   margin: 2px 380px 2px 2px;
   font-size:0.82em;
   text-align: justify;
}

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

#leftcolumn a, #leftcolumn a:link	{
	color: #ee2;
	background-color: inherit;
	text-decoration: none;
	display: inline;
	padding: 0;
}
	
#leftcolumn a:hover	{
	color: #000;
	background-color: #dddd3d;
	text-decoration: none;
}
       
#rightcolumn { 
   padding: 7px;
   float: right;
   width: 355px;
   margin: 2px;
   font-size:0.82em;
   text-align: justify;
   clear: both;
}

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

#rightcolumn a, #rightcolumn a:link	{
	color: #ee2;
	background-color: inherit;
	text-decoration: none;
	display: inline;
	padding: 0;
}
	
#rightcolumn a:hover {
	color: #000;
	background-color: #dddd3d;
	text-decoration: none;
}

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

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

p.alert { 
	margin: 0 auto; 
	padding:0 3% 2% 3%;
	text-align: center;
}

/**************** 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/bulletwhite.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;
   float:left;
   width: 340px;
   margin: 0;
   font-size:1em;
   text-align: left;
}

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

#attachment th {
   border-bottom:3px ridge yellow;
   color: #222;
   background-color: #ddd;
   padding: 2px 5px;
}

#attachment td {
   border-bottom:1px groove white;
   padding: 2px 5px;
}

/************ 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;	
}

#footer a:link {
	color: #ee2;
	background-color: inherit;
	text-decoration: none;
}
 
#footer a:visited {
	color: red;
	background-color: inherit;
	text-decoration:none;
} 

#footer a:hover, #footer a:active  {
	color: #000;
	background-color: #dddd3d;
}

#footer a:hover  {
	font-weight: normal;
}

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

#footer p + p {
    font-variant: small-caps;
	font-weight: normal;
	font-size:0.9em;
}

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

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

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

/************ 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; 
}
.center {
	text-align: center;
	margin: 20px auto 18px auto;
}

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

.oblic {
	font-style:oblique;
	font-variant: small-caps;
}
.tab {
	margin-left: 30px;
	margin-bottom: 5px;
}

.onethirdtab {
	margin-left: 10px;
}

.bottomspace {
	margin-bottom: 10px;
}

.yellow {
	color:#ff0;
	background-color: inherit;
}

/* 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: #ddd; 
   background-color: #ddd;
   width: 52%;
   height: 1.2pt;
   text-align: center;
   margin: 10px auto;
}

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

.clearboth {
	clear:both;
}

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

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