/*
 * Authors: Angela Guzman and Ricardo Fabbri
 *
 */

/* CSS Document */

body {
   margin: 0;
   padding: 0;
   background-color:#000000;
   font-family:"Gill Sans","Helvetica","Verdana","Arial",sans-serif;
	}

a {
   color:#ffffff;
	}

	
a:hover, a:active, a:focus /*this is for the change in text color when on-mouse*/
	{
   /*background-color: rgb(150,150,150);*/ color:#3399FF;
	}

a:visited 
	{
   color:#FF0000
	}

.intro_content a {
  text-decoration: none;
  color: #c61189;
}

.intro_content a:visited {
  color: gray;
}
	
.subcategory /*this is a different way of doing a style*/
	{
   background-color: steelblue;
   color:white;
   font-size:x-large;
	}

.sub_subcategory /*this is a different way of doing a style*/
	{
   color: black;
   background-color: lightsteelblue;
   font-size:small;
	}

.image_link, .image_link:hover, .image_link:active, .image_link:focus {
   background-color: transparent;
   border-style:none;
}

/* Document Layout */

#container {
  width: 800px;
  height: 600px;
  margin: 100px auto 0 auto;
  padding: 0;
/*  background: url(figs/border-fade.png) repeat-y;*/
  /* Workaround to ignore default padding/margin */
}

#index_image {
   border: 0;
   margin: 0 auto 0 auto; 
   padding: 0;
}

/* The > image in the home page, to be shown when the mouse moves */
#tip_image {
  display:none; 
  position:absolute;
  float:left;
  margin-top: 25px;
  margin-left:-25px;
}

.header {
   padding: 0; 
   margin: 0;
   color: white;
   width: 800px;
   height: 60px;
   float: left;
   position: relative;
   top:0;
   left:0;
}
.intro_header {
   background-color: rgb(198,17,137);
}

.contact_header {
   background-color: rgb(102,153,204);
}

.resume_header {
   background-color: #eb8a2c;
}

.portfolio_header {
   background-color: rgb(80,80,80);
}

.bio_header {
   background-color: #27c611;
}

.home_header {
  background-color: #61106a;
}

.content {
   color:white;
   width:800px;
   height:540px;
   margin:0; 
   float:right;
   background-image: url(common-images/rays.png);
   background-repeat: no-repeat;
   font-size: 80%;
   overflow: auto;
}

.intro_content {
   background-color: #bf82b9;
}

.contact_content {
   background-color: #96c0e6;
}

.resume_content {
   background-color: #f3d05a;
}

.portfolio_content{
/*   background-color: #89bf82;*/
/*   background-color: #bf82b9;*/
   background-color: rgb(200,200,200);
}

.bio_content{
   background-color: #89bf82;
}

.home_content {
   background-image: url(index-images/home-6-crop-indexed.png);
}

#contact_letter{
   position:relative;
   top:85px;
   left:173px;
   z-index:9;
}

#content_text{
   float:right;
   max-width: 386px;
   margin: 10px 0 0 0;
   padding-right: 15px;
   line-height:1.3em;
/*   border: solid white 1px;*/
   font-weight:500;
}

#content_text_bio {
   float:right;
   max-width: 340px;
   margin: 10px 0 0 0;
   padding-right: 35px;
   line-height:1.3em;
/*   border: solid white 1px;*/
   font-weight:500;
}

#content_text_bio span {
   font-weight:700;
}

#content_text_resume {
   float:right;
   max-width: 340px;
   margin: 10px 0 0 0;
   padding-right: 35px;
   line-height:1.3em;
/*   border: solid white 1px;*/
   font-weight:500;
}

#content_text_resume span {
   font-weight:700;
}


#drawing {
   margin:53px 0 0 0;
   padding:0;
   position:absolute;
   top:160px;
}

#drawing_contact {
   margin:171px 0 0 0;
   padding:0;
   width: 377px;
   height: 369px; 
   position:absolute;
   z-index:10;
}

#guzdesign_logo {
   margin: 46px 0 0 0;
   padding:0;
   height:45px;
   width:244px;
   background-image: url('common-images/guzdesign.png');
   background-repeat: no-repeat;
   position:absolute;
}

#content_text_paragraphs{
   list-style-image: url('common-images/list-mark-dots.png');
}

#under_construction {
   font-size:large; 
   font-weight: bold;
}


/*--------------------- Portfolio Page ------------------------ */

#portfolio_navigation {
   float:right;
   width: 340px;
   margin: 10px 0 0 0;
   padding: 0px;
   line-height:1.3em;
/*   border: solid white 1px;*/
/*   font-weight:700;*/
}

#portfolio_navigation ul {
   list-style-type: none;
   margin-bottom: 2em;
}

#second_level_items ul {
  display: none;
}
#third_level_items ul {
  display: none;
}


#portfolio_navigation a {
   text-decoration: none;
   color: rgb(100,100,100);
}


#portfolio_navigation a:visited {
/*   color: white;*/
   color: rgb(100,100,100);
}

#portfolio_navigation a:hover {
/*   color: white;*/
   color: rgb(100,100,100);
}

#portfolio_navigation li:hover {
   list-style-image: url('common-images/list-mark-dots-gray.png');
}

#portfolio_navigation li.selected {
   list-style-image: url('common-images/list-mark-dots.png');
}


#portfolio_image_showcase {
   padding:0;
   margin:100px 0 0 80px;
   position:absolute;
}


#portfolio_image_showcase p {/* The numberic links that go on top of the project image */
   padding:0;
   margin:5px 0 0.3em 0;
   font-weight:700;
   font-size: small;
   letter-spacing:0.4em;
   display:none;
   text-align:center;
/*   border:solid green 1px;*/
}
#portfolio_image_showcase span {/* The next/previous arrows */
  cursor: pointer;
}

#portfolio_image_showcase a {
  color:white;
}
#portfolio_image_showcase a img{
  border:none;
}

#portfolio_image_showcase p > a {
   text-decoration: none;
}

#portfolio_image_showcase p > a:visited {
   color:white;
}

#portfolio_image_showcase p > a:hover {
   color:gray;
}

#portfolio_image_showcase p > a.selected {
   color:gray;
}

#portfolio_image_showcase p > a.unselected {
   color:white;
}

#portfolio_image_box {
   padding: 0;
   margin:0;
   width:361px;
   height:308px;
/*   border-style:solid;*/
/*   border-color:red;*/
   text-align: center;
/*   background-color: white;*/
}

#portfolio_image_box img {
   padding:0;
/*   margin: 55px 0 0 80px;*/
   margin: 0 0 0 0;
}

#portfolio_project_description {
   padding: 0px;
   margin:384px 0 0 584px;
   width:216px;
   height:156px;
   background-color: white;
/*   color: #bf82b9;*/
   color: rgb(100,100,100);

   position:absolute;
   font-size: x-small;
   overflow: auto;
}

#portfolio_project_description p {
   padding: 0;
   margin: 20px 20px 20px 20px;
   display: none;
}


/* -------------- Other stuff -------------- */
#error_message {
   display:none;
   margin: 250px auto 0 auto;
   padding: 0;
   text-align: center;
}