/*
atrioweb.com:  Hoja de estilos
por David Moya. http://www.atrioweb.com/
Última modificación: 10-12-2009

rojo 	color:#F81515;

================================================*/

/*ESTILOS BÁSICOS
--------------------------------------------------------------*/




* {
margin:0px;
padding:0px;
}

body {
background-color: #242424;
}

body, textarea, input, h1,h2,h3,h4, p, a, li {
font: 14px/1.6em "Lucida Grande","Lucida Sans Unicode","Trebuchet MS",Helvetica,Arial,Verdana,sans-serif;
color:#444;
}


@font-face {
	font-family: 'TeXGyreAdventorRegular';
	src: url('/css/fonts/texgyreadventor-regular-webfont.eot');
	src: local('?'), /*url('/css/texgyreadventor-regular-webfont.woff') format('woff'),*/  url('/css/texgyreadventor-regular-webfont.ttf') format('truetype')/*, url('/css/texgyreadventor-regular-webfont.svg#webfont8VMQMndz') format('svg')*/ ;
	font-weight: normal;
	font-style: normal;
}

img, a img {
border:none;
}

a {
	color:#F81515;
	text-decoration:none;
}

a:hover abbr{
  border-bottom: 1px dotted #F81515;
}

abbr, acronym, .help {
  border-bottom: 1px dotted #555;
  cursor: help;
  }

img.aleft{
float:left;
margin: 2px 10px 10px 0;
}

.clear{clear:both}

::-moz-selection { color: #fff;  background: #F81515; }
::selection      { color: #fff;  background: #F81515; }


/*LAYOUT
--------------------------------------------------------------*/

body {
}

#container{
float:left;
background: #fff url(/img/body_bg.gif) repeat-x;
width:100%;
}

#header{
height: 150px;
background-color: transparent;
width:780px;
margin:0 auto;
position:relative;
}

#nav{
position:relative;
width:780px;
margin:0 auto;
height:26px;
}

#content{
width:780px;
margin: 0 auto;
}

#main {
	float:left;
	width: 580px;
	margin: 30px 0 0;
			min-height:500px;
			height:auto !important ;
			height:500px;/*ie*/
}

#sidebar {
	float:right;
	width: 200px;
	margin-top: 50px;
}


#footer {
	clear:both;
	background: #242424 url(/img/bottom_bg.gif) repeat-x;
	min-height:220px;
	padding-top:30px;

}

#footer2 {
	width:730px;
	margin: 0  auto;
	padding-top:30px;
}

/*HEADER
-------------------------------------------------*/

#header #logo {
position:absolute;
top:30px;
left:20px;
width:139px;
height:92px;
text-indent: -9999px;
background: url(/img/logo3.gif);
}

#header #logo a{
display:block;
width:139px;
height:60px;
}



/*NAV
-------------------------------------------------*/

#nav ul {
position:absolute;
bottom:0;
} 

#nav ul li{
display:inline;
} 

#nav ul li a{
display:block;
float:left;
height:26px;
line-height:25px;
padding:0 15px;
background-color:transparent;/*242424*/
color:#fff;
} 

/*#nav ul li a span{
text-decoration:underline;
}*/  


#nav ul li a:hover{
background: url(/img/flechanav.gif) no-repeat 50% 0;
color: #fff;

} 

#nav ul li a.active{
background-color: #FF311B;
color: #000;
font-weight: bold;
} 

#nav ul li a.active:hover{
background-image: none;
} 

#nav #gplus {
position:absolute;
bottom:0;
right:60px;
}


/*MAIN
-------------------------------------------------*/

#main h2, #main h3, #main p, #main dl, #main ul, #main #formmasinfo {
margin: 0 30px 1em 10px; 
}

#main h2 {
font:  2.2em 'TeXGyreAdventorRegular',  "Century Gothic", Verdana, sans-serif;
letter-spacing:1px; 
color:#FF311B;
margin-bottom:0.4em;
text-shadow:1px 1px 1px rgba(0,0,0,0.25);

}

#main h3 {
	font:  1.6em 'TeXGyreAdventorRegular',  "Century Gothic", Verdana, sans-serif;
	color:#555;
	margin-top:1em;
	margin-bottom:0.4em;
	text-shadow:0 1px 1px rgba(0,0,0,0.25);
}

	#home #main h3 {
	}


#main p {
}

#main p a,#main li a{
color:#F81515;
}
#main p a:hover{
text-decoration: none;
border-bottom: 1px dotted #F81515;
}



#main ul {
margin-left:40px;
}

#main ul li{
margin:0 0 1em;
}

	#main div.dest {
	float:right;
	width:240px;
	padding:0 0 0 40px;
	margin:0 0 40px 20px;
	background: url(/img/quote.gif) no-repeat 0 0;
	}

	#main div.dest p{
	font-size:1.2em;
	}


	#main div.dest2 {
	padding:20px 20px 10px;
	background: #eaeaea;
	margin:0 0 1em;
	border:1px solid #ccc;
	border-width: 1px 0;
	}

	#main div.dest2 h3{
	margin: 0 30px 0.4em 10px;
	}

#main img.dest{
padding:4px;
background: #fff;
border:1px solid #aaa;
}

#main .resaltado {
margin-top:2em;
color:#333;
padding:1em;
background-color: #eee;
}

#main .webir{
background: url(/img/icon_window_new.gif) 0 4px no-repeat;
padding-left:24px;
line-height:16px;
}

#main .anteri a{
background: url(/img/arrow1.gif) 0 7px no-repeat;
padding: 0 0 0 14px;

}

#main .siguie{
text-align: right;
}


#main .siguie a{
background: url(/img/arrow2.gif) 100% 7px no-repeat;
padding: 0 14px 0 0;
}

/*AWESOME BUTTONS
-------------------------------------------------*/

#main p.masinfo {
background: url(/img/008.png) 0 4px no-repeat;
padding:0 0 0 24px;
}


#main p.masinfo a {
	background: #222 url(/img/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

	#main p.masinfo a:hover							{ background-color: #111; color: #fff; }
	#main p.masinfo a:active							{ top: 1px; }
	#main p.masinfo a, #main p.masinfo a:visited,
	#main p.masinfo  	a	{ font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
	
	#main p.masinfo a {background-color: #F81515;color:#fff;}
	#main p.masinfo a:hover	{ background-color: #c61111; }
	


/*tablas--------------------------------------------------------*/

	/*INICIO TABLA */

	table
	{	width:93%;
	margin: 0 10px 20px;
		border-left:1px solid #999;
		border-top:1px solid #999;
		border-spacing:0px;/*por seguridad, ponerlo para eliminar el cellspacing en Mozilla. IE no lo soporta*/
	}

	table th
	{
		border-right:1px solid #999;
		border-bottom:1px solid #999;
		background: url(/img/th-back.gif) top left no-repeat;
		padding:0.2em 1em;
		border-spacing:0;
		vertical-align:top;
		white-space:nowrap;
		line-height:normal;
		color:#333;
		text-align:left;
	}

	table tr
	{
		margin:0;
		padding:0;
		border-spacing:0;
	}

	table td
	{
		border-right:1px solid #999;
		border-bottom:1px solid #999;
		margin:0 1em;/*?*/
		padding:0.2em 1em;
		border-spacing:0;
		vertical-align:top;
	}

	table td.posicion
	{
	text-align: center;
	}

	table td.posicion a
	{
	font-weight: bold;
	padding: 0 5px;
	}

	/*FIN TABLA */


/*subir (moo.fx)--------------------------------------------------------*/

#main p.subir {
float:right;
padding:0;
}

#main p.subir a{
display:block;
width:13px;
height:12px;
background: url(/img/subir.gif) no-repeat;
text-indent:-9999px;
}

#main p.subir a:hover{
background: url(/img/subir_on.gif) no-repeat;
border:none;
}

/*siguiente (moo.fx)--------------------------------------------------------*/

#main em.siguiente {
display:block;
float:right;
margin-top:10px;}

#main em.siguiente a{
display:block;
width:13px;
height:12px;
background: url(/img/siguiente.gif) no-repeat;
text-indent:-9999px;
}

#main em.siguiente a:hover{
background: url(/img/siguiente_on.gif) no-repeat;
border:none;
}


/*HOME--------------------------------------------------------*/

#home #main ul li strong{
color:#333;
}


/**/

#main .index-trabajos {

width:44%;
float:left;
display:inline;
margin-right:20px;
margin-left:10px;
}

#main .index-trabajos .last{
margin-right:0;
margin-left:0;
}

#main .index-trabajo {
clear:both;
display: block;
	margin: 0 0 0 0;
	padding: 10px 0 20px 0;
	border-top: 1px solid #aaa;
	min-height: 60px;
	}


#main .index-trabajo dl{
	margin: 0 0 5px 110px;
	padding: 0;
}
#main .index-trabajo dl dt{
	font-weight: bold;
	color: #F81515;
}
#main .index-trabajo dl dt a, #main .index-trabajo dl dd a{
	background: none;
	text-decoration: none;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	display: inline;
	color:#F81515;
	font-weight: bold;
}
#main .index-trabajo dl dt a:hover, #main .index-trabajo dl dd a:hover{
	text-decoration: none;
	border-bottom: 1px dotted #F81515;
}
#main .index-trabajo dl dd{
	margin: 0;
	padding: 0;
}
#main .index-trabajo dl dd.link{
	margin-top: 1em;
}


#main .index-trabajo a.thumbnail{
	display: block;
	float: left;
	margin: 0 10px 5px 0;
	padding: 10px 10px 20px 10px;
	background: #fff url(/img/websp_bg.gif) 0 0 no-repeat;
	overflow: hidden;
	text-decoration: none;
}
#main .index-trabajo a.thumbnail:hover{
	background: transparent url(/img/websp_bg_on.gif) 0 0 no-repeat;
}
#main .index-trabajo a.thumbnail img{
	display: block;
	background: #fff;
	
}
#main .index-trabajo a.thumbnail:hover img{
	background: #fa0000;
}




/* Easy Slider */
	


#slideshow{
position:relative;
}

#slides div{width:575px;height:235px;overflow:hidden; }

#slides div a{ 
	display:block;
	background: url(/img/webs_bg.gif) no-repeat;
	width:560px;
	height:195px;
	padding: 15px 0 0 15px;
	margin:0;
	overflow:hidden; 
	}

#slides div span a{
	display:inline;
	background: none;
	margin: 0 !important;
	padding: 0 0 0 10px !important;
	text-decoration:none;
}

#slides div span a strong{
	color:#F81515 !important;
}

#slides div span a:hover strong{
	text-decoration: none;
	border-bottom: 1px dotted #F81515;
}


/*PREV, NEXT*/ 

/*ejemplo jcycle de http://jquery.malsup.com/cycle/pager11.html*/ 
/*
#slidePrev, #slideNext {
position:relative;
z-index:29;
}

a#slidePrev, a#slideNext {
position:relative;
display:block;
height:64px;
top:-190px;
width:51px;
z-index:30;
text-indent:-9999px;
outline:0;
}

a#slidePrev {
background:url("/img/slide-previous2.png") no-repeat scroll 0 0 transparent;
float:left;
margin:0 0 0 20px;
}

a#slideNext {
background:url("/img/slide-next2.png") no-repeat scroll 0 0 transparent;
float:right;
margin:0 38px 0 0;
}

a#slidePrev:hover, a#slideNext:hover { background-position: 0 -64px;}
 
*/ 



/*PAGINACION/ENLACES INDIVIDUALES A CADA SLIDE*/ 

/* con pagerAnchorBuilder, ejemplo jcycle http://jquery.malsup.com/cycle/pager11.html*/

/*#slidePager { margin: 10px; position: relative }
#slidePager li { float: left; list-style: none}
#slidePager a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#slidePager a.activeSlide { background: #faa; color: black }
#slidePager a:focus { outline: none; }
*/ 

/*con bitcons y numeracion*/
/*#slidePager-wrap {text-align:center;margin:0 auto;width:300px}
#slidePager { margin: 10px; }
#slidePager li { float: left; list-style: none}
#slidePager li a { display:block;width:16px; height:16px; margin: 5px; line-height:16px;background: url(/img/icorojo.gif) no-repeat 0 0; color: #fff; text-decoration: none }
#slidePager li a.activeSlide { background: url(/img/icorojo2.gif) no-repeat 0 0;  }
#slidePager li a:focus { outline: none; }
*/ 

/*sin pagerAnchorBuilder, con imagenes de fondo sin numeracion, ejemplo y código (modificado parcialmente) sacado de http://para.llel.us/themes/unite/index.html*/

/*#slidePager {
	position: relative;
	z-index: 29;
	top: -348px;
	float: right;
	margin:0 -35px 0 0;
}
*/ 

#slidePager-wrap {
margin: 0 auto;
width:220px;
}

#slidePager li {
	display:inline;
}


#slidePager a, #slidePager a:visited {
	background:url("/img/slide-pager.png") no-repeat scroll 0 0 transparent;
	float:left;
	height:15px;
	overflow:hidden;
	text-decoration:none;
	text-indent:-1234px;
	width:16px;
	outline:0;
}
#slidePager a:hover {
	background-position: -16px 0;
}
#slidePager a.activeSlide {
	background-position: -32px 0;
	background:url("/img/slide-pager.png") no-repeat scroll -32px 0 transparent;

}


	/*raya separador*/
	.clearhome{
		clear:both;
		height:1em;
		margin: 0 0 1em;
		background: url(/img/separador1.gif) no-repeat 35% 100%;
		padding: 0 0 30px 0;
	}

/* // Easy Slider */



#li-servicios div{
/*display:none;*/ 
}


#li-servicios h4{
display:inline;
color:#F81515;
cursor:pointer;
position:relative;
}


#li-servicios h4:hover{
background: url(/img/001.png) no-repeat 100% 0;
padding:0 20px 0 0;
}

#li-servicios h4.active:hover{
background: url(/img/002.png) no-repeat 100% 0;
padding:0 20px 0 0;
}
 





/*TRABAJOS-------------------------------------------------*/

.web{
	background: url(/img/separador1.gif) no-repeat 35% 100%;
	padding: 0 0 30px 0;
}

.webimg {
	background: url(/img/webs_bg.gif) no-repeat;
	width:560px;
	height:210px;
	padding: 15px 0 0 15px;
}


/*CLIENTES-------------------------------------------------*/

#clientes_img img{
padding: 0 30px 20px 0;
}

/*CONTACTO

formmasinfo-------------------------------------------------*/

#formmasinfo {
}

#formmasinfo form {
	margin: 1em 0 0;
}

#formmasinfo fieldset{
	border:none;
}

#formmasinfo label {
	display:block;
	margin-bottom:0.2em;
}

#formmasinfo input{
	width:180px;
	margin-bottom:0.2em;
	margin-left:0;
	padding:0.2em;
}

#formmasinfo textarea {
	width:400px;
	height:150px;
	padding:0.2em;

}


#formmasinfo input.boton {
	margin-top:1em;
	width:auto;
	cursor:pointer;
	color:#333;
}

#formmasinfo p {
margin-left:0;
}

/*address-------------------------------------------------*/

dl#address {
	margin-top:2em;
	color:#333;
	padding:1em;
	background-color: #eee;
}

dl#address dt {
	font-size:1.4em;
	font-family: "Century Gothic", Verdana, sans-serif;
}

dl#address dd {}

dl#address dd span {
	display:block;
	float:right;
	text-align:right
}



/*SIDEBAR
-------------------------------------------------*/

#sidebar h4{
background-color: #e4e4e4;
color:#444;
padding:4px 4px 4px 10px;
font-weight: bold;
}

#sidebar ul{
margin-bottom:2em;
}

#sidebar ul li{
background-color: #fff;
border-bottom:1px solid #f4f4f4;
list-style:none;
margin-left:0px;
}

#sidebar ul li a{
display:block;
padding: 5px 5px 5px 10px;
color:#444;
}

/*
	#sidebar ul li a#menu-disenoweb{
	background: url(/img/package_graphics.png) 2px 6px no-repeat;
	}

	#sidebar ul li a#menu-programacion{
	background: url(/img/misc.png) 2px 6px no-repeat;
	}

	#sidebar ul li a#menu-hosting{
	background: url(/img/raid.png) 2px 6px no-repeat;
	}

	#sidebar ul li a#menu-inmo{
	background: url(/img/folder_home.png) 2px 6px no-repeat;
	}

	#sidebar ul li a#menu-dominios{
	background: url(/img/browserwww.png) 2px 6px no-repeat;
	}


	#sidebar ul li a#menu-seo{
	background: url(/img/xmaggoogle.png) 2px 6px no-repeat;
	}

	#sidebar ul li a#menu-moviles{
	background: url(/img/mobile.png) 2px 6px no-repeat;
	}

	#sidebar ul#menu-trabajos li a{
	background: url(/img/ok.png) 2px 6px no-repeat;
	}
*/ 

#sidebar ul li a:hover{
background-color: #f4f4f4;
color:#222;
}

#sidebar ul li.active a{
color:#000;
padding: 5px 5px 5px 20px;
}


#sidebar p{
margin-left:10px;
}




/*FOOTER
-------------------------------------------------*/

#footer p {
color: #fff;
margin-bottom:1em;

}

#footer p a{
color:#FF311B;
}

#footer p a:hover{
text-decoration: none;
border-bottom: 1px dotted #F81515;
}

#footer #side {
float:right;
}

#footer #side p{
text-align:right;
}


/* MEDIA QUERIES
-------------------------------------------------*/


@media only screen and (max-device-width:800px),screen and (max-width:800px){


#container{
}

#header{
	width:100%;
}

#nav{
	width:100%;
}

#content{
	width:100%;
}

#main {
	float:none;
	width:100%;
}

#sidebar {
	float:none;
	width:auto;
	margin: 0 20px;
}


#footer {
}

#footer2 {
width:90%;
}







}/*fin media query*/