
/* 

jFlow Plus Demo CSS 

Description: Demo styles NOT for use with jFlow Plus

Creator: Devin Walker

Date: October 4, 2011

*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { 
line-height: 1;
 }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* BODY */
body 
{ margin: 0; padding: 0 50px 50px 50px;
/*background-image:url(file:///HD%20PAO/PAOLA/dulcemelos/images/bg_macochi.jpg); background-repeat:repeat;*/ 
background-color:#8E0C88;
font-family: Arial, Helvetica, sans-serif;



 }

a { color:#838c1c; text-decoration: none; }

#redes { width: 940px; height:80px; padding-top:20px; margin: 0 auto; /*-moz-box-shadow: 0 0 10px 5px #815a06; -webkit-box-shadow:0 0 10px 5px #815a06; box-shadow:0 0 10px 5px #815a06;*/ }

#container { width: 940px; margin: 0 auto; /*-moz-box-shadow: 0 0 10px 5px #815a06; -webkit-box-shadow:0 0 10px 5px #815a06; box-shadow:0 0 10px 5px #815a06;*/ }

/* header */

#header {  overflow: hidden;  }

#logoWrap {
background-image:url(../imagenes/header_home.png); no-repeat top left transparent; margin: 5px auto 10px; width: 310px; height: 100px; position: relative; }

#logoWrap h1 { font: 56px/1em 'Rokkitt', serif; color:#4f4e4e; text-shadow: 1px 1px 2px #9f9f9f; margin: 0px; text-indent: -9999px;}

#logoWrap h1 span { font-size: 18px; line-height: 30px; text-transform: uppercase; text-shadow: 0px 0px 0px; text-indent: -9999px;}

#headerSocials { overflow: hidden; position: absolute; bottom: 15px; left: 0; }

.socialItem { float: left; }

#adWrap { float: right; margin: 25px 30px 15px; background: #DDD; }

#downloadWrap { float: right; text-align: center; margin: 0 30px 0 0; }

#downloadWrap a { background: url('../images/download-sprite.png') no-repeat right top transparent; padding: 0 40px 0 0; font-style: italic; font-size: 14px; float: left; line-height: 30px; }

#downloadWrap a:hover { background-position: right -31px; color:#5d6410; }

/* content */

#content {

padding: 20px 20px 60px;
overflow: hidden; 
background:#FFF; 
 -moz-box-shadow: 0 0 10px 5px #815a06;
  -webkit-box-shadow:0 0 10px 5px #815a06; 
  box-shadow:0 0 10px 5px #815a06;
 
   }

#content p { font-size:14px; color:#646464; line-height: 20px; margin: 0 0 10px; text-align:justify; padding-left:20px; padding-right:20px;  }

#content h2, #content h3, #content h4 { font-size: 16px; font-weight: bold;padding: 15px 0; color:#a37039; padding-left:20px; padding-right:20px;  }

#main { float: left; width: 600px; }

#sidebar { float: right; width: 250px; }

/* intro */

#content .intro-heading { font:30px/42px 'Rokkitt', serif; color:#a37039; border-bottom: 1px solid #d6d6d6; margin: 0 0 15px; padding: 0;  padding-left:20px; padding-right:20px; }

#content .intro-p { font-size: 14px; line-height: 26px;  }

/* sidebar */

.sidebar-widget { margin: 10px 0 20px; }

#sidebar .widgettitle { font:18px/22px 'Rokkitt', serif; color:#a37039; margin: 0 0 15px; padding: 0; }

.ad-widget { padding: 20px 0 0; }

#footer {  overflow: hidden; background-color:#333333; }




 



/* check list */

.check-list { margin: 0; }

.check-list li { background: url('../images/demo-page/checkmark.png') no-repeat 0px 0px transparent; padding: 0 0 12px 20px; font-size: 14px; line-height: 20px; font-style: italic; }

#w3c { padding-bottom: 0px; }

#w3c span { position: relative; top: -15px; }

#w3c a { padding: 0 0 0 5px; position: relative; top: -5px; }

/* options table */

.option-name { font-weight: bold;   }

.option-type { font-style: italic; }

table td { padding:10px; line-height:18px; }

tr:nth-child(odd)		{ background-color:#eee; }

tr:nth-child(even)		{ background-color:#fff; }

/* code */


pre { background: #EEE; margin:0 0 15px; padding: 10px; overflow: auto; font-size: 12px; }



/* menu list */
/* demo page styles */

.example {
    position:relative;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}




/* main menu styles */
#nav,#nav ul {
	font-family:verdana;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	
}

#nav {
	height:50px;
	left:0;
	overflow:hidden;
	top:0;
}
#nav li {
	float:left;
	position:relative;
	z-index:10;
}
#nav li a {
	background:url(../images/bg-menu2.png) no-repeat center top;
	color:#fff;
	display:block;
	float:left;
	font-size:14px;
	height:51px;
	line-height:40px;
	padding:0 8px;
	position:relative;
	text-decoration:none;
	z-index:20;
}
#nav li:first-child a {
	background:url(../images/bg-menu2.png) no-repeat left top;
	padding-left:35px;
	
}
#nav li ul li:first-child a {
	background-image:none;
	padding-left:10px;
	
}
#nav li.pad {
	background:url(../images/bg-menu2.png) no-repeat right top;
	display:block;
	height:51px;
	width:35px;
}
#nav ul {
	background:#a36521;
	height:auto;
	padding:10px 0;
	position:absolute;
	top:-120px;
	width:180px;
	z-index:1;
	border-radius:8px; /*some css3*/
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	transition:0.8s ease-in-out;
	box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
	-moz-transition:0.8s ease-in-out;
	-o-transition:0.8s ease-in-out;
	-webkit-transition:all 0.8s ease-in-out;
	left: 31px;
}
#nav ul li {
	width:160px;
}
#nav ul li a {
	background:transparent;
	height:20px;
	line-height:20px;
	width:160px;
}
#nav:hover {
	height:300px;
}
#nav li:hover ul {
	-moz-transform:translate(0,161px); /*some css3*/
	-o-transform:translate(0,161px);
	-webkit-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
	color:#fdaf06;
}



/* GALERIA */

#galeria, #galeria * {
box-sizing:border-box,-moz-box-sizing:border-box}

#galeria {
border: 1px solid #EAEAEA;  /* Borde de la galerķa */
padding: 10px;
padding-bottom: 0;
background: white;  /* Fondo de la galerķa */
 /* Ancho de la galerķa */
}
#galeria_miniaturas {
display: table;
margin: 0 auto;
}
#imgGaleria {
border: 1px solid #F2F2F2;  /* Borde de la imagen */
padding: 3px;
width: x; /* Ancho de la imagen */
height: x; /* Alto de la imagen */
}
.miniatura {
width:  60px;  /* Ancho de las miniaturas */
height:  90px;  /* Alto de las miniaturas */
float: left;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.miniatura:hover {
opacity:.8;   /* Opacidad */
-moz-opacity:.8;
-khtml-opacity:.8;
filter:alpha(opacity=80);
}
.miniatura:active {
opacity:1;
-moz-opacity:1;
-khtml-opacity:1;
filter:alpha(opacity=80);
}