body {margin:0;padding:0;font: 10px Helvetica, Arial, sans-serif;}

/*  *{	border:solid 1px #000000;}    */
*{margin:0;padding:0;}

h1, h1 a, h1 a:hover {
    margin:0;padding:0;
	font: 13px Helvetica, Arial, sans-serif;
	text-decoration: none; /* remove the underline */
	color:#FF33FF; /* pink */
}

a {text-decoration: none;} /* remove the underline */
a:hover {color: #FF9999;}  /* light pink on flyover link */

/******* Layout *******/
#container {
	margin: 50px;   /*top-bottom - right-left */
	padding:0px;
	width: 700px;
    height : auto;
}

/******* Navigation *******/
#navigation {
	margin: 0px 0px 0 0;    /*top right bottom left */
	padding: 20px 0px 0 0;
	width: 100%;
	height: 25px;
	line-height: 10px;
	list-style: none;
	font-size: 12px;
	font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    border-bottom:1px solid #999999;   /* puts a grey line underneath? */
	background: #FFFFFF;    /* want to have line between, not grey behind */
}

#navigation li {
	float: left;
	margin-left: 0;
	width: 85px;
}

#navigation li a {
	color: #999999;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 24px;
}

#navigation li.active a, #navigation li.current a {
  font-weight: normal;
  font-style: normal;
	color: #FF33FF;
}

#navigation li a:hover {
	color: #FF33FF;
}

/******* Subnavigation *******/
#navigation li ul {
	margin: 10px 0px 0 0;    /*top right bottom left */
	padding: 0px 0px 0 0;
	clear: both;
	width: 100%;
	display: none;
	/*border-top:1px solid #CCCCCC;  */ /* how come doesn't put a grey line underneath? */;
	list-style: none;
  text-transform: none;
}

#navigation li.active ul {
	display: block;
	background: #FFF;
}

#navigation li.current ul {
	display: block;
  background: #FFF;
}

#navigation li.active ul a, #navigation li.current ul a {
  font-weight: bold;
  font-style: italic;
	color:#999999;
}

#navigation li.active ul a:hover, #navigation li.current ul a:hover {
  color:#FF33FF;
}

#navigation li.current ul li.current a {
  font-weight: normal;
  font-style: normal;
	color: #FF33FF;
}

#navigation li ul li {
	width: 150px;
  height: 11px;
}

#navigation li ul li.current a {      /* this makes current sublink pink  */
	color: #FF33FF;
}


/******* Summary : index page + projects list + project intro *******/
#summary {
	margin: 0 0;     /*top-bottom   right-left */
	padding: 80px 0px 0 0;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	text-transform: none;
	color: #FFCC00;
	height : 100%;
}

#summary ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 10px;
	width:400px; /*100%;*/
}

#summary ul li {
    text-decoration:none;
    padding: 0px 0px 7px 0px;
    font-weight:100;
    color:#666666;
    font-size:12px;
    text-align:justify;
}

#summary ul li a {
    font-style: italic;
    font-weight:bold;
    color:#666666;
}

#summary ul li ul li {
    padding: 7px 0px 0 14px;
}

/**/
#summary p {
    font-weight:100;
    color: #666666;
    font-size:12px;
    text-align:justify;
    line-height: 15px;
    width: 400px;
}

#summary p span  {
    text-decoration:none;
    color:#FF33FF;
}

#summary p span  a {
    text-decoration:none;
    font-style: italic;
    font-weight:bold;
    color:#FF33FF;
}

#summary p img {
    float : right;
	margin: 0px -130px;
}

/**/
.green {
	font-style: italic;
	font-weight: bold;
	color:#00FF00;
}

.red {
    font-size: 14px;
	color: #FF3300;
	font-style: italic;
	font-weight: bold;
}

.orange {
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color:#FF9900;
}

/******* Description + Images *******/
#images {
	margin: 0 0;    /*top-bottom   right-left */
	padding: 20px 0px 0 0px;
	width: 100%;
}

#description {
	position: relative;
	float: left;
	margin: 0 0;     /*top-bottom   right-left */
	padding: 20px 0px 0 0px;
	width: 100%;
	height: auto;
}

#images div {
    float:right; /* right alignment = reverse order in html page */
}

#images img {
    float:right;
    border: 0;  /* border appears around images if not this + images fit their cell */
	margin: 0 0 0 7px;
	width: auto;
	height: 60px;
}


#images a, #images a:hover {
    text-decoration:none;
}


/******* Description *******/
/* trash ??
#description a {
    text-decoration:underline;
    font-weight:bold;
    color: #666666;
}
*/

/* 1div text + 1div image to make the right imageviewer alignment */
#texte {
    display:block;float:left;
    width: 400px;
}

#texte p {
    color: #666666;
    text-align:justify;
    font-size:10px;
    line-height: 14px;
    padding: 0px;
    margin: 0px;
}

/**/ 
#viewer {
    display:block;float:right;
}

#imgviewer {
    width:auto;height:auto;
}

.grey {
    font-size: 12px;
	color: #666666;
	font-style: italic;
	font-weight: bold;
}
.redsmall {
    font-size: 12px;
	color: #FF3300;
	font-style: italic;
	font-weight: bold;
}
.pink {
	font-size: 15px;
	font-style: italic;
	font-weight: bold;
	color:#FF33FF;
}