/* basic css file for Abraham Translations v.01 fixed layout, based on flash site from graphicsolutions.de. Messy css and the html is not quite semantic to enable a layout close to the original.  Oh yeah, the ems should work, but double check the calcs for the em to pixel correspondence.  Once IE (sigh) and Opera get on board for CSS3 border-radius, and once @font-face becomes usable, much can be simplified. Of course, by that time this site will have undergone a radical redesign anyhow. ^_^ Sandra Mello 2009 */

/* To quickly find styled sections use ' =NAV'  in find. */

/* Elements are styled in the following order: 

RESET browser defaults
 
ANCHOR links

CONTAINER

SIDEBAR wrapper for branding and navigation

BRANDING

NAVigation

CONTENT  wrapper for language tools and main content

TOOLS

MAIN

CONTACT

CLIENTS

PROJECTS including jQuery styles

BIO  special styling for the biography pages

IMPRINT 

SITEINFO aka footer    


*/

/* =RESET browser defaults for more predictable cross-browser behavior. Based on Eric Meyer's css reset from 2008-Feb-12.  */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	font-size: 100%;   /* = 100% of the default browser size (usually set at 16px). Use percent in body for cross-browser compatibility, then use em for the rest of css to let users of older browsers (IE7 and older, Firefox 2x) increase text size when needed.  */
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}


body {
	background-color: #800000; /* red */
	color: #000000;
	font-family:  Helvetics, Arial, sans-serif;
	font-size: 100%;
	font-weight: normal;
	height: 100%;   /* tells IE height is the same as viewport (for IE through 7) */
	line-height: 1;  /* factor by which line-height is calculated in rest of doc */
}


ol, ul {
	list-style: none;
}

img {	
	display: block;
	border: none;
	margin: 0;
	padding: 0;
}

img.header {    /* images used as headers in client pages  */
	float: left;
	margin: 0;
	padding: 0 10px 10px 0;
}


blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
}




/* =CONTAINER containing block for sidebar (branding and navigation), plus content (language switch, main content, siteinfo). Two-column floated format. ------------------------------------------ */

#container {
	height: 100%;     /* to ensure a border can be drawn around floats */  
	width: 901px;     /* Width needed to center content in IE6 and IE7, size is from original layout */
	margin: 0 auto;   /* centers content. See ie5.css for IE5 overrides to center. */
	padding: 0;
	background-color: #800000;
	color: #000000;
}

/* =SIDEBAR containing the LOGO and its link to the home page plus NAVIGATION  */

#sidebar {	
	float: left;   /* both the sidebar and content are floated left next to each other */
	margin: 0;
	padding: 0;
	width: 150px;   /* width determined by 130px logo */
}


/* =BRANDING =Logo
---------------------------------------- */

#branding {
	padding: 30px 0 30px 0;  /* adds top and bottom padding to logo */
	margin: 0;	
}

#branding p {          /* A paragraph is used to contain the logo image. */
	font-size: 1em;
	margin: 0;
	padding: 0;
}


#branding a:link {     /* used to make the logo a clickable link back to the home page. */
	background: #800000;
	color: #000000;
	margin: 0;
	padding: 0;
	text-decoration: none;
}



/* =NAV global navigation menu contained in a left floating sidebar. 
------------------------------------------- */

#navigation {
	background-color: #800000;
	color: #000000;
	font-size: 1em;
	margin: 0;	
	padding: 0;
}


#navigation ul {
	line-height: 1.7;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* as per web standards, the current page does not link back to itself, but is styled to look like the other navigation links.  */

li.current {
	background-color: #800000;
	color: #FFFFFF;            /* white */	
	margin: 0;
	padding: 3px 0 2px 10px;  /* uses same settings as links */
}


/* Styling for navigation links (anchors). For some reason Opera will not style the :link or :visited using black. Works in other browsers. */
#navigation  a {
	background: #800000;    /* red */
	color: #000000;         /* black */
	display: block;         /*  makes the entire area around the link clickable */
	margin: 0;
	padding: 3px 0 2px 10px;
}
	

#navigation a:link   {
	color: #000000;         /* black */
	text-decoration: none;
}

#navigation a:visited {
	color: #000000;         /* black */
	text-decoration: none;
}

/* Accessibility aid for keyboard and certain assistive device users using forms and fields. IE6 and 7 do not support this pseudo-class */


#navigation a:focus {
	color: #FFA500;            /* orange  */
	text-decoration: underline;
}

#navigation a:hover {
	color: #FFA500;             /*  orange */         
	text-decoration: underline;  /* underlines link when hovering */
}


/* IE6, 7 has no support for the pseudo-class focus; it uses active instead */
#navigation a:active {
	color: #FFA500;            /* orange */
	text-decoration: underline;
}





/* =CONTENT wrapper to float the language switch tools (english / deutsch) main content, and footer.
------------------------------------- */

#content {
	background-color: #800000;
	color: #000000;
	float: left;   /* floats just to the right of the sidebar. */
	margin: 0;
	padding: 0;
	width: 751px;     /* width determined by original site's graphics */
}

/* =TOOLS are "english/deutsch" links and Bryin's autograph. 
---------------------------------------------------------- */

#tools {
	background: #800000 url(../images/bordertop.gif) bottom right no-repeat; /* This background image is used as the top of the 'main' div (rounded corners). The other one is in 'siteinfo' */
	color: #000000;	
	margin: 0;
	padding: 15px 0 48px 40px;
}

 /* To line up images, which are normally block-level elements,  display is set as inline. */
#tools  img {
	display: inline; 
	padding: 0 0 0 30px; 
}

#tools a:link {
	background-color: #800000;
	color: #000000;
	padding: 0 80px 0 35px;
	text-decoration: none;
}

#tools a:visited {
	background-color: #800000;
	color: #000000;
	padding: 0 80px 0 35px;
	text-decoration: none;
}

#tools a:hover   {
	background-color: #800000;
	color: #FFA500;
	text-decoration: underline;
}

#tools a:focus  {
	background-color: #800000;
	color: #FFA500;
	text-decoration: underline;
}

#tools a:active {
	background-color: #800000;
	color: #FFA500;
	text-decoration: underline;
}


/* =MAIN content for each page. Can use border: 5px solid #540000; for rectangle. 
Original Padding on homepage: 90px 100px 100px 100px;
------------------------------------- */

#main {
	background: #FFFFFF url(../images/bordersides.gif) repeat-y;  /* uses a background image for the sides */
	color: #2D2D2D;  /* very dark grey - enough contrast to be readable. */  
	margin: 0;
	padding: 20px 80px 30px 80px; 
}


#main h1 {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.7;
	margin: 0;
	padding: 0 0 1em 0; 
}


#main h2, #main h3 {
	font-size: 0.875em;  /* gives 14px with browser default */
	font-weight: bold;
	line-height: 1.7;
	margin: 0;
	padding: 1.5em 0 0.5em 0;
}

#main h4 {
	font-size: 0.875em;  /* gives 14px with browser default */
	font-weight: bold;
	line-height: 1.7;
	margin: 0;
	padding: 1em 0 1em 0;
}

#main h2 {
	clear: left;   /* drops the rest under the homepage image */
}


#main p  {
	font-size: 0.875em;  /* gives 14px with browser default */  
	line-height: 1.7;    /* increased line height for readbaility */
	margin: 0;
	padding: 0.5em 0 0.5em 0;
}




/* =ANCHOR page links - global styles. The order the psuedo-styles are listed is important, although there is some disagreement on placing 'focus' before or after 'hover'.  
The links set here are used in the MAIN CONTENT. See nav, tools, and siteinfo for navigation links.
------------------------------------------------------------------------------ */
#main a {
	background-color: #FFFFFF;     /* white  */
}

#main a:link {
	color: #990000;                /* darker red */
	text-decoration: none;
}



#main a:visited {
	color: #660C00;  				/* burgundy */ 
	text-decoration: none;
}

/* Accessibility aid for keyboard and certain assistive device users using forms and fields. IE6 and 7 do not support this pseudo-class */

#main a:focus {
	color: #FFA500;
	text-decoration: underline;
}

#main a:hover {
	color: #FFA500;					/* orange */
	text-decoration: underline;    
}


/* IE6, 7 has no support for the pseudo-class focus; it uses active instead */


#main a:active {
	color: #FFA500;
	text-decoration: underline;
}

/* Lists */

#main ul, #main ol {
	margin: 0;
	padding: 0.5em 0 0 0;
}
	

#main li {
	font-size: 0.875em; /*This sets the size for all following elements: h2-6, p, nested lists as long as they are set to 1em which means the same as the parent.  */
	margin: 0;
	padding: 0.5em 0 0.5em 0;
}

/* The following are set to font-size 1em to keep the size the same as li for any number of nested lists, ie. h, p, li li,  li li li etc. */ 
 
#main ul h2, #main ul h3, #main ol h2 {
	font-size: 1em;		
}

#main ul ul, #main ol ul  {
	font-size: 1em;	
}

#main ul ul ul {				/* giving sub-lists space */
	padding: 2em 0 3em 0;
}

#main ul p, #main ol p, #main li p {
	padding: 10px 0 ;
	font-size: 1em; 
}

#main li li {
	font-size: 1em;         /* this keeps nested list sizes from shrinking */
}

#main p.sub {		         /* for notes at the bottom of the links page */
	clear: both;
	color: #696969;          /* lighter grey */
	font-size: 0.750em;      /* 12px at browser default */
	padding-top: 2em;
}

img#ba  {					/* styles the floated graphic on the homepage */
	float: left;
	margin: 0;
	padding: 0 32px 16px 0;
	border: none;
}

/* =CONTACT  includes vcard*/

div.vcard {
	background: #FFFFFF url(../images/information.gif) no-repeat top right;
	width: 100%;
}

.vcard p {
	font-size: 0.875em;
	padding: 0;
	margin: 0;
	}

#hcard-BA-en, #hcard-BA-de {
	padding-bottom: 1em;
}

#hcard-BA-en h2, #hcard-BA-de h2 {
	font-size: 1em;
	font-weight: bold;
	padding-top: 0;
}

#hcard-BA-en h3, #hcard-BA-de h3 {
	font-size: 0.875em;
	font-weight: bold;
	padding-top: 0;
}

#hcard-BA-de span.type {
	display: none;
	}




/* =CLIENTS Special styling to float images and use inline lists. */

#clients li {
	clear: both;
	padding: 1em 0 1em 0;
	}

#main h2.leftfloat {
	float: left;
	padding: 0 30px 0 0;
}

#main ul.leftfloat li {
	display: inline;
	line-height: 2;
	padding-right: 1.5em;
}

#main h2.rightfloat {
	float: right;
	padding: 0 0 0 30px;
}

#main ul.rightfloat li {
	display: inline;
	line-height: 2;
	padding-right: 1.5em;
}




/* =PROJECTS. Based on #Main div: These pages requires extra divs to accomodate the original design with the image of the Projectman. */


#projects {
	background: #FFFFFF url(../images/bordersides.gif) repeat-y;  /* uses a background image for the sides */
	color: #2D2D2D;
	height: 100%;
	margin: 0;
	padding: 10px;
}

/* A div created to contain another background image since the border is needed in the 1st div. Can be circumvented with border-radius when Opera & IE get on board. */
#projects #pix {
	background: #FFFFFF url(../images/projectman2.gif) no-repeat 95% 0%;
	color: #2D2D2D;
	margin: 0;
	padding: 0;
}

#pix a:link {	
	background-color: #FFFFFF;
	color: #990000;      /* dark red */
	text-decoration: none;
}

#pix a:visited {	
	background-color: #FFFFFF;
	color: #660C00;
	text-decoration: none;
}

#pix a:focus {
	background-color: #FFFFFF;
	color: #FFA500;
	font-weight: bold;
	outline: .5em;
}

#pix a:hover {
	background-color: #FFFFFF;
	color: #FFA500;
	text-decoration: underline;
}


#pix a:active {
	background-color: #FFFFFF;
	color: #FFA500;
}



#pix h1 {
	font-size: 1em;        /* gives 16px with browser default settings */	
	line-height: 1.7;
	margin: 0;
	max-width: 400px;      /* Keeps the headline out of the Projectman */
	padding: 10px 0 1em 60px;
}

#pix h2 {
	font-size: 1em;   /* gives 16px with browser default settings */
	line-height: 1.7;
	max-width: 400px;
	margin: 0;
	padding: 0 0 0.5em 60px;   /* padding for header, not jquery link inside! */
}

 #pix h3 {
	font-size: 1em;   /* gives 16px with browser default settings */
	line-height: 1.7;
	max-width: 400px;
	margin: 0;
	padding: 0.5em 20px 0.5em 60px;
}

#pix p {
	font-size: 0.875em;  /* gives 14px with browser default */  
	line-height: 1.7;    /* increased line height for readbaility */
	margin: 0;
	max-width: 400px;
	padding: 0 0 1em 60px;
}


#pix ul {
	list-style-type: none;
	margin: 0;
	padding: 0 10px 1em 60px;
}

#pix ul ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

#pix li {
	font-size: 0.875em;  /* gives 14px with browser default */
	line-height: 1.3em;  /* gives 18px line-height (16 x 0.875) x 1.3  */
	max-width: 400px;
	margin: 0;
	padding: 0 0 0.50em 0;
}

#pix li li {
	font-size: 1em;      /* keeps nested lists the same font-size */
}

/*
 .demo {
  margin: 0;
  padding: 1.5em 1.5em 0.75em;
  border: 1px solid #ccc;
  position: relative;
}
*/

/* =jQUERY CSS for jQuery */
.collapse {
	padding: 0 20px 0 0;
	}
	
.collapse h3:after {			/* adds colon after year */
 	content: ":";
 	}
	
#switch, .switch {
	margin-bottom: 5px; 
	text-align: right;
	}

/* --- jQuery Headings  --- */


/* --- jQuery Links  5px 10px 0   --- */

#pix .expand a {
	background-color: #FFF;
	color: #990000;      /* dark red */
	display: block;
	padding: 0;
	text-decoration: none;
}

#pix .expand a:link, .expand a:visited {
	border-bottom: 1px dotted #990000;
	background-image: url(../images/arrow-down.gif);
	background-repeat: no-repeat;
	background-position: 98% 50%;
	padding: 0;
	text-decoration: none;
}

#pix .expand a:hover, #pix .expand a:focus {
	background-color: #FFF;
	border-bottom: 1px solid #FFA500;
	color: #FFA500;
	padding: 0;
	text-decoration: none;
}

#pix .expand a:active {
	background-color: #FFF;
	border-bottom: 1px solid #FFA500;
	color: #FFA500;
	padding: 0;
	text-decoration: none;
	}
	
#pix .expand a.open:link, .expand a.open:visited {
	border-bottom: 1px solid #FFA500;
	background: #FFF url(../images/arrow-up.gif) no-repeat 98% 50%;
	color: #FFA500;
	padding: 0;
	text-decoration: none;
}



	




/* The main Project Page navigation menu  
#projects .current {
	color: #FFA500;
	font-size: 0.875em;  
	margin: 0;
	padding: 0;
}


#projects #menu  ul {   
	list-style-type: none;
	margin: 0;
	padding: 20px 0 0 0;
	text-align: center;
}

#projects #menu  li {
	display: inline;
	font-size: 0.8750em;  
	margin: 0;
	padding: 2em 1em 0 1em;
}

#projects #menu  li a:link {
	font-size: 0.875em; 
	margin: 0;
	padding: 0;		
	text-decoration: none;
}


#projects #menu  a:hover {
	background-color: #FFFFFF;
	color: #FFA500;
	text-decoration: underline;
}

#projects #menu  a:focus {
	background-color: #FFFFFF;
	color: #FFA500;
	font-weight: bold;
	text-decoration: underline;
}

#projects #menu  a:active {
	background-color: #FFFFFF;
	color: #FFA500;
	text-decoration: underline;
}

#projects #menu  li.current {	
	font-size: 0.875em; 
	margin: 0;
	padding: 0;
}

*/
	

/* =BIO styling instead of #main for the biography pages. These pages consist of images that should degrade gracefully into alt text. */

#bio {
	background: #FFFFFF url(../images/bordersides.gif) repeat-y;  /* uses a background image for the sides */
	color: #2D2D2D;
	margin: 0;
	padding: 0;
	text-align: center;
}

#bio h1 {                      /* This is being replaced with an image in the html pages */
	font-size: 1.125em;
	padding: 0.5em 0 1em 0;
}


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

#bio img {
	display: inline;
}

#bio ul {                    /* dates are an inline list */
	list-style-type: none;
	margin: 0;
	padding: 20px 0 0 0;
}

#bio li {
	display: inline;
	font-size: 0.8750em;  /* gives 14px with browser default */
	margin: 0;
	padding: 0;
}

#bio li.current {	
	/*  font-size: 0.875em;  14px  at default browser size */
	background-color: #FFFFFF;	
	color: #000000;    /* current in black */
	font-weight: normal;
	margin: 0;
	padding: 0 1em;
}

#bio li a:link {
	background-color: #FFFFFF;
	color: #990000;			/* red */
	font-weight: normal;
	margin: 0;
	padding: 0 1em;		
	text-decoration: none;
}

#bio li a:visited {
	background-color: #FFFFFF;
	color: #990000;
	font-weight: normal;
	margin: 0;
	padding: 0 1em;		
	text-decoration: none;
}

#bio li a:focus {
	background-color: #FFFFFF;
	color: #FFA500;
	text-decoration: underline;
}

 
#bio li a:hover {
	background-color: #FFFFFF;
	color: #FFA500;
	text-decoration: underline;
}


#bio a:active {
	background-color: #FFFFFF;
	color: #FFA500;
	text-decoration: underline;
}


/* =LINKS */

ul#linked {
	background: #FFFFFF url(../images/strongsmile.gif) bottom right no-repeat 
	}
	
	
/* =IMPRINT */
ul#banking {
	list-style-type: disc;
	padding: 0 0 1.5em 3em;
	}

#banking li {
	padding-left: 1em;
	}


/* =SITEINFO Site Information aka Footer with copyright, <address> and a link to Inhaltverzeichnis aka Site Map.  */

#siteinfo {
	background: #800000 url(../images/borderbottom.gif) top right no-repeat;   /* the top border image will appear to be the bottom background of the 'main' div. */
	color: #000000;
	margin: 0;
	padding: 0;
	text-align: center;
}
	
#siteinfo ul {	
	color: #000000;
	padding: 60px 0 20px 0;
}

#siteinfo li {
	display: inline;
	font-size: 0.750em;
	margin: 0;
	padding: 0;
}


#siteinfo ul li address {
	display: inline;
	font: normal 1em  Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
}

#siteinfo li a:link {
	text-decoration: none;
	background-color: #800000;
	color: #000000;				/* black */
}

 #siteinfo li a:visited {
 	background-color: #800000;
	color: #000000;				
	text-decoration: none;
}


#siteinfo li a:hover {
	background-color: #800000;
	color: #FFA500;  			/* orange */
	text-decoration: underline;
}

#siteinfo li a:focus {
	background-color: #800000;
	color: #FFA500;   			/* orange  */
	text-decoration: underline;
}

#siteinfo li a:active {
	background-color: #800000;
	color: #FFA500;  			 /* orange  */
	text-decoration: underline;
}

#siteinfo li.current {	
	background-color: #800000;
	color: #FFFFFF;				 /* white */
	font-size: 0.750em;  /* 12 px at default browser setting of 16px  */
	/*  padding: 5px 0 3px 10px;  uses same settings as active links */
}