﻿/* GENERAL Categorías no concretas */
body {
	margin:0; padding:0;
	text-align:center;
	background:url(pattern1-light.png) #ab2536; color:#FFF;
	font-family:arial,sans-serif; font-size:12pt;
	}
a {text-decoration:none; color:#E45}
#nav a:focus, #header a:focus, .splitter  a:focus {outline:none}
a:hover {color:#F00}	
.wrapper {
	width:960px;
	margin:0 auto; padding:0px;
	text-align:left;
	clear:both;	
	}
img {max-width: 100%}
a img {border:none}
.clear {clear:both}
#footer, body .section, #slideshow, .cuadro {
	margin:1em 0px 4em 0px; padding:5px; 
	clear:both; background:url(bg-graysection.png) #333; color:#FFF; border:6px solid #8c1e2c;
	-webkit-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.6); -moz-box-shadow:inset 3px 3px 5px rgba(0,0,0,0.6); box-shadow:inset 3px 3px 5px rgba(0,0,0,0.6);}
body .section, #slideshow, .cuadro {
	-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
body .section h2 {text-shadow:3px 3px 5px rgba(0,0,0,0.6)}
#content h1 {font-size:250%; line-height:32px; color:#8c1e2c; margin:0px 0px -22px 20px}
.section .article, .articles a {
	float:left;
	color:#555;
	background:url(/.style/bg-whitelow.png) bottom repeat-x #FFF;
	margin: 15px 75px;
	padding: 5px;
	width: 300px;
	border: solid 1px #b4b4b4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.6); -moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.6); -o-box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.6);
	-webkit-transition:box-shadow .6s ease-out; -moz-transition:box-shadow .6s ease-out; -o-transition:box-shadow .6s ease-out;
	transition:box-shadow .6s ease-out; 
} * html #logo .article {margin:15px 50px}
.section .article a {color:inherit !important}
.section .article h3 , .section .article strong { margin:10px 0 5px 0; display:block; font-size:120%; text-align:center;}
.section .article:hover {-webkit-box-shadow: 0px 0px 15px #FFF, 0px 0px 3px #FFF; -moz-box-shadow: 0px 0px 10px #FFF, 0px 0px 3px #FFF; box-shadow: 0px 0px 10px #FFF, 0px 0px 3px #FFF; border-color:#FFF; color:#333}
.clear {clear:both;}

.section {
	}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0; }

/* LAYOUT 4 elementos básicos  */
#nav {
	background:url(bg-nav.png) top repeat-x; height:60px; border:0;
	padding:0;
	} * html #nav {background-image:url(bg-nav-IE6.gif)}
#header {}
#content {}
#footer {border-width:6px 0 0 0; margin:0; padding-bottom:30px}

/* DESIGN Todas las páginas Esquema detallado */
#nav .wrapper {padding:0}
#nav input {
	display:block; float:right;
	width:200px; height:25px;
	margin:12px;
	background:#CCC; border:0;
	-moz-border-radius:5px; -qwbkit-border-radius:5px; border-radius:5px;
	}
#nav input:hover, #nav input:focus {background:#FFF;}
#nav ul {
	display:block;
	margin:0; padding:0;
	}
#nav li {
	display:block; float:left;
	list-style:none;
	}
#nav li a {
	display:block; float:left;
	height:50px; line-height:50px;
	padding:0 10px; margin:0;
	color:#c45;
	}
#nav li a:hover {
	background:url(bg-nav-a-hover.png) top left no-repeat #c45;
	color:#FFF;
	}
#nav li img {
	margin-top:20px}
	
#header h1 {
	float:left;
	border:none;
	}
	
#header h1 a {display:block; height:55px; width:250px; margin:0; padding:0;
	background:url(logotipo-surgever.png) 0 -0px no-repeat; border:0px solid #F0F;
	} * html #header h1 a {background-image:url(logotipo-surgever-IE6.gif)}
#header h1 a:hover {background-position:0 -55px;}
#header h1 a:active:hover {background-position:0 -110px;}
body.zh #header h1 a {background:url(logotipo-xungefeng.png) no-repeat;}
#header h1 a strong {display:none}
#social {
	float:right;
	margin:0; padding:0;
	list-style:none;
	}
#social li {float:right; margin:10px 0 0 10px}
#social a {display:block; width:41px; height:41px; background:url(social-buttons.png) no-repeat; position:relative;
	-webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; }
#social:hover a {opacity:0.6}
#social a:hover {top:2px; opacity:1}
#social span {display:none} 
#linkdev {background-position:0px 0px}
#linktwi {background-position:-41px 0px !important}
#linkfac {background-position:-82px 0px !important}
#linkrss {background-position:-123px 0px !important}

#footer li {
	display:block; float:left;
	list-style:none; margin:0 5px}
#footer p {clear:both}

	/* SPECIFIC : solo algunas paginas */
.sliderbutton {float:left; width:32px;}
.sliderbutton span {cursor:pointer}
#slideshow {clear:both; position:relative; width:800px; height:300px; margin:0 auto 4em auto; padding:0}
#slideshow b, #slideshow i {display:block; height:21px; width:11px; padding:0px; position:absolute; top:130px; 
	background:url(/.style/bg-arrow.png) no-repeat; z-index:50; opacity:1; cursor:pointer}
#slideshow b {left: -17px; background-position:0px -11px}
#slideshow i {right:-17px; background-position:-22px -11px}
#slideshow b:hover {background-position:-11px -11px}
#slideshow i:hover {background-position:-33px -11px}
#slides {position:relative;  height:300px; list-style:none; overflow:auto; margin:0; padding:0}
#slides li {display:block; background:#000; width:800px; margin:0 auto; height:300px; }
#slides li p {text-align:left}
#slides img {display:block; margin:0 auto}
.pagination {clear:both; display:block; width:770px; height:11px; list-style:none; margin:20px auto 0 auto; padding:0;}
.pagination li {float:left; cursor:pointer; height:11px; width:21px; line-height:21px; background:url(bg-arrow.png) top left no-repeat; border:none; margin:0 4px 0 0; padding:0; text-align:center; color:#FFF}
.pagination li:hover {background-position:top right; color:#000}
.pagination li.current, .pagination li:active {background-position:top center;}
.bubble {background:url(/.style/bubble.png); width:71px; height:34px; line-height:30px; overflow:hidden; font-size:75%}

.section .more {
	display:block;	margin:10px 0px 0px 150px;
	text-align:right;
	clear:both;
	}
	
/* Animaciones */
.image-grid a img {-webkit-transition:all 5s 0.3s ease-out; border-radius:65px;
box-shadow:0 2px 5px #FFF}
.image-grid a:hover img {border-radius:5px; -webkit-transition:all 0.5s ease-out}
.articles a {border-radius:70px; -webkit-transition:border-radius 5s 0.3s ease-out; }
.articles a:hover {-webkit-transition:all 0.5s ease-out; border-radius:12px; }
