﻿/* ===== GEN Sites Panel layouts ===== */

/* Global styles to be applied in layout templates */

.imgreplace-2o5 img {
   width: auto !important;
   height: auto !important;
  }

  .panel-separator {
	margin: 0 0 1em 0;
}

  
  
/* ===== Page ===== */

 body {margin: 0; }
 #page { padding-bottom: 70px; }
 #page-wrapper {  }
 body #page #main { margin: 0 auto; width: 977px; min-height: 300px; } /* Width 976px +1 because of calculation error in some browsers */
 body #page #main .section { padding: 0; }
 .panel-display {
	clear: both;
}

/* ===== Layouts ===== */

 .float-left { float: left; }
 .float-right { float:right; }
 .float-odd {	float: right; }  /* alternating float for free floating boxes... */
 .float-even { float: left; }  /*  ...which adapt to central content */
 .clear-right { clear: right; }
 .clear-left { clear: left; }
 .clear-both { clear: both; }
 .min-height-400 { min-height: 400px; }  /* for holding the space in case boxes have no or few content */
 .min-height-250 { min-height: 250px; }
 .min-height-750 { min-height: 750px; }
 
/* --- column layout --- */

.column-2o3 { width: 64%; }
.column-1o3 { width: 30.6%; }
.column-1o4 { width: 25%; }
.column-3o4 { width: 75%; }
.column-1o5 { width: 20%; }
.column-2o5 { width: 40%; }
.column-3o5 { width: 60%; }
.column-4o5 { width: 80%; }

.center-2o5 { 
	/* margin-right: 150px;
	margin-left: 150px; */
	float: left;
	width: 540px;
}
.column-left .inside {	margin-right: 1.5em; }
.column-right .inside { margin-left: 1.5em; }
.column-center .inside { margin-right: 1.5em; margin-left: 1.5em; }

.panel-x-wrapper { 
	margin: 0 -8px;
	clear: both; 
}
.inside-x { padding: 0 5px 10px 5px; min-height: 50px; }

/* ----- old ----- */
.width-3 .inside-x { padding: 0 20px 1px 20px; }
.width-4 .inside-x { padding: 0 25px 1px 25px; }
.width-1 .inside-x,
.width-2 .inside-x { padding: 0 5px 10px 5px; }



	
/* --- 5 columns --- */
/* Page seperated in 5 egual parts. */

 .width-1 { width: 198px; } /* 188px + 2x 5px. Total width = 198px */
 .width-2 { width: 396px; } /* Total: 396px */
 .width-3 { width: 594px; } /* Total: 594px */
 .width-4 { width: 792px; } /* Total: 594px */
 .width-1-wrapper { width: 198px; }
 .width-2-wrapper { width: 396px; }
 .width-3-wrapper { width: 594px; }
 

 
/* overlay special */

.node-type-help img {
 float: right;
 }
 .tutorial-demo.inside-x {
   min-height: auto;
   }
 .tutorial-demo .width-4 {
   width: auto; 
   }
 
/* Tutorial demo */
 .tutorial-demo {
   width: 775px; clear: none; float: right
   }
 .tutorial-demo .width-1 { width: 155px; }
 .tutorial-demo .width-2 { width: 310px; }
 .tutorial-demo .width-3 { width: 465px; }
 .tutorial-demo .width-4 { width: 620px; }

 .tutorial-demo p {
   background: #eee;
   border: 1px #bbb solid;
   padding: 5px;
   margin:5px;
   min-height: 120px;
   font-size: 0.80em; }
 
/* --- 4 columns --- */
/* page seperated in 2 or 4 egual parts */

 .width-half { width: 49.9%; } /* Total: 494px */
 .width-quarter { width: 233px; } /* Total: 247px */

/* ----- Half rows - 2/2 ----- */
 /* View rows shown as boxes with half page width */
  
 .half-row-wrapper p { text-align: justify; }
 .half-row-wrapper .views-row { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;
     margin: 0 5px; width: 474px; height: 155px; vertical-align: top; }
 
/* ----- Quarter rows - 1/1/1/1 ------ */
/* View rows hown as boxes with quarter page width */

 .quarter-row-wrapper .views-row { width: 235px; margin: 0 5px; }
 
 /* Modified original layouts */

 .panel-3col-stacked div.panel-col-first { width: 230px; }
 .panel-3col-stacked div.panel-col { width: 522px; padding: 0 10px; }
 .panel-3col-stacked div.panel-col-last { width: 198px; } 
  
/* ----- Otros ----- */
 .panel-panel table {
	width: 100%;
}
.panel-pane .view .node {
	padding: 10px;
}
