img { border: 0; display: block; }
.inlineimage img {display:inline;margin:0 12px;}
.alt {color:#333;}

/* .skiplink {display:none;}
a.hide { position: absolute; left: -9000px; top: 0; }
a.hide:focus, a.hide:active { left: 0; } */

.hidden {display:none;}
.inline {display:inline;}


/* SKIP LINK */
.skip {position: absolute; top: -4em; display: none} /*Opera*/
 html .skip {display: block; position: absolute; top: -4em; left: 0; z-index: 0} /* Seen by IE */
*html:not([dummy]) .skip {display: block; position: absolute; top: -4em; left: 0; z-index: 0} /* Seen by Moz and FF */
.skip a {padding: 0 0.5em; left: 0; width: 14.2em; z-index: 0}
.skip a:focus, .skip a:active {display: inline; z-index: 2; border: solid black 1px; color: #cc0; text-decoration: none; position: absolute; top: 6.5em; left: 0}
.skip a:focus, .skip a:active {display: inline; z-index: 2; border: solid black 1px; color: #cc0; text-decoration: none; position: absolute; top: 7.5em; left: 120px}
.skip a#cont {position: absolute; top: -9em; width: 14.2em}
.skip a#cont:focus, .skip a#cont:active {position: absolute; top: 15em; left: 0em; z-index: 2}
.skip a:hover {cursor: default}


/* skip link html:
<p class="tiny"><a name="top" id="top"></a></p><p class="skip"><a href="accessibility.html" accesskey="0">Accessibility and Access Keys</a></p>
<div id="logo"><img src="communis_logo.gif" width="221" height="40" alt="Communis"/><h1>web accessibility consultancy</h1></div>							

<p class="skip"><a href="#cont" accesskey="1" id="menu" onfocus="mOut();byeAll();">Skip to Content</a></p>

<p class="skip"><a href="#menu" accesskey="2" id="cont" onfocus="mOut();byeAll();">Skip to Navigation</a></p>
*/


body	{
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	color: #000;
	background:#444;
	}
	
body, p {
  font-family:  arial, verdana, sans-serif;
  font-size: 12px;
}

body, body p {
  font-size: x-small;
  voice-family: "\"}\"";
  voice-family: inherit;
  font-size: small;
}
html>body,
html>body p {
  font-size: small;
}  
/* */

#wrapper	{
	margin: 10px  auto ;
	padding: 0;
	border:0;
	width: 900px;
	text-align: left;
background: #444;
height:100%;
	}
	
/* ---------- BANNER ----------- */


#header {position:relative;display:block;width:900px;height:100px;padding:0; margin: 0;
background:  url(../g/header_bg4.gif) top right no-repeat;

}
html>body #header {height:auto;min-height:100px;} 

#banner {position:absolute;left:6px;top:10px;margin:0 ;padding:0;border:0; background: transparent url(../g/newLogo2_o.gif) top left no-repeat;width:200px;height:73px;}
#logo {float:left;position:relative;margin:0;padding:0;border:0;background: transparent url(../g/newLogo2.gif) top left no-repeat;width:200px;height:73px;}
#logo:hover {background: url(../g/newLogo2_o.gif) top left no-repeat;}


/* ---------- Menu ---------- */

#menu {margin:0; padding:75px 0 0 0; height: 30px; width: 900px;}

#menu ul	{display:block;position:relative;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 900px;background:#444;
float:left;
border-top:1px solid #E2E2E2;
	}
html>body #menu ul {height:auto;min-height:30px;}

#menu ul li {	position: relative; float:left;padding:0 ;margin:0;width:auto;}

#menu ul li a {
float:left;
	display: block;
	text-decoration: none;
	color: #E2E2E2;
	padding: 0;
	margin:0 6px;
	font:100 90%/20px arial;
	background: transparent ;
	}
	
#menu ul li a:hover { color: #B2AAA4; }


/* ---------- STRUCTURE ----------- */


#content { position:relative;display:block;margin:0 ; padding:  0;width:900px; border:0;
}

#maincontent {
	position:relative;
	display:block;
	padding: 0;
	border: 0;
	margin:0;
	height:520px;
	width:900px;/* border-bottom:1px solid #E2E2E2; */
		}
html>body #maincontent {height:auto; min-height:516px;}

.left {position:absolute;left:0;top:0;margin:0 0 0 16px;width:50%;}
.left p {width:60%;padding:1em 0;}
.right {margin: 32px 0 0 450px;width:50%;}
.right dl {width:60%;}

#emailform {margin:0 ;}

/* ---------- backgrounds ---------- */


/* ---------- typography---------- */


#maincontent p {font-size:100%;}
#content {font-size:100%;color:#fff;}

h1 {margin:0 0 16px 0; padding:0;font:900 120%/1em arial,serif;color:#695D54;}

h2 {margin:0 0 4px 0; padding:0;font:900 120%/1em arial,serif;}

h3 {margin:0 0 4px 0; padding:0;font-size:100%;font-weight:100;color:#695D54;}

h4 {margin: 0; padding:0;font-size:100%;font-weight:100;color:#695D54;}

h5 {margin: 1em 0; padding:0;font-size:100%;font-weight:100;color:#695D54;}

h6 {}

p#title {float:left;font: italic 90% arial, verdana, sans-serif;color:#fff;}

span#ref {font: italic 100% arial, verdana, sans-serif;color:#fff;display:block;}
body#pl #ref:before {content:'ref: ';}

.smalltext {font-weight : 100;font-size:96%;  color: #E2E2E2;}

/* ---------- Linkage ---------- */
	
a:link, a:visited {
	font-weight : 100; 
	text-decoration : none;
	color: #E2E2E2;
	background: transparent; 
	}

a:hover, a:active {
	font-weight : 100; 
	text-decoration : none;
	color: #B2AAA4;
	background: transparent; 
	}

div.email a:link, div.email a:visited {color: #fff;}
div.email a:hover, div.email a:active {color:#413231;font-weight : 100;}

/* ---------- Lists ---------- */


.largeimage  {display:block;position:relative;margin:16px auto;}
.arrows {display:block;position:relative;margin:12px auto;padding:0;height:30px;}


.next {position:absolute; left:500px;top:7px;margin:0;padding:0; background: url(../g/next2.gif) 0 0 no-repeat;width:16px;height:16px;  }
.next2 {position:absolute; left:857px;top:7px;margin:0;padding:0; background: url(../g/next2.gif) 0 0 no-repeat;width:16px;height:16px;  }

#next {float:left;position:relative;margin:0;padding:0;border:0;background: url(../g/next.gif) 0 0 no-repeat;width:16px;height:16px;}
#next:hover {background: url(../g/next2.gif) 0 0 no-repeat;width:16px;height:16px;}


.back {position:absolute; left:384px;top:7px;margin:0;padding:0; background: url(../g/back2.gif) 0 0 no-repeat;width:16px;height:16px; text-indent:0; }
.back2 {position:absolute; left:43px;top:7px;margin:0;padding:0; background: url(../g/back2.gif) 0 0 no-repeat;width:16px;height:16px; text-indent:0; }

#back {float:left;position:relative;margin:0;padding:0;border:0;background: url(../g/back.gif) 0 0 no-repeat;width:16px;height:16px;}
#back:hover {background: url(../g/back2.gif) 0 0 no-repeat;width:16px;height:16px;}

.surf {position:absolute; left:16px;top:340px;margin:0;padding:0; background: url(../g/surfsup2.gif) 0 0 no-repeat;width:80px;height:36px; text-indent:0; }
#surf2 {float:left;position:relative;margin:0;padding:0;border:0;background: url(../g/surfsup.gif) 0 0 no-repeat;width:80px;height:36px;font:100 85%/30px 'Comic Sans MS';}
#surf2:hover {background: url(../g/surfsup2.gif) 0 0 no-repeat;width:80px;height:36px;}

.squares {position:absolute; left:435px;top:0px;margin:0;padding:0; background: url(../g/squares2.gif) 0 0 no-repeat;width:30px;height:30px; text-indent:0; }
#squares {float:left;position:relative;margin:0;padding:0;border:0;background: url(../g/squares.gif) 0 0 no-repeat;width:30px;height:30px;}
#squares:hover {background: url(../g/squares2.gif) 0 0 no-repeat;width:30px;height:30px;color:#8996a0;}


.right dl {}
.right dl dt {padding:1em 0;}
.right dl dd {padding:0px 0;margin:0 0 0 12px;}
	
#maincontent ul { display: block; margin:16px  0 ; padding: 0;}
#maincontent ul li { font-size: 96%; list-style: none; padding: 0 0 0.4em 0; margin: 0; text-align:left;}
#maincontent ul li a {font-weight:900;}	

#maincontent .right ul li a {font-weight:100;}	

p#indextext {margin:0 250px;padding:16px 0;text-align:left; border:0;width:400px;color: #E2E2E2;font:italic 100 90%/12px arial;}


/*  ---------- Thumbnails ----------- */


.thumbs {
	position:relative;
	display:block;
	clear:both;
	width: 854px;height:400px;
	margin: 16px  auto;
	padding: 0;
	}
html>body .thumbs {height:auto; min-height:400px;}

.thumbs ul {
	display: block;
	padding:  0;
	margin: 0 auto;
	list-style: none;
	}

.thumbs ul li {
	float: left;
	width: 122px;
	padding:  0;
	margin: 0 ;display:block;
	}
.thumbs ul li a {display:block; padding: 0px;margin:3px 16px; border: 1px solid #1a2732;text-decoration: none; height:100px;width:100px; line-height:90px; }	
.thumbs ul li a:hover {border-color: #B2AAA4;color: #333;}
.thumbs ul li:hover {color: #3cf;}	
.thumbs img {margin:0 auto;display:block;padding:6px;}	


/* ---------- You are here ---------- */

body#hm li a.hm, body#pe li a.pe, body#ar li a.ar, body#sp li a.sp, body#ce li a.ce, body#pl li a.pl, body#st li a.st, body#ab li a.ab, body#co li a.co {font-weight:100;color: #afa79f;}


/* ---------- form bits ---------- */

#steroidForm { position:relative; visibility:visible; }/* apply additional positioning to this rule as you wish */
.req { color:#ff0000;}/* used to mark text labels with red asterisk (see below) */

 
#maincontent form {width:300px;font-size:110%;padding:0;margin:0;color:#fff;} 

#maincontent form p {display:block;clear:left;margin:0;padding: 8px 0;width:100%;}
#maincontent form p#checkbox   {margin:2px 0 6px 0;padding: 4px 0;width:100%;}
#maincontent form p#checkbox span  {margin:0;padding: 2px 0;display:block;clear:both;float:left;}

form  p {margin:0;padding:0;float:left;font: 100  100%/120% arial;}

input[type="text"]  {width:180px;display:block;margin:4px 0;padding:2px 0;border: 1px solid #e5e0e3;font: 100  100% 'Courier New', courier, monospace;}
input[type="checkbox"] {float:left;clear:none;margin:6px 0;padding:0;width:12px;height:12px;border: 1px solid #e5e0e3;}
input[type="submit"] {width: 80px;background:#fff;margin:0;padding: 0;border: 1px solid #e5e0e3;font: 900  100% 'Courier New', courier, monospace;}
input[type="button"] {width: 80px;background:#fff;margin:0;padding: 0;border: 1px solid #e5e0e3;font: 900  100% 'Courier New', courier, monospace;}


textarea#styled, textarea#styled2 {
	width: 300px;
	height: 50px;
	border: 1px solid #e5e0e3;
	padding: 2px;
	margin: 0;
	font: 100  100% 'Courier New', courier, monospace;}
	
/* .float {float:left;clear:both;} 

p.email {margin:0;font-size:70%; }*/


/* --------- Tables --------- */

#thumbnails { width:800px; background-color:#999 ; padding:0; }

table { width: auto; padding: 0; margin: 0; }
caption {
	padding: 0 0 12px 0;
	width: 336px;	 
	font: italic 100% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
}
th {
	font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	border: 1px solid red;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #e3e597 ;
	vertical-align:top;
}
th.head {border-top: 1px solid #747679;border-left:0;}
th.nobg {
	border-top: 0;
	border-left: 0;
	border-right: 1px solid #747679;
	background: none;
}
td {
	background: #fff;
	padding:  0 ;
	color: #4f6b72;
	vertical-align:middle;
	width:100px;margin:0 auto;text-align:right;
}
td img {margin:0 auto;vertical-align: middle;}
td.alt { background: #F5FAFA; color: #797268; }


/* ImageMap CSS */

#imagemap {margin:36px;}

a.annotation {
  position: absolute;
  border: 0;
  padding: 0;
  display: none;
}
a.annotation span {
  display: block;
  background: transparent;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  -moz-opacity: 0.3;
  filter:alpha(opacity=30);
}
a.annotation:hover {
  border-color: #ccc;
}
img.annotated {
  border-width: 0;
}