/************************************************************
	Title: Expresso Bibliográfico
	Author: Gea Internet Project » www.geaipc.com
			Diseño: Mario Estrada
			Programación: Oriol Farré

	Release date:
	
*************************************************************/

/* @group Shadow Moses */
body{
	background-color: #ccc;
}
body a{
	text-decoration: none;
}
body a:hover, #headerNav a:hover, #footer a:hover{
	text-decoration: underline;
}
body a:visited{
	color: #00e;
}
#container{
	background-color: white;
	margin-top: 20px;
}
/* @end */

/* @group Top Header */
#top{
	background-color: #408cff;
	border-bottom: 2px solid #0064c7;
}
#headerNav ul{
	text-align: right;
	padding-top: 10px;
	margin-bottom: 0;
	padding-bottom: 10px;
}
#headerNav li{
	display: inline;
	color: #fff;
}
#headerNav a{
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}
.user{
	font-weight: bold;
	font-size: 13px;
}
.login{
	padding-left: 20px;
	background: url(../imgs/iconos/candado.png) no-repeat;
}
.logout{
	padding-left: 20px;
	background: url(../imgs/iconos/disconnect_white.gif) no-repeat;	
}
.ayuda{
	padding-left: 25px;
	background: url(../imgs/iconos/ayuda.png) no-repeat;
	padding-bottom: 1px;
}
/* @end */

/* @group Header */
#main{
	background-color: #fff;
	margin-top: 20px;
}
#logo p{
	display: none;
}
#logo{
	margin-top: 20px;
	background: url(../imgs/logo_expresso.gif) no-repeat;
	height: 80px;
}
#logo img{
	height: 80px;
	width: 270px;
}
#buscador{
	margin-top: 65px;
	text-align: right;
}
#buscador form{
	width: 170px;
	height: 25px;
	border-style: none;
	background: url(../imgs/buscador.gif) no-repeat;
	margin-right: 10px;
	float: right;
	margin-bottom: 5px;
}
#buscador input{
	border-style: none;
	background-color: transparent;
	margin-top: 0;
}
.enviar{
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	float: right;
}
#buscador input[type="text"]{
	width: 100px;
	margin-right: 40px;
	margin-top: 4px;
}
#buscador small{
	color: #666;
	margin-right: 30px;
	background: #e9e9e9 url(../imgs/piu.gif) no-repeat center top;
	padding: 7px 4px 4px;
}
/* @end */

/* @group Menu */


#menu{
	background: url(../imgs/bgmenu.gif) repeat-x;
	height: 27px;
	list-style-type: none;
	padding-top: 4px;
	margin-top: 20px;
}
#menu li{
	color: #fff;
	display: inline;
	padding: 5px;
}
#menu li a{
	color: #fff;
	text-decoration: none;
}
#menu li:hover{
	background-color: #060;
}
.current{
	background-color: #060;
	padding: 5px;
}
li#privado{
	margin-left: 10px;
	position: relative;
	top: 4px;
	background: url(../imgs/privatetab.png) no-repeat;
	padding: 13px 35px;
}
li#privado:hover{
	background: url(../imgs/privatetab.png) no-repeat;
	margin-left: 10px;
	position: relative;
	padding: 13px 35px;
	top: 4px;
}
li#privado a{
	color: #fff;
	font-weight: bold;
}
li#privado a:hover{
	background-color: transparent;	
	color: #fff;
	font-weight: bold;
}
/* @end */

/* @group Sidebar in the air */
#sidebar{
	background: url(../imgs/bgsidebar.jpg) no-repeat right bottom;
	margin-right: 0;
	height: 470px;
	padding-right: 20px;
	padding-left: 15px;
}
#sidebar a:visited{
	color: #000;
}
#sidebar, #content{
	margin-top: 20px;
}
#content{
	width: 740px;
	margin-left: 20px;
	margin-bottom: 20px;
}
.submenu h2{
	font-size: 20px;
	font-weight: bold;
	color: #408CFF;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	margin-bottom: 10px;
	width: 90%;
}
.submenu ul {
	list-style-type: none;
}

.submenu li{
	margin-left: 0;
}
.submenu a{
	color: #333;
	text-decoration: none;
}
.entry p{
	margin-top: 10px;
}
.evento{
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}
.evento p{
	font-size: 11px;
	margin-bottom: 0;
}
.fechaCompleta {
	margin-bottom: -10px;
	margin-top: -20px;
	font-size: 17px;
}
.evento h3{
	font-size: 12px;
	margin-bottom: 0;
}
.vermas{
	background: url(../imgs/iconos/date.png) no-repeat;
	padding-left: 17px;
	font-size: 11px;
	padding-bottom: 3px;
}
.banner{
	background: url(../imgs/banners/sidebar.gif);
	height: 130px;
	width: 140px;
}
/* @group Banner Side */
dd#casals, dd#combel, dd#bambu, dd#ecasals{
	width: 64px;
	height: 64px;
	float: left;
}
dd#casals a, dd#combel a, dd#bambu a, #ecasals a { 
	position: absolute;
	width: 64px;
	height: 64px;
	text-decoration: none;
}
dd#casals a span, dd#combel a span, dd#bambu a span, dd#ecasals a span{
	display: none;
}
dd#casals a:hover, dd#combel a:hover, dd#bambu a:hover, dd#ecasals a:hover{
	display: block;
	position: relative;	
}
dd#casals a:hover {
	background: url(../imgs/banners/sidebar.gif) 0 140px;
}
dd#combel a:hover {
	background: url(../imgs/banners/sidebar.gif) 76px 140px;
}
dd#bambu a:hover {
	background: url(../imgs/banners/sidebar.gif) 0 76px;
}
dd#ecasals a:hover {
	background: url(../imgs/banners/sidebar.gif) 76px 76px;
}
/* @end */
/* @end */

/* @group Path do Navegaçao */
#path{
	margin-bottom: 20px;
	float: left;
}
#path li{
	display: inline;
	font-size: 12px;
	margin-bottom: 0;
	margin-top: 0;
	padding-left: 0;
	margin: 0;
}
#path ul{
	background: url(../imgs/pathbar.gif) no-repeat;
	height: 20px;
	float: left;
	padding: 0 10px 0 0;
	margin: 0;
}
.path_right{
	background: url(../imgs/path_right.gif) no-repeat right;
	height: 20px;
	float: left;
	padding-left: 4px;
}
div#path .startPath{
	padding-left: 13px;
}
/* @end */

/* @group Content */
#content h2{
	font-size: 20px;
	color: #333;
	border-bottom: 1px dotted #666;
}
div#content .tituloNoticia{
	margin-bottom: 10px;
}
#tituloPost h2{
	border-bottom: 0px dotted #666;
	margin-bottom: 0;
}
#tituloPost{
	border-bottom: 1px dotted #666;
	margin-bottom: 10px;
}
.post small{
	background-color: #efefef;
	color: #333;
	padding: 3px 4px;
}
.navigation{
	text-align: right;
}
#bannertop {
    position:relative;
	height: 170px;
	margin-bottom: 10px;
}
#bannertop IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#bannertop IMG.active {
    z-index:10;
}
#bannertop IMG.last-active {
    z-index:9;
}
/* @end */
/* @group Fitxa destacada Home */
#proyectoDestacado{
	margin-top: 20px;
}
#proyectoDestacado h2{
	background: url(../imgs/iconos/libro.gif) no-repeat;
	padding-left: 40px;
}
#fichaProyecto{
	min-height: 290px;
}
div#proyectoDestacado .pictureFrame, div#fichaProyecto .pictureFrame{
	width: 135px;
	height: 230px;
}
div#fichaProyecto .pictureFrame{
	width: 135px;
	height: 180px;
	background-position: 0;
	margin-left: -1px;
}
div#proyectoDestacado .proyecto, div#fichaProyecto .proyecto{
	margin-left: 0;
}
.titulo{
	font-size: 15px;
	color: #03f;
	margin-bottom: 10px;
	line-height: 17px;
}
.dataProyecto{
	font-size: 11px;
	color: #666;
	text-transform: none;
	font-weight: bold;
	margin: 0;
}
.materia{
	font-size: 11px;
	color: #666;
	margin: 0;
}
p.nivel{
	color: #000;
	font-size: 11px;
	text-transform: capitalize;
	font-weight: bold;
	margin-bottom: 5px;
	margin-top: 5px;
}
.eslogan{
	font-size: 12px;
	color: #666;
	text-align: left;
	padding: 3px 5px;
	background-color: #daf3c2;
	margin-bottom: 11px;
	font-weight: bold;
	border-left: 3px solid gray;
}
/*.infantil{
	padding-left: 16px;
	background: url(../imgs/iconos/bullet_pink.png) no-repeat left center;
	color: #ff97f6;
}
.primaria{
	padding-left: 16px;
	background: url(../imgs/iconos/bullet_blue.png) no-repeat left center;
	color: #5ec4f3;
}
.secundaria{
	padding-left: 16px;
	background: url(../imgs/iconos/bullet_orange.png) no-repeat left center;
	color: #ff945f;
}
.bachiller{
	padding-left: 16px;
	background: url(../imgs/iconos/bullet_red.png) no-repeat left center;
	color: #ff4d4e;
}*/

/*.enlacesRelacionados ul{
	list-style-image: url(../imgs/iconos/bullet_point.gif);
}*/
.enlacesRelacionados{
	margin-top: 15px;
}
.enlacesRelacionados li{
	font-size: 12px;
}
.enlacesRelacionados ul{
	list-style-image: url(../imgs/iconos/bullet_point.gif);
	font-size: 12px;
	padding-left: 0;
	margin-bottom: 10px;
	margin-left: -13px;
}
.overlay {
	background: transparent url(../imgs/overlay.png) no-repeat;
	width: 130px;
	position: relative;
	display: block;
	margin-left: -3px;
	height: 205px;
	margin-top: -205px;
}
/* @end */

/* @group Notícias */

/* @group Fecha */
div#noticias .fecha{
	margin-right: 0;
	width: 35px;
}
.fecha{
	text-align: center;
	margin-top: 5px;
	width: 1px;
}
.mes, .dia{
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	width: 30px;
}
.mes{
	border-top: 1px solid #999;
	background-color: #e20000;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	margin-bottom: 0;
}
.dia{
	border-bottom: 1px solid #999;
	background-color: #fff;
	margin: 0;
}
/* @end */
.postData p{
	margin-bottom: 5px;
}
#noticias{
	background-color: #eee;
	padding: 20px;
	margin-bottom: 10px;
}
#noticias hr, #content hr{
	margin-top: 10px;
	margin-bottom: 10px;
}
#noticias span a{
	font-size: 15px;
	color: #333;
	margin-left: 15px;
	padding-left: 15px;
	border-left: 1px solid #666;
}
#noticias h2{
	background: url(../imgs/iconos/noticia.gif) no-repeat;
	padding-left: 40px;
}
div#noticias .postData p{
	font-size: 11px;
	margin-bottom: 5px;
}
#noticiaSingle{
	padding: 10px 20px;
	background: #ecf3ff url(../imgs/cornernoticia.gif) no-repeat left top;
}
#noticiaSingle .postData{
	width: 95%;
	margin-left: 0;
}
#noticiaSingle h2{
	margin-bottom: 5px;
}
.filtro h3{
	font-size: 20px;
	color: #666;
	margin-bottom: 5px;
}
.titular h3{
	font-size: 12px;
	margin-bottom: 0;
	color: #03f;
}
small{
	color: #333;
	font-size: 11px;
}
.leermas{
	padding-left: 17px;
	background: url(../imgs/iconos/bullet_toggle_plus.png) no-repeat 0 center;
}
#nube li{
	display: inline;
	padding-right: 10px;
	margin-left: 5px;
	margin-right: 10px;
	border-right: 1px solid #999;
}
#nube h3{
	margin: 0;
}
img.alignright, img.alignleft, img.aligncenter{
	padding: 10px;
	border: 1px solid #ccc;
	margin: 10px;
}
.alignright{	
	float: right;
	margin-right: 0;
	text-align: right;
}
.alignleft{
	margin-left: 0;
	text-align: left;
	float: left;
}
.aligncenter{
	float: none;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* @end */

/* @group Otros Destacaos */

#otrosDestacados{
	margin-bottom: 20px;
}
#otrosDestacados h2{
	padding-left: 35px;
	background: url(../imgs/iconos/otros_destacados.gif) no-repeat;
}
div#otrosDestacados .resumen{
	margin-left: 0;
}
#otrosDestacados hr{
	width: 95%;
	border-bottom: 1px dotted #999;
	border-top-style: none;
}
.resumen h3{
	font-size: 12px;
	margin-bottom: 5px;
	color: #03f;
	line-height: normal;
}
.image{
	height: 135px;
}
.imageFrame{
	width: 100px;
	height: 170px;
	background-position: 0;
	margin-left: 20px;
}
.overlaySmall {
	background: transparent url(../imgs/overlaysmall.png) no-repeat;
	height: 135px;
	width: 100px;
	position: relative;
	display: block;
	margin-top: -137px;
	margin-left: -2px;
}
.overlaycd {
	background: transparent url(../imgs/overlay_cd.png) no-repeat;
	width: 100px;
	position: relative;
	display: block;
	margin-left: -2px;
	margin-top: -140px;
	height: 101px;
}
/*.overlaySquare {
	background: transparent url(../imgs/overlay_square.png) no-repeat;
	height: 100px;
	width: 100px;
	position: relative;
	display: block;
	margin-left: -2px;
	margin-top: -137px;
}*/
.overlayCustom {
	height: 100px;
	width: 100px;
	position: relative;
	display: block;
	margin-left: -2px;
	margin-top: -137px;
}
.overlayCustomLarge{
	position: relative;
	display: block;
	margin-left: -2px;
	top: -177px;
}
.imageLarge{
	height: 0;
}
.overlayCustomHome{
/*	position: absolute;
	display: block;
	top: 0;
	margin-left: -2px;*/
	position: relative;
	margin-left: -3px;
	top: -3px;
}
.imageContent{
	height: 0;
}
.overlayCustomItem{
	margin-left: -2px;
	position: relative;
	display: block;
	top: -1px;
}
.iconsItem{
	margin-top: 5px;
}
/* @end */

/* @group Footer */
#footer{
	margin-top: 20px;
	margin-bottom: 20px;
}
#footer h4{
	/*background: url(../imgs/logo_expresso_mini.gif) no-repeat;*/
	/*padding-left: 30px;*/
	font-size: 13px;
	color: #333;
	padding-bottom: 10px;
	padding-top: 2px;
	border-bottom: 1px solid #333;
	margin-bottom: 5px;
}
#footer ul{
	padding: 0;
	margin: 0;
}
#footer li{
	display: inline;
	padding: 0 5px 0 0;
	margin: 0 3px 0 0;
	border-right: 1px solid #333;
}

/* My Comment */
#footer li a{
	color: #333;
	text-decoration: none;
	font-weight: bold;
}
/* @end */

/* @group Ficha Item */
/*#fichaProyecto h1, #fichaCorresponsal*/
h1{
	font-size: 25px;
	color: #408cff;
	line-height: 25px;
	border-bottom-style: none;
	margin-bottom: 10px;
}
div#fichaProyecto .dataProyecto{
	font-size: 15px;
}
.precio{
	font-size: 20px;
	font-weight: bold;
}
#detalles{
	padding: 20px;
	background-color: #ebebeb;
	margin-bottom: 30px;
}
#detalles h2{
	padding-left: 30px;
	background: url(../imgs/iconos/detalles.gif) no-repeat 0 center;
}
#detalles dt{
	float: left;
	color: #666;
	margin-right: 10px;
}

#mapa iframe{
	border: 1px solid #666;
	margin-bottom: 20px;
}
#direccion{
	background-color: #ebebeb;
	padding: 14px;
	width: 308px;
}
 #direccion dt{
	float: left;
	color: #666;
	margin-right: 10px;
	width: 60px;
}
#direccion dd{
	width: 263px;
	margin-bottom: 5px;
}
address{
	float: left;
}
#sinopsis{
	margin-bottom: 40px;
}
#sinopsis h2{
	padding-left: 25px;
	background: url(../imgs/iconos/sinopsis.gif) no-repeat 0 center;
}
#sinopsis p{
	padding-left: 25px;
	padding-right: 25px;
}
/* @end */

/* @group Eventos */

#resultEventos{
	margin-bottom: 40px;
}
#resultEventos table{
	background-color: #ededed;
	margin-left: 25px;
	width: 682px;
}
#resultEventos td{
	padding: 10px;
}
#resultEventos h3{
	margin-bottom: 0;
	font-size: 14px;
}
div#resultEventos .fecha{
	margin-top: 0;
}
.infoEvento{
	width: 600px;
}
div#content .navEventos{
	margin-right: 0;
	width: 115px;
	margin-left: 25px;
}
/* @end */

/* @group Listado Productos */
.subtitulo{
	padding: 10px;
	background-color: #deeaff;
	border-width: 1px;
	border-color: #999;
	margin-bottom: 5px;
	margin-left: 0;
	margin-right: 5px;
}
#nivelEducativo ul{
	margin-bottom: 5px;
}
#nivelEducativo li{
	font-size: 13px;
	font-weight: bold;
	margin-left: 0;
	display: inline;
}
#nivelEducativo small{
	font-weight: normal;
	font-style: normal;
}
.listBar{
	height: 32px;
	background-image: url(../imgs/bglistbar.gif);
	margin-bottom: -2px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-left: 10px;
}
.listBar p, .claim p{
	margin-bottom: 5px;
	margin-top: 5px;
}
.paginator{
	text-align: right;
}
#filtro label{
	font-size: 12px;
	color: #333;
	clear: left;
	float: left;
}
#filtro span{
	margin-bottom: 5px;
	float: left;
	margin-right: 20px;
}
#filtro{
	padding-left: 10px;
	padding-bottom: 10px;
	border-left: 2px solid #408cff;
}
#filtro p{
	margin-bottom: 0;
	font-weight: bold;
}
#filtro small{
	color: #666;
}
.enviarButton{
	margin-left: 10px;
}
#tituloCategoria{
	line-height: normal;
	font-size: 35px;
	background-image: none;
	position: relative;
	left: 15px;
	top: 63px;
	margin-top: -50px;
	color: #fff;
}
#resultList{
	border: 1px solid #ccc;
}
#resultList h3{
	font-size: 11px;
	width: 95%;
}
#resultList .resumen{
	height: 120px;
}
#resultList .resumen p{
	line-height: 10px;
}
.destacado{
	position: relative;
	display: block;
	position: relative;
	top: -190px;
	left: 41px;
	height: 0;
}
.productContainer{
	width: 160px;
	float: left;
	border-right: 1px solid #ccc;
	padding-top: 20px;
	text-transform: uppercase;
	padding-left: 23px;
	padding-right: 0;
}
.lastItem{
	border-right-style: none;
}
div#resultList hr{
	text-align: center;
	padding: 0;
	margin-bottom: 0;
	margin-top: 0;
}
.volverarriba{
	height: 22px;
	background: url(../imgs/volverarriba.gif) no-repeat 0 top;
	width: 104px;
}
.volverarriba:hover{
	height: 22px;
	background: url(../imgs/volverarriba.gif) no-repeat 0 bottom;
}
/* @end */

/* @group Corresponsales */

#claim{
	border-right: 1px solid #666;
	padding-right: 20px;
}
#claim h3{
	color: #408cff;
	font-size: 30px;
	line-height: normal;	
	margin-bottom: 0;
}
#corresponsales h3, .claim h3{
	color: #333;
	font-size: 15px;
	margin-bottom: 0;
/*	margin-top: 20px; */
}
#corresponsales ul{
	margin: 0;
}
#corresponsales li{
	list-style-image: url(../imgs/iconos/bullet_black.png);
}
/* @end */

/* @group Formulario */

/* @group Login */
.claim{
	border: 1px solid #ccc;
	padding: 15px;
}
form#login{
	padding: 25px;
	background-color: #ecf4ff;
	margin-bottom: 15px;
}
#login dd{
	float: left;
}
#login label{
	font-weight: bold;
}
#login input[type="text"], #login input[type="password"]{
	border: 1px solid #999;
	font-size: 12px;
}
#login input[type="submit"]{

}
#login input:focus{	
	border-color: #9cf;
	border-width: 1px;
}
#login p, #nube p, #resultEventos p, #resultList [class="iconsItem"]{
	margin-bottom: 0;
}
/* @end */

.direccion p{
	background-color: #ededed;
	padding: 10px;
}
#mailCorresponsal, #contacto{
	width: 308px;
	color: #333;
	font-weight: bold;
	background: #fff url(../imgs/bgform.gif) no-repeat;
	padding: 50px 14px 2px;
	border-bottom: 4px solid #d0d0d0;
	border-right: 4px solid #ccc;
}
#mailCorresponsal dt, #contacto dt{
	float: left;
	width: 60px;
	font-size: 12px;
	text-align: left;
	margin-right: 10px;
}
#mailCorresponsal dd, #contacto dd{
	margin-bottom: 10px;
}
/*#contacto input{
	border: 1px solid #ebb44c;
	background-color: #fff5dc;
}*/
#confirm{
	width: 400px;
	padding: 5px;
	margin-bottom: 10px;
}
#confirm p{
	font-weight: bold;
	text-align: center;
	margin-bottom: 0;
}
.ok{
	background: #c0f1ab;
}
.error{
	background: #ffc9ca;	
}
.disclaimer p{
	margin-left: 70px;
	width: 310px;
	margin-bottom: 10px;
}
/* @end */
.sub{
	font-size: 12px;
	float: none;
}

/* @group Multimèdia */
div#content td{
	border-style: hidden;
	border-width: 0;
	margin: 11px;
}


/* @end */
div.linkItem div.grid_3 {
	text-align: center;
}
.linkItem{
	margin-bottom: 20px;
}
#noEncontrado{
	margin-bottom: 100px;
	text-align: center;
}
.fileItem h3{
	margin-bottom: 0;
	color: #333;
}
.fileItem p{
	margin-bottom: 10px;
}
.fileItem{
	background-color: #e6f0ff;
	border-bottom: 2px solid #999;
	margin-bottom: 10px;
	padding: 15px;
}
.fileItem a:hover{
	text-decoration: none;
}
/* Start custom button CSS here
    ---------------------------------------- */
a[href$=".ppt"] {
	background: url(imgs/iconos/page_white_powerpoint.png) no-repeat left;
	padding: 2px 0 2px 25px;
	font: 12px Verdana;
	text-decoration: none;
	display: none;
	color: black;
}
a[href$=".pdf"] {
	background: url(../imgs/iconos/page_white_acrobat.png) no-repeat left;
	padding: 2px 0 2px 25px;
	font: 12px Verdana;
	text-decoration: none;
}
a[href$=".zip"], a[href$=".rar"] {
	background: url(../imgs/iconos/page_white_compressed.png) no-repeat left;
	padding: 2px 0 2px 25px;
	font: 12px Verdana;
	text-decoration: none;
}
a[href$=".doc"], a[href$=".docx"] {
	background: url(../imgs/iconos/page_white_word.png) no-repeat left;
	padding: 2px 0 2px 25px;
	font: 12px Verdana;
	text-decoration: none;
}
a[href$=".xls"], a[href$=".xlsx"] {
	background: url(../imgs/iconos/page_white_excel.png) no-repeat left;
	padding: 2px 0 2px 25px;
	font: 12px Verdana;
	text-decoration: none;
}
a[href$=".xls"], a[href$=".xlsx"] {
	background: url(../imgs/iconos/page_white_excel.png) no-repeat left;
	padding: 2px 0 2px 25px;
	font: 12px Verdana;
	text-decoration: none;
}
.fileItem a[href$=".jpg"], .fileItem a[href$=".gif"], .fileItem a[href$=".png"] {
	background: url(../imgs/iconos/page_white_picture.png) no-repeat left;
	padding: 2px 0 2px 25px;
	font: 12px Verdana;
	text-decoration: none;
}
    .btn{
      display:inline-block;
      background:none;
      margin:0;
      padding:3px 0;
      border-width:0;
      overflow:visible;
      font:100%/1.2 Arial,Sans-serif;
      text-decoration:none;
      color:#333;
      }
    * html button.btn {
      padding-bottom:1px;
      }
    /* Immediately below is a temporary hack to serve the 
       following margin values only to Gecko browsers
       Gecko browsers add an extra 3px of left/right 
       padding to button elements which can't be overriden.
       Thus, we use -3px of left/right margin to overcome this. */
    html:not([lang*=""]) button.btn {
      margin:0 -3px;
      }
    .btn span {
      background:#ddd url(../imgs/bg-button.gif) repeat-x 0 0;
      margin:0;
      padding:3px 0;
      border-left:1px solid #bbb;
      border-right:1px solid #aaa;
      font-size: 12px;
      }
    * html .btn span {
      padding-top:0;
      }
    .btn span span {
      position:relative;
      padding:3px .4em;
      border-width:0;
      border-top:1px solid #bbb;
      border-bottom:1px solid #aaa;
      }
    
    /* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
    button.pill-l span {
      border-right-width:0;
      }
    button.pill-l span span {
      border-right:1px solid #bbb;
      }
    button.pill-c span {
      border-right-style:none;
      border-left-color:#fff;
      }
    button.pill-c span span {
      border-right:1px solid #bbb;
      }
    button.pill-r span {
      border-left-color:#fff;
      }
    
    /* only needed if implementing separate hover/focus/active state for buttons */
    .btn:hover span, .btn:hover span span, .btn:focus span, .btn:focus span span {
      cursor:pointer; /* important for any clickable/pressable element */
      border-color:#9cf !important;
      color:#000;
      }
    .btn:active span {
      background-position:0 -400px;
      outline:none;
      }
    .btn:focus, .btn:active {
      outline:none; /* doesn't seem to be respected for <button>, only <a> */
      }

    /* use if one button should be the 'primary' button */
    .primary {
      font-weight:bold;
      color:#000;
      }

		#map{
			overflow:hidden;
		}