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;}
.clear {clear:both;margin:1em 0;}

input::-moz-focus-inner { border: 0; }
a { outline:none;} */ remove dotted line in firefox */


/* SKIP LINK */
.skip {position: absolute; top: -6em; display: none} /*Opera*/
 html .skip {display: block; position: absolute; top: -6em; left: 0; z-index: 0} /* Seen by IE */
*html:not([dummy]) .skip {display: block; position: absolute; top: -6em; 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:rgb(68,68,68);
	}
	
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:rgb(68,68,68);
	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(newLogo2.gif) top left no-repeat;width:200px;height:73px;}
#logo {float:left;position:relative;margin:0;padding:0;border:0;background: transparent url(newLogo2.gif) top left no-repeat;width:200px;height:73px;}
#logo:hover {background: url(newLogo2.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: 6px 0 0 0;
	list-style: none;
	width: 900px;background:rgb(68,68,68);
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 12px 0 0;
	font:100 110%/20px arial;
	background: transparent ;
	text-transform:capitalize;
	}
	
#menu ul li a:hover { color: #B2AAA4; }


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


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

#maincontent {
	position:relative;
	display:block;
	padding: 0;
	border: 0;
	margin:0;
	height:520px;
	width:900px;/* border:1px solid #E2E2E2; */
	}
	
html>body#hm #maincontent {
	/* position:relative;float:left;border-right:400px;margin-right:-400px;
	display:block;
	padding: 0;
	border: 0;
	margin:0;
	height:520px;
	width:460px; */
	}	

html>body #maincontent {height:auto; min-height:520px;}

#sidebar {float:left;width:310px;margin:0 0 0 60px;border-left: dotted 1px #666;}

.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 16px; padding:0;font-size:110%;font-weight:100;color:#fff;}
html>body#ab h3{margin:36px 0 0 6px;;}
h4 {margin: 0; padding:0;font-size:100%;font-weight:100;color:#695D54;}
li h4 {color:#fff;}
html>body#ab h4, html>body#hm h4{color:#fff;padding:0 0 0 120px;}

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;}
.largeText a {font-size:120%;}


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

ul.socialBlock {float:right;}
ul.socialBlock li {float:left;list-style:none;margin:0 6px;width:24px;}
ul.socialBlock li a span {text-indent:-9999px;display:block;}

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


ul.projectsMenu {list-style:none;width:290px;padding:0 0 12px 80px;margin:0 ;}

ul.projectsMenu li {display:block;margin:24px 0;min-height:150px;}
ul.projectsMenu li p {font:80% verdana,optima,'century gothic';letter-spacing:.5px;padding:0 0 0 120px;}
ul.projectsMenu li a {display:block;padding:0;text-decoration:none;height:26px;}


/*ul.projectsMenu  li.one {background: transparent url(../i/projectOne.jpg) top left no-repeat;}*/
/*ul.projectsMenu  li.two {background: transparent url(../i/projectTwo.jpg) top left no-repeat;}*/
/*ul.projectsMenu  li.three {background: transparent url(../i/projectThree.jpg) top left no-repeat;}*/


#maincontent ul.booksMenu {display:block;float:right;list-style:none;width:900px;padding:0 ;margin:0 0 36px 120px;}

#maincontent ul.booksMenu li {display:block;margin:36px 16px 0 0;padding:0;height:90px;float:left;width:162px;
position:relative;}
#maincontent ul.booksMenu li p {font:70%/1.3em verdana,optima,'century gothic';letter-spacing:.5px;border-bottom:1px dotted #666;}
#maincontent ul.booksMenu li p, #maincontent ul.booksMenu li h4 {padding:0 0 0.5em 0;margin:0 0 0 100px;}
#maincontent ul.booksMenu li a {display:block;padding:0;text-decoration:none;border:1px solid #444;float:left;}
#maincontent ul.booksMenu li a:hover {border: 1px solid #fff;}

#maincontent ul.booksMenu li div {position:absolute;top:0;} /*changed from bottom */

p a.arrow {background: transparent url(arrowWhite.gif) right no-repeat;width:55px;line-height:26px;}
p a.arrow:hover {background: transparent url(arrow.gif) right no-repeat;}

.projectBox {position:absolute;width:900px; padding:0;margin:0px 0 0 0; }
.projectBox #buttons {width:900px;margin:16px 0 12px 0;}
.projectBox .prevImg {float:left;padding:0 0 0 6px;}
.projectBox .nextImg {float:right;padding:0 6px 0 6px;}


/* PROJECTS SLIDESHOW  div#slideshow {
  	width: 900px;
  	overflow:hidden;padding:0;margin:0;
  }   */
/* PROJECTS SLIDESHOW #slideshow ul {width:30000px;padding:0;margin:0;}
#slideshow ul li {float:left;margin:0 60px;} */


#slideshow { height: auto; width: 900px; margin:64px auto;z-index:1; }
#slideshow img { padding: 0;z-index:200;}

#output {position:absolute;top:-40px;width:100%;margin:0;padding:0;text-align:right;float:left;z-index:10000;}

#prev2 {background:url(back.gif) left no-repeat;width:20%;height:100%;z-index:10000;
	left: -50px; margin: 0 auto; position: absolute; top: 0;
}
#next2 {background:url(next.gif) right no-repeat;width:20%;height:100%;z-index:10000;
	right: -50px; margin: 0 auto; position: absolute; top: 0;
}
#prev2:hover {background:url(back2.gif) left no-repeat;}
#next2:hover {background:url(next2.gif) right no-repeat;}

 a#next2 span,  a#prev2 span  {text-indent:-9999px;display:block;}

/*.nav { 
    height: 100%;
    left: -50px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    width: 1000px;z-index:-1;background:red;
 } 
.nav a span {text-indent:-9999px;display:block;}*/

.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(next2.gif) 0 0 no-repeat;width:16px;height:16px;  }
.next2 {position:absolute; left:857px;top:7px;margin:0;padding:0; background: url(next2.gif) 0 0 no-repeat;width:16px;height:16px;  }

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


.back {position:absolute; left:384px;top:7px;margin:0;padding:0; background: url(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(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(back.gif) 0 0 no-repeat;width:16px;height:16px;}
#back:hover {background: url(back2.gif) 0 0 no-repeat;width:16px;height:16px;}

.surf {position:absolute; left:16px;top:340px;margin:0;padding:0; background: url(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(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(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(squares.gif) 0 0 no-repeat;width:30px;height:30px;}
#squares:hover {background: url(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;}
	


p#indextext {margin:0 auto;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 img.noimage {display:block; padding: 0px;margin:3px 16px; border: 1px solid #1a2732; height:100px;width:100px; line-height:90px;}
.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, body#pb li a.pb  {font-weight:100;color: #afa79f;}


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

fieldset  { width:300px;margin: 0;padding: 12px 0; border: none; }
legend {font-size: 100%;padding:0 ;margin:0;}

form {display:block;width:300px;font-size:90%;padding:16px 0;margin:0;} 
form p {display:block;clear:left;margin:0;padding:0;width:100%;float:left;}

input[type="text"]  {width:160px;display:block;margin:4px 0;padding:2px 0;border: 1px solid #e5e0e3;font: 100  100% 'Courier New', courier, monospace;background-color: #fee;}
input[type="submit"] {width: 80px;background:#fff;margin:6px 0;padding: 0;border: 1px solid #e5e0e3;font: 900  100% 'Courier New', courier, monospace;background: #fee ;cursor: pointer;}

input.formInputField:hover, textarea:hover { background-color: #cff; border: solid 1px #060; color: #000; }
input.formInputField:focus, textarea:focus { color: #000; background-color: #fff; border: solid 1px #060; }
	
input.formInputButton:hover {background-color: #cff; border: solid 1px #060; color: #000;}

textarea#styled {
	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;
}
	

/* JScrollPane Styling */	
	
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #aaa;
}
.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}