/* - - - - - - - - - - - - - - - - - - - - -

Título          : Colegio Sagrada Familia
URL             : www.csf.com

Descripción :   : Hermanas Educacionistas Franciscanas de Cristo rey

Autor           : Estudio v1
Site            : www.estudiov1.com
Creado          : ABRIL 11, 2012
Modificado      : 

- - - - - - - - - - - - - - - - - - - - - */

/*****************************************************
                 RESET Y GLOBALES                                         
***************************************************/

@import "../css/reset.css";
@import "../css/default.css";

@font-face {
    font-family: 'Helvetica75Bold';
    src: url('../fonts/helvetica75-bd-webfont.eot');
    src: url('../fonts/helvetica75-bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helvetica75-bd-webfont.woff') format('woff'),
         url('../fonts/helvetica75-bd-webfont.ttf') format('truetype'),
         url('../fonts/helvetica75-bd-webfont.svg#Helvetica75Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #282828;
	line-height: 19px;
}

body {
	background: url(../images/bg-content.png) repeat left top;
}

strong {
	font-weight: bold;
}

h1 {
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 26px;
	line-height: 24px;
	text-transform: uppercase;
	font-weight: normal;
	color: #0f3286;
	padding-top: 40px;
}

h2 {
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 24px;
	text-transform: uppercase;
	font-weight: normal;
	color: #0f3286;
	padding-bottom: 15px;
}

h3, h4, .album {
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	font-weight: normal;
	color: #0f3286;
	padding-bottom: 15px;
}

h4, .album {
	font-size: 14px;
	line-height: 18px;
	padding-bottom: 10px;
}

p, a {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	line-height: 19px;
	padding-bottom: 10px;
}

a {
	color: #688bdd;
}

a:hover {
	color: #0f3286;
}

ul.listas li {
	list-style: inside;
	list-style-type: disc;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	line-height: 19px;
}

a.leermas, .leermas span {
	display: block;
	width: 95px;
	height: 30px;
	padding: 10px 0 0  15px;
	background: url(../images/bg-leermas.png) no-repeat left top;
	
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	color: #FFF;
}

table.tabla {
	width: 100%;
}

table.tabla th {
	padding: 5px;
	background: #081b48;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #FFF;
}

table.tabla td {
	padding: 10px;
	border-bottom: 1px solid #6284d3;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
}

table.tabla tr:hover {
	background: #c7d3f0;
}

/*****************************************************
                 LAYOUT                                       
***************************************************/


/*************** HEADER ************************/

#headerWrapper {
	width: 100%;
	height: 196px;
	background: url(../images/bg-header.png) repeat-x left top;
}

#header {
	position: relative;
	width: 960px;
	height: 126px;
	margin: 0 auto;
	background: url(../images/bg-header.jpg) no-repeat center top;
}

#header #logo {
	width: 367px;
	padding-top: 50px;
}

#menu-secundario {
	position: absolute;
	width: 248px;
	height: 48px;
	right: 0;
	top: 12px;
	background: url(../images/bg-menu2.png) no-repeat left top;
}

#menu-secundario ul li {
	display: block;
	float: left;
}

#menu-secundario ul li a {
	display: block;
	height: 38px;
	padding-top: 10px;
	padding-left: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #0f3286;
	font-weight: bold;
	text-transform: uppercase;
}

#menu-secundario ul li a.btnNoticias {
	width: 87px;
}

#menu-secundario ul li a.btnPromos {
	width: 132px;
}

#menu-secundario ul li a:hover {
	color: #6a8ddf;
}

#menu {
	position: relative;
	width: 960px;
	height: 80px;
	margin: 0 auto;
	margin-top: -10px;
	z-index: 10;
}

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

#menu ul li {
	display: block;
	list-style: none;
	margin: 0;
	margin-right: 5px;
	float: left;
	background: url(../images/menu-separador.png) no-repeat right 30px;
}

#menu ul li:last-child {
	background: none;
}	

#menu ul li a {
	display: block;
	padding: 35px 27px 30px 15px;
	height: 13px;
	
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #aec1ed;
	text-transform: uppercase;
	font-weight: normal;
}

#menu ul li a.btnInicio {
	background: url(../images/btn-inicio.png) no-repeat;
	background-position: 0px -78px;
}

#menu ul li a.btnInst {
	background: url(../images/btn-inst.png) no-repeat;
	background-position: 0px -78px;
}

#menu ul li a.btnNiveles{
	background: url(../images/btn-niveles.png) no-repeat;
	background-position: 0px -78px;
}

#menu ul li a.btnAdmision {
	background: url(../images/btn-admision.png) no-repeat;
	background-position: 0px -78px;
}

#menu ul li a.btnNoticias {
	background: url(../images/btn-noticias.png) no-repeat;
	background-position: 0px -78px;
}

#menu ul li a.btnContacto {
	background: url(../images/btn-contacto.png) no-repeat;
	background-position: 0px -78px;
}

#menu ul li a:hover {
	/*background-position: right bottom;*/
	color: #FFF;
}

#menu ul li a.btnActivo {
	background-position: right bottom;
	color: #FFF;
}

#menu ul li a.space{
	width: 73px;
	background: none;
}

#menu #escudo {
	position: absolute;
	top: -35px;
	left: 40%;
	width: 202px;
	height: 159px;
	z-index: 5;
} 

#contenido-separador, #contenido-separador-interna {
	position: relative;
	width: 100%;
	height: 67px;
	background: url(../images/separador-contenido.png) no-repeat center center;
	margin-top: -30px;
	z-index: 999;
}

#contenido-separador-interna {
	height: 40px;
	background: url(../images/separador-contenido-internas.png) no-repeat center center;
}

#contenidoWrapper {
	width: 100%;
	height: auto;
	background: url(../images/bg-contenido.jpg) repeat left top;
}

#contenido {
	width: 960px;
	height: auto;
	margin: 0 auto;
	padding: 25px 0px 35px 0px;
}

.colLeft {
	position: relative;
	width: 280px;
	height: auto;
	padding-right: 25px;
	float: left;
}

.colRight {
	width: 630px;
	height: auto;
	padding-left: 25px;
	float: right;
}

.separador-vertical {
	background: url(../images/separador-vertical.png) repeat-y left top;
}

.separador-vertical-largo {
	background: url(../images/separador-ofrecemos.png) no-repeat left center;
}

.imgBorde {
	padding: 5px;
	background: #FFF;
	margin-bottom: 15px;
}

#nota {
	width:250px;
	height: 130px;
	padding: 30px 15px;
	background: url(../images/bg-papel.jpg) no-repeat left top;
}

.print {
	display: block;
	padding: 3px 0 3px 30px;
	background: url(../images/ico-print.png) no-repeat left center;
}

.pdf {
	display: block;
	padding: 3px 0 3px 25px;
	background: url(../images/ico-pdf.png) no-repeat left center;
}

#paginacion {
	width: 100%;
	text-align: center;
}

#paginacion a, #paginacion span {
	display: inline;
	padding: 3px 7px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	
	behavior: url(./PIE.php)
	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #282828;
}

#paginacion a:hover, #paginacion span {
	background: #0F3286;
	color: #FFF;
}

/*****************************************************
                 INICIO                                        
***************************************************/

/***************** banner *************************/

#bannerWrapper {
	width: 100%;
	height: auto;
	background: url(../images/bg-banner.jpg) repeat-x left top;
	margin-top: -5px;
}

#banner {
	position: relative;
	width: 1000px;
	height: 350px;
	margin: 0 auto;
	padding: 0;
}

#titulo {
	position: relative;
	width: 960px;
	height: 120px;
	margin: 0 auto;
	padding: 0;
}

#banner img {
	position: absolute;
	top: 0;
	left: 0;
}

#banner .fadeLeft {
	position: absolute;
	top: 0;
	left: -5px;
	width: 80px;
	height: 350px;
	background: url(../images/left-fade-slide.png) no-repeat top left;
	z-index: 800;
}

#banner .fadeRight {
	position: absolute;
	top: 0;
	right: -5px;
	width: 80px;
	height: 350px;
	background: url(../images/right-fade-slide.png) no-repeat top left;
	z-index: 800;
}

/********************** SLIDER DE SANTOS ******************************/


#santos {
	position:absolute;
	width: 310px;
	height: 220px;
	top:0px;
	left:-30px;
	z-index:100;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/
.slides_container {
	width: 310px;
	height: 220px;
	display: none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/
.slides_container div {
	width: 310px;
	height: 220px;
	height: 105px;
	display:block;
}

/*
	Optional:
	Reset list default style
*/
.pagination {
	list-style:none;
	margin:0;
	padding:0;
}

/*
	Next/prev buttons
*/

#santos .next,#santos .prev {
	position:absolute;
	bottom:10px;
	right:50px;
	width:25px;
	height:25px;
	display:block;
	overflow: hidden;
	text-indent: -1000px;
	z-index:101;
	background: url(../images/santos_prev.png) no-repeat;
	background-position: left top;
	padding: 0;
}

#santos .next {
	right:20px;
	background: url(../images/santos_next.png) no-repeat;
	background-position: left top;
}

#santos .next:hover,#santos .prev:hover {
	background-position: left bottom;
}

/*
	Otras configuraciones
*/

.santos {
	display: block;
	position: relative;
	width: 150px;
	height: 105px;
	padding: 20px 20px 40px 70px;
	background: url(../images/bg-santos.png) #aa8866 repeat-x left bottom;
	border: 1px solid #654134;
	margin-top: 55px;
	float: right;
	
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	
	behavior: url(./PIE.php);
}

.santos h3 { color: #FFF; padding-bottom: 10px;  }

.santos p { color: #ad978f; line-height: 15px; }

.sanFrancisco {
	display: block;
	position: absolute;
	top: -63px;
	left: -65px;
	width: 140px;
	height: 229px;
}

.margarita {
	display: block;
	position: absolute;
	top: -14px;
	left: -41px;
	width: 126px;
	height: 178px;
}

.pt250 {
	padding-top: 250px;
}

/************* TERMINA SLIDER DE SANTOS ******************************/

.bannerInsc {
	position: relative;
	width: 130px;
	height: 55px;
	margin-bottom: 25px;
	padding: 40px 20px 25px 130px;
	background: url(../images/bg-inscripcion.png) #f2ca36 repeat-x left bottom;
	
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	
	behavior: url(./PIE.php);
}

.bannerInsc .inscImg {
	position: absolute;
	top: -1px;
	left: -20px;
	width: 134px;
	height: 132px;
}

.bannerInsc a {
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #644033;
	text-transform: uppercase;
	font-weight: normal;
	padding-bottom: 15px;
}

.bannerInsc a:hover {
	color: #FFF;
}

.avisos h2 {
	display: block;
	padding-left: 30px;
	background: url(../images/ico-avisos.png) no-repeat left top;
}

.avisos img {
	margin-bottom: 15px;
}
	
#bienvenida {
	width: 630px;
	height: auto;
}

#ofrecemos {
	position: relative;
	width: 630px;
	height: auto;
	margin-top: 20px;
	background: url(../images/bg-ofrecemos.png) #f2ca36 repeat-x left bottom;
	
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	
	behavior: url(./PIE.php);
}

#ofrecemos .articulo {
	width: 275px;
	height: auto;
	padding: 20px;
}

.doblez {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 62px;
	height: 54px;
	background: url(../images/doblez.png) no-repeat left bottom;
}

/*****************************************************
                 INSTITUCION                                        
***************************************************/

#submenu {
	position: relative;
	width: 240px;
	height: auto;
	padding: 20px;
	padding-bottom: 30px;
	margin-bottom: 30px;
	background: url(../images/bg-submenu.png) #f2ca39 repeat-x left bottom;
	
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	
	behavior: url(./PIE.php);
}

#submenu ul li {
	display: block;
	width: 240px;
	background: url(../images/submenu-separador.png) repeat-x left top;
}
#submenu ul li:first-child {
	background: none;
}

#submenu ul li a {
	display: block;
	width: 240px;
	padding: 12px 0;
	
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #644033;
	text-transform: uppercase;
}

#submenu ul li a:hover {
	color: #aa8866;
}

#submenu ul li:first-child a {
	padding-top: 0;
}

/*****************************************************
                 NOTICIAS                                        
***************************************************/

.noticias {
	padding: 15px;
	border-bottom: 1px solid #CCC;
}

.noticias .img {
	display: block;
	float: left;
	width: 215px;
}

.noticias .txt {
	width: 370px;
	float: right;
}

/*****************************************************
                 GALERIA                                       
***************************************************/

.album {
	display: block;
	position: relative;
	width: 230px;
	padding-top: 260px;
	float: left;
	text-align: center;
	overflow: hidden;
	background: url(../images/bg-galeria.png) no-repeat left top;
}

.album span {
	position: absolute;
	top: 28px;
	left: 27px;
	display: block;
	width: 170px;
	height: 195px;
	overflow: hidden;
}

.album:hover {
	color: #688bdd;
}

.foto {
	display: block;
	width: 190px;
	height: 220px;
	border: 5px solid #FFF;
	overflow: hidden;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0;
	float: left;
}

/*****************************************************
                 PROMOS                                       
***************************************************/

.promo {
	display: block;
	width: 200px;
	height: 200px;
	overflow: hidden;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0;
	float: left;
}

.promo img {
	border: 5px solid #FFF;
}

.promo span {
	display: block;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	line-height: 19px;
	padding-top: 5px;
	text-align: center;
}
	

/*****************************************************
                    CONTACTOS                                  
***************************************************/

form#contactos input[type=text] {
	position: relative;
	width: 220px;
	height: 16px;
	padding: 5px;
	float: left;
	border: 1px solid #CECECE;
	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	
	background: #FFF;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	behavior: url(./PIE.php);
}
	
form#contactos	label {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	line-height: 19px;
	display: block;
	width: 60px;
	float: left;
}
	
form#contactos textarea {
	width: 210px;
	height: 180px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #282828;
	line-height: 19px;

	padding: 8px 10px;
	border: 1px solid #CECECE;
	
	background: #FFF;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	behavior: url(./PIE.php);
}

.contactoForm {
	width: 320px;
	float: left;
}

.datosContacto {
	width: 315px;
	float: right;
}

#mapContacto {
	position: relative;
	width: 280px;
	height: 280px;
	border: 1px solid #CECECE;
}


/*****************************************************
                 FOOTER                                        
***************************************************/

#footerWrapper {
	width: 100%;
	height: 375px;
	background: url(../images/bg-footer.jpg) repeat-x left bottom;
}

#bg-footer {
	width: 100%;
	height: 300px;
	background: url(../images/footer.png) no-repeat center top;
}

#footer {
	width: 940px;
	height: 300px;
	padding: 40px 10px 0 10px;
	margin: 0 auto;
}

#footer h3 {
	color: #FFF;
}

.tresCol {
	width: 260px;
	padding: 0 25px;
	float: left;
}

.noticia, .datosContacto {
	width: 100%;
	height: auto;
	padding: 15px 0 10px 0;
	background: url(../images/separador-noticias.png) repeat-x left top;
}

.datosContacto p {
	padding-bottom: 3px;
	color: #000;
}

div.noticia:first-child, div.datosContacto:first-child {
	padding-top: 0;
	background: none;
}

.noticia .imgNoticia {
	display: block;
	width: 70px;
	height: 60px;
	float: left;
	border: 3px solid #ad978f;
	overflow: hidden;
	padding: 0;
} 

.noticia p {
	display: block;
	width: 170px;
	line-height: 15px;
	padding-bottom: 3px;
	float: right;
	color: #000;
}

.noticia p span {
	color: #FFF;
}

.noticia a {
	color: #FFF;
}

.noticia a:hover {
	color: #ad978f;
}

form#suscribirse label {
	display: block;
	width: 60px;
	padding-right: 10px;
	padding-top: 8px;
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: normal;
	color: #FFF;
	text-align: right;
}

form#suscribirse input[type=text] {
	position: relative;
	width: 180px;
	height: 15px;
	padding: 5px;
	background: #c4b4ae;
	
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	
	behavior: url(./PIE.php);
	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

button span {
	font-family: 'Helvetica75Bold', Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: normal;
	color: #FFF;
	text-align: right;
}

#copyright {
	width: 960px;
	padding-top: 15px;
	margin: 0 auto;
}

#copyright p {
	color: #797786;
}