@charset "UTF-8";







/*



-----------------------------------------------



Spry Demos CSS Rules



Version:  12 Apr 2006 (0.2b)



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



body {



	margin: 0;



	padding: 0;



	color: #999;



	background: #000 url('../demos/images/bg_rule_red.gif') repeat-x;



	font-family: "Lucida Grande", "Trebuchet MS", sans-serif;



	font-size: x-small; /*for IE5/Win */



	voice-family: "\"}\"";



	voice-family: inherit;



	font-size: small; /*for compliant browsers */	



	}



html>body { font-size: small; } /* be nice to Opera */







/* Links



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



a img { border-style: none; }







/* Paragraph Headings



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



h1, h2, h3, h4, h5, h6 {font-weight: normal; }



h1 { font-size: 165%; text-align: left; color: #fff; }



p { margin:0.375em 0; }







/* Layout Rules



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



#wrap {



	padding-top: 20px;



	margin: 0 20px;



}



#codesample #wrap { width: auto; }







#header {



	margin-bottom: 2em;



	text-align: left;



	padding-left: 0.5em;



}



#LeftColumn {



  margin:0 10px 0 0;



  padding:0;



  width: 200px;



  float: left;



}



#LeftColumn, #articles, #detalles {



  border-left: solid 1px #404040;



  border-right: solid 1px #404040;



  border-bottom: solid 1px #404040;



}



#articles {	margin-bottom: 10px; width: 450px; float: left; }



#detalles { background-color: #000000; width: 290px; height: 223px; float: right; color: #FFFFFF; text-align: center; border-top: solid 1px #999; overflow: auto;

 }



#detalles .title_box { text-align: center; }

#detalles .imagen { margin: 5px auto; }



#RightColumn {



	margin:0;



	padding:0;



	height: 600px;



	float: left;



	width: 750px;



}



#content, #sidebar {



	float: left;



	text-align: left;



}



#content {



	width: 600px;



	margin-right: 15px;



	padding-top: 5px;



}



#sidebar {



	width: 240px;



	margin-top: 0;



}



.SpryHiddenRegion {



   visibility: hidden;



}







/* Form Elements



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



label, select { 



	font-size: 85%;



	font-family: "Lucida Grande", "Trebuchet MS", sans-serif;



}



select {



	color: #B1B1BC;



	background-color:  #131313;



	border: 1px solid #b1b1bc;



}







/* Table Rules



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



td.rank { }







#products { 



	border-collapse:collapse;



	empty-cells:show;



	width:100%;



	margin: 0;



}



#products caption {



	color: #fff;



	text-transform:uppercase;



	text-align: left;



	font-weight: bold;



	letter-spacing: 0.1em;



	background-color: #FD2800;



	padding: 0.375em;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



}



#products th {



	background: url('../demos/images/bg_grad_gray2.gif') repeat-x;



	padding: 6px 0.25em;



	color: #333333;	



	font-weight: bold;



	margin: 0;



	cursor: pointer;



}







#products th.infocus { background-color: #E6E6E6; }



#products th.selected {	color: #EAEAEA; }







#products td, #products th { 



	margin: 0; 



	padding: 0.25em 0.375em 0.45em 0.375em;



	text-align: left;



}



#products tr {



	border-bottom: solid 1px #202020;



	-moz-user-select: none;



	-khtml-user-select: none;



}



#products tr.infocus {



	background-color:#dfdfdf;



	cursor: pointer;



}







#products tr.notinfocus { background-color:#fff; }



#products tr.selected { color:#fc0; }



#products tbody { margin-top: 0; }



.even { background-color: #151515; }







.rowHover {



	color: #000;



	background-color: #777;



	cursor: pointer;



}







.rowSelected { color: #fc0; }







.productinfo {



	width: 700px;



	margin-left: 250px;



}







.category {



	float:right;



	margin-top:18px;



}







.boximage {



	float: left;



	background-color: white;



}







.jsEnabled #productListing {



	display: none;



}







/* Gallery and Playback Controls



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



#gallerySelect { width: 180px; }



#controls {	margin:0 auto 10px auto; }



#galleries {	margin:0 auto 20px auto; }



#galleries label { padding-bottom: 2px; }







#galleryLinks a {



	color: white;



	text-decoration: none;



}







#transport {



	margin: 0;



	padding: 0;



	list-style: none;



}



#transport li {



	float: left;



	margin: 0;



	padding: 0;



	text-align: center;



}



#transport a {



	text-decoration: none;



	text-transform: uppercase;



	font-size: 85%;



	font-weight: bold;



	letter-spacing: 0.1em;



	margin: 0 1px 0 0;



	padding: 4px 8px;



	width: 64px;



	float: left;



	display: block;



	-moz-user-select: none;



	-khtml-user-select: none;



}



#transport a:link {



	background: #666 url('../demos/images/bg_grad_gray1.gif') repeat-x;



	color: #fff;



	border-top: solid 1px #999;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #3a3a3a;



	border-left: solid 1px #404040;



}



#transport a:visited {



	background: #666 url('../demos/images/bg_grad_gray1.gif') repeat-x;



	color: #fff;



	border-top: solid 1px #999;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #3a3a3a;



	border-left: solid 1px #404040;



}



#transport a:hover {



	background: #666 url('../demos/images/bg_grad_gray2.gif') repeat-x;



	color: #000;



	border-top: solid 1px #999;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #3a3a3a;



	border-left: solid 1px #404040;



}



#transport a:focus {



	-moz-user-select: none;



	-khtml-user-select: none;



}







#transport .playBtn .pauseLabel, #transport .pauseBtn .playLabel {



	display: none;



}







#previews {



	border-top: solid 1px #404040;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #3a3a3a;



	border-left: solid 1px #404040;



	padding: 10px 10px 20px 10px;



	margin-bottom: 5px;



	background-image: url('../demos/images/bg.gif');



	width: 250px;



	float: left;



	margin-right: 10px;



}



#thumbnails {



	clear: both;



	margin: 10px auto;



}



#thumbnails div {



	position: relative;



	width: 24px;



	height: 24px;



	float: left;



	margin: 8px;



	padding: 0;



	float: left;



	display:inline;



}



#thumbnails img {



	width: 24px;



	height: 24px;



	position: absolute;



	border-top: solid 1px #999;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #333;



	border-left: solid 1px #404040;



}



#picture {



	padding: 0px;



	width: 500px;



	float: left;



}



#mainImageOutline {



	margin: 0 auto;



	padding: 0;



	background-color: #eee;



	border-top: solid 1px #999;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #333;



	border-left: solid 1px #404040;



	padding: 1em; 



	overflow: hidden; 



	width: 0px;



	height: 0px;



}



#mainImage {



	width: 100%;



	height: 100%;



}







#picture img {	border: 1px solid #999; }



.selectedThumbnail {  border: solid 2px #fc0 !important; }



.inFocus {  border: solid 1px #fc0 !important; }







.jsEnabled #gallery {



	display: none;



}







/* Spry Validation Widgets Demo*/



#MovieList{



  height: 600px;



  overflow: auto;



}



/* RSS Reader Rules



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



#RSSFeedsList{ 



  height: 570px;



  overflow: auto;



}



#MovieTitle h2, #RSSFeedsTitle h2, #RSSChannelTitle h2 {



	color: #fff;



	font-size: 110%;



	text-transform:uppercase;



	text-align: left;



	font-weight: bold;



	letter-spacing: 0.1em;



	background-color: #ff2700;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



	margin: 0;



	height: 20px;



	padding-left: 3px;



}



#columnHeadings {



	background: url('../demos/images/bg_grad_gray1.gif') repeat-x;



	color: #fff;



	font-weight: bold;



	font-size: 110%;



	width: 100%;



	height: 24px;



	text-transform:uppercase;



	margin: 0;



	padding: 0;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



	cursor: pointer;



}



#SubjectTitle, .SubjectColumn { width: 500px; margin: 0; }



#PubDateTitle, .PubDateColumn {	width: auto; margin: 0; }



.ListBoxItemGroup .ListBoxItem { padding:3px 0 5px 0.25em; }







#SubjectTitle, #PubDateTitle, .SubjectColumn, .PubDateColumn { 



	padding:3px 0 5px 0.25em; 



	float: left;



 	cursor: pointer;



	white-space: nowrap;



	overflow: hidden;



	-moz-user-select: none;



	-khtml-user-select: none;



}



#RSSItemsList {



  width: 100%;



  height: 195px;



  overflow: auto;



  clear: both;



}



#RSSItemContent {



	width: 100%;



	white-space: nowrap;



	overflow: hidden;

	

	clear: both;



}



.RSSItemListRow {



	float: left;



	border-bottom: solid 1px #202020;



	background-color: #000;



	width: 100%;



	white-space: nowrap; 



	overflow: hidden; 



}



.ListBoxItemTitle {



	background: url('../demos/images/bg_grad_gray1.gif') repeat-x;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



	padding: 3px 0 5px 0.25em;



	color: #fff;	



	font-weight: bold;



	margin: 0;



	cursor: pointer;



}



.ListBoxCategTitle {



	background: url('../demos/images/bg_grad_gray1.gif') repeat-x;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



	padding: 3px 0 5px 0.25em;



	color: #fff;	



	font-weight: bold;



	margin: 0;



}



.ListBoxItem {



	border-bottom: solid 1px #202020;



	cursor: pointer;



	clear: both;



	background-color: #000;



	white-space: nowrap;



	overflow: hidden;



	-moz-user-select: none;



	-khtml-user-select: none;



}







.EvenRow { background-color: #151515; }



.ListBoxItemHover {	background-color: #777; color: #000; }



.SelectedListBoxItem { color: #fc0; }







.RSSItemListFeedback {



	height: 32px;



	margin: 75px auto auto auto;



	background-color: #151515;



	border: solid 1px #202020;



}



.RSSItemListFeedback td {



	padding: 10px;



}



td.RSSItemListLoading {



	height: 32px;



	background-image: url(../demos/images/throbber.gif);



	background-repeat: no-repeat;



	background-position: left center;



	padding-left: 36px;



}







/* iFrame Stuff



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



iframe { 



	border: none; 



	background: #3a3a3a; 



	width: 100%; height: 365px;



	border-top: solid 1px #404040;



	border-left: solid 1px #404040;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #404040;



  }







/* Utility IDs, classes, and HTML selectors



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



#boxshot {



	background-color: #fff;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



	border-left: solid 1px #3a3a3a;



	border-right: solid 1px #3a3a3a;



	text-align: center;



 }



.clear {



	visibility: hidden;



	display: block;



	clear: both;



	height: 0px;



	margin: 0;



	padding: 0;



	}



.ClearAll {



	clear: both;



	height: 0;



	font-size: 0;



	line-height: 0;



}







code { color: #000; }



pre { font-size: small; color: #000; }







.highlightedcode {background-color: #ff9;}







.sample {



	background: #eee;



	padding: 20px;



	border: 2px solid #666;



	margin-top: 20px;



	overflow: scroll;



}







/* Accordion Classes



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



.Accordion {



	border-left: solid 1px #404040;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #404040;



	overflow: hidden;



}



.AccordionPanelTab {



	color: #ccc;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



	cursor: pointer;



	-moz-user-select: none;



	-khtml-user-select: none;



	background: #080808 url('../demos/images/bg_grad_gray1.gif') repeat-x;



}



.AccordionPanelTab h3 {



	margin: 0;



	padding: 2px 2px 4px 36px;



	font-size: 110%;



	background: url('../demos/images/blt_panel_exp.gif') no-repeat left 50%;



} 



.AccordionPanelContent {



	overflow: auto;



	height: 200px;



	font-size: 90%;



	line-height: 140%;



}



.AccordionPanelContent ul { margin: 0;	padding: 1.375em; }



.AccordionPanelTabHover { color: #fff; }



.AccordionPanelClosed .AccordionPanelTab h3 { background: url('../demos/images/blt_panel_clps.gif') no-repeat left 50%; }



.AccordionPanelContent div { margin: 5px 8px; }







/* Home Page Classes



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



.screen {



	background-color: #bbb;



	border-top: solid 1px #999;



	border-bottom: solid 1px #3a3a3a;



	border-left: solid 1px #3a3a3a;



	border-right: solid 1px #3a3a3a;



	margin: 5px 5px 5px 0;



	padding: 1em 1em 0.5em 1em;



	float: left;



	display: block;



	text-decoration: none;



}



.screen:hover {



	background-color: #fff;



	color: #000;



	border-top: solid 1px #999;



	border-right: solid 1px #404040;



	border-bottom: solid 1px #3a3a3a;



	border-left: solid 1px #404040;



	text-decoration: none;



}



.imgcaption {



	font-size: 90%;



	font-weight: bold;



	margin: 0em 0 1em 0;



	line-height: 1.1em;



	color: #333333;



	border: none;



	text-decoration: none;



}



/* Navigation Classes



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



.demo a, .return a, .demo a, .source a {



	text-decoration: none; 



	font-size: small;



	font-weight: normal;



	margin-left: 24px;



	padding-left: 16px;



}







.return a:link { color: #fff; background: url('../demos/images/btn_return_link.gif') no-repeat left 50%; }



.return a:visited { color: #fff; background: url('../demos/images/btn_return_link.gif') no-repeat left 50%; }



.return a:hover {



	color: #fc0; 



	border-bottom:dotted 1px #fc0; 



	background: url('../demos/images/btn_return_hover.gif') no-repeat left 50%;



}



.return a:active { 



	color: #fff; 



	border-bottom:dotted 1px #fff; 



	background: url('../demos/images/btn_return_link.gif') no-repeat left 50%;



	}







.demo a:link { color: #fff; background: url('../demos/images/btn_demo_link.gif') no-repeat left 50%; }



.demo a:visited { color: #fff; background: url('../demos/images/btn_demo_link.gif') no-repeat left 50%; }



.demo a:hover {



	color: #fc0; 



	border-bottom:dotted 1px #fc0; 



	background: url('../demos/images/btn_demo_hover.gif') no-repeat left 50%;



}



.demo a:active { 



	color: #fff; 



	border-bottom:dotted 1px #fff; 



	background: url('../demos/images/btn_demo_link.gif') no-repeat left 50%; 



	}







.source a:link { color: #fff; background: url('../demos/images/btn_source_link.gif') no-repeat left 50%; }



.source a:visited { color: #fff; background: url('../demos/images/btn_source_link.gif') no-repeat left 50%; }



.source a:hover {



	color: #fc0; 



	border-bottom:dotted 1px #fc0; 



	background: url('../demos/images/btn_source_hover.gif') no-repeat left 50%;



}



.source a:active { 



	color: #fff; 



	border-bottom:dotted 1px #fff;  



	background: url('../demos/images/btn_source_link.gif') no-repeat left 50%;



	}