/* Styles for slcmarco.com photography website */

a.homepage {
   color: #A94;
   font-size: 100%; 
   font-weight: bold;
   text-decoration:none;
}

.photo_caption {                /* TEXTO AL PIE DE LAS FOTOS IE INDEX.HTML */
   width:420px;                 /* ancho de la columna de la izquierda */
   font-size:.8em;              /* tamaņo del texto al pie de la foto */
   text-align:center;           /* texto centrado al pie de la foto  */
/*   background: #eee;             color de fondo para este texto */
/*   border: 1px solid #000;      /* borde para la foto y texto al pie */
   margin:15px;                 /* para separar la foto del texto a la izq y del footer */
   line-height:90%;             /* espacio entre lineas */
}

#about_menu {
	margin-left: 40px;
	width: 350px;	
    background: #8EE5EE;
}


/* texto al pie de la foto */
.photo_caption p {
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    color: #333;
    letter-spacing: 1px;
    line-height: 1.5em;
   }
   

body {
   background-color: #35420c; 
   font-famly: Verdana, Arial, Sans-serif;
   font-size:105%;
}

strong {
   font-weight: normal;
   font-famly:Verdana, Arial, sans-serif;
   font-size: 1.1em;
   color:#444;        /* http://colour.pro/CSS-Colour-Chart.htm = CSS Colour Chart */
}


/*--------------------------- Top Navigation ---------------------------*/

#navbar {
  font-weight: normal;
  height: 1.7em;
  background-color: #999900;
  /*  overflow: hidden; */
}

#navbar ul { 
    margin: 0; 
    padding: 0; 
}

/* #navbar span { display: inline; margin:0; width:0; } */

#navbar ul li { 
    display:inline;
    float: left;
    font-family:Georgia, "Times New Roman", Times, serif; 
    vertical-align: top;
    list-style-type: none;
   }

#header ul {
    margin: 0; 
    padding: 0; 
    list-style-type: none;
}

#navbar a, #navbar a:visited { 
   float:left; white-space: nowrap;
   border-right: 1px gold solid; 
   padding: 3px 15px 4px 15px;
   text-decoration:none; 
   color:#fff; 
}

#navbar a:hover {
   background-color: #CCCC00;
   color: #FFFFFF;
   border-right: 1px gold solid; 

        display: inline;
   	position: relative; 
        margin:0; 
   	padding: 0x; 
}

/*--------------------------- Bottom Navigation ---------------------------*/

#bottom_navbar {
   font-weight: normal;
   height: 1em;
   white-space: nowrap;
}

#bottom_navbar ul { 
    margin: 0; 
    padding: 0; 
}

#bottom_navbar ul li {
   display: inline;
   font-family: Verdana, Georgia, "Times New Roman", Times, serif;
   font-size: .8em;
   list-style-type: none;
 }

#bottom_navbar a { 
   float:right; white-space: nowrap;
/*   border-right: 1px gold solid;  */
   padding: 3px 15px 4px 15px;
   text-decoration:none;
   text-transform:uppercase;
   color: #2F4F4F;
}

#bottom_navbar a:hover {
   background-color: #C1FFC1;
   color: #6E8B3D;
   border-bottom: 1px gold solid;
}


/*--------------------------- Main Container ---------------------------*/

#container {
   width: 980px;
   background-color:#ffffff;
   margin-top: 10px; 
   margin-right: auto; 
   margin-left: auto;
   padding: 0px;
   border: 1px solid #000;
}

/*--- 'bio' puts a picture and text on the same line
       see my page photoalb.html
       borrowed from http://www.nngroup.com/events/tutorials/usability.html */

.bio { margin:1em 2px 1em 80px; background:yellow;}
.bio img { margin:0 0 0 -115px;float:left; width:110px; height:142px;}


/*-----Photoalb.html : Creates a box that includes a pic + text and it */

.albumframe {    
   margin-top: -5px;
   margin-right: 25px; 
}

.albumframe img {
   margin: 5px;
   float:left;       /* makes text flush to the side of pic */
   padding: 2px;               /*                                       */
   border: 2px solid black;    /* these 3 lines for the picture border  */
   background-color:#FEFFF1;   /*                                       */   
   */   border-style:none; */
}

.album {font-size: .85em;}

.album h3 {
    font: 0.85em Verdana, Geneva, sans-serif; 
    font-weight:bold;
    color:#992;
    text-transform: uppercase;
    letter-spacing: .015em;	
    font-size: 90%;
    line-height: 1.9em;
  }
	
.albumdet {
   margin-top:-15px;
   letter-spacing: -0.05em;
}

/*------ Individual photo albums ------*/

.single_album h2 {
     font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", georgia, serif;
     color: #19A970;
     padding: 10px 0px 6px 0px;
     font-size: 24px;
     line-height: 10px;
     letter-spacing: -1px;
     font-weight: bold;
     margin-left: -20px;
}   


#home_sidebar li {display:inline;}

#albtitulo {
    font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2", georgia, serif;
    font-size: 1.2em;
    color: teal;
   }

#header {                  
   padding: 0; 
   margin-top: 0px; 
   text-align: center; 
   border-bottom: 1px solid;}

#sidebar {
   display:inline;
   border: thin solid #000;
   font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size:65%;
   margin-top: 140px; 
   margin-right:-190px;
   width: 130px; 
   float: right;
   padding: 7px;
}

#mainContent {                   /*  TEXT in the content area */
   margin-left: 6%;
   margin-top: -5px;
   margin-right: 20%;     /* afecta photoalbums */
   padding: 5px;
}

#mainContent p {
/*   font family taken from     http://jaxvineyards.com/screen.r4.css     */
   font-family: Verdana, Arial, sans-serif;
   line-height: 22px;
   font-size: 90%;
}

.about p {
        font-famly: Verdana, Arial, Sans-serif;
        margin: .2em 0;
    }

.about ul {
   margin:0px; padding: 0px;
  }

.about ul li {
    display:inline;
    float: left;
    list-style-type: disc;
   }

.gallerylist li {
/*	list-style-type: disc; */
        font-family: 'Trebuchet MS', Helvetica, sans-serif;
        font-size:90%;
	   }

.bold {
   border: solid 1px #e7e7e7; 
   background-color: #F6F6F6;
  }

/* ------------- Photo Album Thumbs ------------*/

#thumbs_area {
   width: 860px;
   background-color:#C5C0B0;
   margin-top: 10px; 
   margin-right: auto; 
   margin-left: auto;
   padding: 0px;
   border: 1px solid black;
}

.thumbs img { padding: 0; border-style: none;}    /* Thumbnail galleries settings:   */
.alignment {margin: 0 0 15px 0; padding: 5px;}    /* landscape oriented thumbs       */
.alignvert {margin-left: 25px;}                   /* vertical oriented thumbs        */

/*--- Headers typography article from this sie:
      http://www.3point7designs.com/blog/2008/06/10-examples-of-beautiful-css-typography-and-how-they-did-it/ */

h1 {
     font-family: times, Times New Roman, times-roman, georgia, serif;
     color: #AB7;
     padding: 0 0 6px 0;
     font-size: 36px;
     letter-spacing: 1px;
     font-weight: bold;
     margin-left: -20px;
     margin-bottom:-5px;
}

h2 { 
     font-family: Gill Sans, Verdana;
     color: #444;
     font-size: 0.84em;
     line-height: 14px;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-weight: bold;
     margin-left: 0px;
}


h4 {
 font-size: .65em;
 font-family: verdana, 'Trebuchet MS', Helvetica, sans-serif;
 color: #FF0000;
 background-color: #FFFFFF;
 text-transform: uppercase;
 text-align: left;
 font-weight: bold;
 letter-spacing: 1px;
 line-height: 1.5em;
 margin-left: -20px;
 margin-bottom:-30px;
}


h5 {
 font-size: .65em;
 font-family: verdana, 'Trebuchet MS', Helvetica, sans-serif;
 color: #aaa;
 background-color: #FFFFFF;
 text-align: left;
 font-weight: bold;
 font-style: italic; 
 letter-spacing: 1px;
 line-height: 1.5em;
 margin-left: -20px;
 margin-bottom: 20px;
 margin-top: -5px;
}




/*------------------------------------.
 |  used on the Index.html page to    |
 |  disply a row of album thumbnails  |
 !------------------------------------*/

.containeralb {
  border: 2px dashed #333;
  background-color: #ffe;
  }


.floatright img {
  float: right;
   padding: 3px;
   border: 1px solid #000;

  }
  
.floatright p {
   text-align: center;
   background: yellow;
   }

.spacer {
  clear: both;
  }

.rightblock {
	float: right; 
	margin: 5px 0px 10px 14px; 
	padding: 0px;
	background-color: #F4F4F4;
	}  

.rightblock img, .leftblock img {
	border : 1px solid #7B99B8;
	margin: 0;
	padding: 0; 
   }
.rightblock p, .leftblock p	{
	font-size: 11px;
	line-height: 12px;
	color: #7E7E7E;
	margin: 4px;	
	}

/*-----------------------------------------------------------------------.
 |                                                                       |
 |  styles for two column pages like about.html                          |
 |  http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm  |
 |  Changed the % to PX to fit my fixed width design                     |
 |                                                                       |
 !-----------------------------------------------------------------------*/


/* column container */
.colmask {
	width:910px;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}

/* common column settings */
.colleft {
	float:left;
	width:100%;
	position:relative;
}
.col1,
.col2
    {
   float:left;
   position:relative;
   overflow:hidden;
}

/* 2 Column (double page) settings */
.doublepage {
	background: #FFF;		/* right column background colour */
}

.doublepage .colleft {
	width:910px;			/* right column width */
/*	background:#eee; /*             /* left column background colour */
}

.doublepage .col1 {
    width:455px;		    /* left column width (column width minus left and right padding) moves pic left/right */
    padding-top:0;                  /* Baja el texto de la columna izquierda */
  /*  background:aliceblue; */
}

.doublepage .col2 {
   padding-bottom:0px;
   width:455px;			/* right column content width (column width minus left and right padding) */
}

/*---------------------------------- Contact Form ---------------------------*/

.formWrapper{
	background:#feefd6;
	border:1px solid #e8c07d;
	padding:12px 15px;
}
.formWrapper p{
	line-height:18px;
	font-size:14px;
	padding-bottom:10px;
}
.formTable{
	width:100%;
	border-collapse:collapse;
	border-spacing:0;
	margin-bottom:5px;
}
.formTable td{
	vertical-align:top;
	text-align:left;
	font-size:14px;
	padding-bottom:10px;
}
.formTable td.title{
	padding-top:3px;
	width:153px;
}
.formTable td.title2{
	padding-top:3px;
	width:121px;
}
.formTable input[type="text"],
.formTable select{
padding:4px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:14px;
border:1px solid #e8c07d;
background:#fff;
}

#footer {
   font: 80% Verdana, Helvetica, Arial, Microsoft Sans Serif, sans-serif;
   color:#FFF;
   margin:-57px 0 0 5px;
  }


/* Crossfade */

.crossfade {
    position: relative;
    height: 100%;
}
.crossfade li {
	margin: 0 !important;
	padding: 0 !important;
	position: absolute;
        top: 0; left: 0;
	visibility: hidden;
}
.crossfade img {
	background: #fff;
}

.crossfade .caption {
        font-family: verdana, Helvetica, Arial, sans-serif;
	position: absolute;
	top: 88px;
	right: 10px;
	color: #ffc;
        font-size: 65%;
}

/* Tip boxes 

a { color:#000;
    border-bottom: 1px dotted #444;
    text-decoration: none;
 }

span { display: none;}

a:hover {
	position: relative;
}

a:hover span {
        display: inline;
   	position: absolute; 
        top: 10px; 
        left: 25px;
  /* formatting only styles 
        width:300px;
   	padding: 5px; 
        margin: 10px; 
        z-index: 100;
   	background: #f0f0f0; 
        border: 1px dotted #000;
	opacity: 0.9;
        color:#005650;
} */