/* -----------------------------------------------------------------
   angelachenportfolio.com | 2007
--------------------------------------------------------------------
   Colors:
   #225566 - Dark Blue
   #32AABB - Light Blue
   #B4CF40 - Green   
------------------------------------------------------------------*/
body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: small;
   background: #fff url(/images/background.gif) no-repeat top left;
   margin: 0;
   padding: 0;
   color: #666;
}
h1,h2 {
   color: #32AABB;
}
h2 {
/* Clear the float in #toggleable */
   clear: both; 
}
ul{
   margin: 0;
   padding: 0;
   display: block;
}
li {
   margin-bottom: 15px;
   list-style-type: none;
}
a:link, a:visited { color: #666; }
a:hover {}
a:active{}
h2 a {
   cursor: pointer;
}
h2 a:link, h2 a:visited { 
   color: #32aabb;
   text-decoration: none;
}
h2 a:hover { 
   text-decoration: underline; 
}

/* Sections ---------------------------------- */
#container {
   margin: 10px 0 10px 20px;
}
pre {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 150%;
}
.highlight {
   color: #B4CF40;
}
#contact {
   display: none;
}
ul#toggle {
   float: left;
   width: 450px;
   height: 160px;
   margin-left: -10px;
}
/* For CSS Rollover Images in IE */
* html ul#toggle {
  width: 450px;
  w\idth: 450px;
  margin-left: -5px;
}
ul#toggle li{
   float: left;
   margin: 0 1px 1px 0;
   padding: 0;
   list-style-type: none;
}
ul#toggle li img{
   border: 0;
}
#toggleable {
/* So toggleable doesn't go to the right of toggle in large resolutions */
   clear: both;  
}
/* For IE */
* html #toggleable {
  width: 940px;    /* was 974px */
  w\idth: 960px;   /* was 962px */
}
#toggleable h2 {
   color: #B4CF40;
}
#toggleable img {
   border: 1px solid #ccc;
   padding: 5px;
   margin-right: 20px;
   margin-bottom: 20px;
   float: left;
}
#toggleable p, #toggleable dt, #toggleable dd{
   margin-left: 632px;  /* so the text doesn't wrap around img if really long*/
   width: 300px;
   background-color: #fff;
}
#toggleable p {
   text-align: justify;
}
#toggleable dt {
   font-weight: bold;
   margin-top: 10px;
}
#toggleable dd {
   margin-top: 5px;
}
.first {
/* Keep this for Mac browsers */
   margin-top: 40px;       
}
#footer {
   background: url(/images/footer.gif) no-repeat top right;
   width: 100%;
   height: 150px;
   clear: both;
   display: none;
}

/* CSS Rollovers -----------------------------------------
---------------------------------------------------------*/
span.hide {
   display: none;
}
#toggle li a {
   width: 70px;
   height: 70px;
   display: block;
}
/* Portfolio Thumbnails ----------------------------------*/
li.marcoa a:link, li.marcoa a:visited { background: url(/images/folio/thumbs/marcoa.gif) no-repeat top left;}
li.wamtd a:link, li.wamtd a:visited { background: url(/images/folio/thumbs/wamtd.gif) no-repeat top left;}
li.rsf a:link, li.rsf a:visited { background: url(/images/folio/thumbs/rsf.gif) no-repeat top left;}
li.template a:link, li.template a:visited { background: url(/images/folio/thumbs/template-design.gif) no-repeat top left;}
li.intranet a:link, li.intranet a:visited { background: url(/images/folio/thumbs/april-outline.gif) no-repeat top left;}
li.mj a:link, li.mj a:visited { background: url(/images/folio/thumbs/mj.gif) no-repeat top left;}
li.dig a:link, li.dig a:visited { background: url(/images/folio/thumbs/re-1.gif) no-repeat top left;}
li.dog a:link, li.dog a:visited { background: url(/images/folio/thumbs/re-3.gif) no-repeat top left;}
li.acre a:link, li.acre a:visited { background: url(/images/folio/thumbs/re-5.gif) no-repeat top left;}
li.ymh a:link, li.ymh a:visited { background: url(/images/folio/thumbs/ymh.gif) no-repeat top left;}
li.amerwrecka a:link, li.amerwrecka a:visited { background: url(/images/folio/thumbs/amerwrecka.gif) no-repeat top left;}

/* Experiment Thumbnails ---------------------------------*/
li.srp a:link, li.srp a:visited { background: url(/images/exp/thumb/srp.gif) no-repeat top left;}
li.ddb a:link, li.ddb a:visited { background: url(/images/exp/thumb/dadabase.gif) no-repeat top left;}
li.eas a:link, li.eas a:visited { background: url(/images/exp/thumb/eas.gif) no-repeat top left;}
li.ain a:link, li.ain a:visited { background: url(/images/exp/thumb/ain.gif) no-repeat top left;}
li.barcode a:link, li.barcode a:visited { background: url(/images/exp/thumb/barcode.gif) no-repeat top left;}
li.sound a:link, li.sound a:visited { background: url(/images/exp/thumb/sound.gif) no-repeat top left;}
li.variations a:link, li.variations a:visited { background: url(/images/exp/thumb/variations.gif) no-repeat top left;}
li.haiku a:link, li.haiku a:visited { background: url(/images/exp/thumb/haiku.gif) no-repeat top left;}

#toggle li a:hover {
   background-position: bottom right;
}