﻿/*horizontal Orientation CSS Starts*/
.jscarousal-horizontal
{
	width: 100%;
	height: 180px;
	margin: 0;
	padding:0px;
	position: relative;
}
#Botonera_izquierda .jscarousal-horizontal
{
	border-radius:10px 0px 0px 10px;
	-moz-border-radius:10px 0px 0px 10px;
	-o-border-radius:10px 0px 0px 10px;
	-webkit-border-radius:10px 0px 0px 10px;
}
#Botonera_derecha .jscarousal-horizontal
{
	border-radius:0px 10px 10px 0px;
	-moz-border-radius:0px 10px 10px 0px;
	-o-border-radius:0px 10px 10px 0px;
	-webkit-border-radius:0px 10px 10px 0px;
}

.jscarousal-horizontal-back, .jscarousal-horizontal-forward
{
	height: 180px;
	width:18px;
	color: White;
	cursor: pointer;
	z-index:100;
	float:left;
	position:absolute;
	background-color:transparent !important;
	border:0px solid;
}
.jscarousal-horizontal-back span, .jscarousal-horizontal-forward span
{
	position:absolute;
	top:-999em;
}
.jscarousal-horizontal-back
{
	background-image: url(../img/botones/top_arrow.png);
	background-repeat: no-repeat;
	background-position:center;
	left:-18px;
}

.jscarousal-horizontal-forward
{
	background-image: url(../img/botones/bottom_arrow.png);
	background-repeat: no-repeat;
	background-position:center;
}
.jscarousal-contents-horizontal
{
	overflow: hidden;
	width: 100%;
	height: 180px;
	text-align:center;
	float:left;
}

.jscarousal-contents-horizontal > div > div 
{
	top: 0px;
	padding-top:0px;
	width: 100%;
	text-align:center;
}
.jscarousal-contents-horizontal .contenido
{
	top: 0px;
	padding-top:0px;
	
	text-align:center;
	transition-duration:0.3s;
	transition-property:margin-left;
	-o-transition-duration:0.3s;
	-o-transition-property:margin-left;
	-webkit-transition-duration:0.3s;
	-webkit-transition-property:margin-left;
	-moz-transition-duration:0.3s;
	-moz-transition-property:margin-left;
}

.jscarousal-contents-horizontal > div > div > div span
{
	display: block;
	width: 100%;
	text-align: center;
}

/*horizontal Orientation CSS Ends*/

/*Common*/
.hidden
{
	display: none;
}
.visible
{
	display: block;
}
.thumbnail-active
{
	filter: alpha(opacity=100);
	opacity: 1.0;
	cursor: pointer;
}
.thumbnail-inactive
{
	filter: alpha(opacity=20);
	opacity: 0.2;
	cursor: pointer;
}
.thumbnail-text
{
	color: #7A7677;
	font-weight: bold;
	display: block;
	padding: 10px 2px 2px 0px;
}

.selected{
	background-color:#000;
}

.contenido_botones{
	float:left;
	height:130px !important;
}
.contenido_color{
	float:left;
	width:40px !important;
}

.select_color{
	position:relative;
	top:0px;
	left:0px;
	float:left;
	text-align:left !important;
	width:30px !important;
	height:30px !important;
	background-color:#000;
	padding-top:10px;
	border-radius:0px 10px 10px 0px;
	-moz-border-radius:0px 10px 10px 0px;
	-o-border-radius:0px 10px 10px 0px;
	-webkit-border-radius:0px 10px 10px 0px;
}
.colorPicker-picker, .select_color a{
	margin-left:4px !important;
	width:20px !important;
	height:20px !important;
}
.select_color input{
	display:none;
}


#vinculados{
	background: none repeat scroll 0 0 #DDDDDD;
    border: 1px solid #D3D3D3;
    border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
    margin: 0 auto 1.625em;
    padding: 1.625em;
    position: relative;
	float:left;
}
.vinculado{
	float:left;
	height:170px;
	max-width:170px;
	text-align:center;
	padding:10px;
	margin:5px;
	background-color:#CCC;
	border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
}
.vinculado a img{
	height:auto;
	max-width:150px;
	min-width:150px;
}
#lista_archivos{
	width:100%;
	clear:both;
}
#lista_archivos img{
	vertical-align:middle;
	float:left;
}
#lista_archivos li{
	margin:5px;
	padding:5px;
	list-style:none;
	border-top:#CCCCCC 1px solid;
	clear:both;
}



#lightbox {
	left: 0;
	line-height: 0;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 100;
}
#lightbox img{
	height: auto;
    width: auto;
	max-width:800px !important;
	max-height:600px !important;
}
#outerImageContainer {
    background-color: #FFFFFF;
    height: 250px;
    margin: 0 auto;
    position: relative;
    width: 250px;
	max-width:800px !important;
	max-height:600px !important;
}
#imageContainer {
    padding: 10px;
}
#imageContainer > #hoverNav {
    left: 0;
}
#hoverNav {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}
#overlay {
    background-color: #000000;
    height: 500px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 90;
}
#imageData {
    color: #666666;
	padding: 10px 10px;
}
#imageDataContainer {
    font: 10px/1.4em Verdana,Helvetica,sans-serif;
}
#imageData #imageDetails {
    float: left;
    text-align: left;
    width: 70%;
}
#imageDataContainer {
    background-color: #FFFFFF;
    font: 10px/1.4em Verdana,Helvetica,sans-serif;
    margin: 0 auto;
    overflow: auto;
    width: 100%;
	max-width:800px!important;
	max-height:600px !important;
}
#imageData #caption {
    font-weight: bold;
}
#imageData #numberDisplay {
    clear: left;
    display: block;
    padding-bottom: 1em;
}

#lightbox a img {
    border: medium none;
}
#lightbox img {
    height: auto;
    width: auto;
}

#imageData #bottomNavClose {
    float: right;
    outline: medium none;
    padding-bottom: 0.7em;
    width: 66px;
}
#keyboardNotice{
	text-align:left;
	clear: left;
    display: block;
}
#prevLink, #nextLink {
    background-image: url("data:image/gif;base64,AAAA");
    display: block;
    height: 100%;
    width: 49%;
	max-width:800px!important;
	max-height:600px !important;
}
#prevLink {
    float: left;
    left: 0;
}
#nextLink {
    float: right;
    right: 0;
}
#prevLink:hover, #prevLink:visited:hover {
    background: url("../img/prevlabel.png") no-repeat scroll left 15% transparent;
}
#nextLink:hover, #nextLink:visited:hover {
    background: url("../img/nextlabel.png") no-repeat scroll right 15% transparent;
}

.cboxPhoto{
	max-width:980px!important;
	max-height:600px !important;
}


/* #Mobile (Landscape) */
@media only screen and (max-width: 480px) {
	#lista_archivos img{
		vertical-align:middle;
		float:none;
		margin:0px auto;
		clear:both;
		display:block;
	}
	#lista_archivos{
		text-align:center;
	}
	
}

