@charset "UTF-8";

/*
-----------------------------------------------
Spry Demos CSS Rules
Version:  12 Apr 2006 (0.2b)
----------------------------------------------- */
#wrap {

    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 */   
    }

/* Links
----------------------------------------------- */
#wrap a img { border-style: none; }

/* Paragraph Headings
----------------------------------------------- */
#wrap h1, h2, h3, h4, h5, h6 {font-weight: normal; }
#wrap h1 { font-size: 165%; text-align: left; color: #fff; }
#wrap p { margin:0.375em 0; }

/* Layout Rules
----------------------------------------------- */

#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 {
  border-left: solid 1px #404040;
  border-right: solid 1px #404040;
  border-bottom: solid 1px #404040;
}
#articles { margin-bottom: 10px; }

#RightColumn {
    margin:0;
    padding:0;
    height: 600px;
    float: left;
    width: 750px;
}
#wrap #content, #sidebar {
    float: left;
    text-align: left;
}
#wrap #content {
    width: 600px;
    margin-right: 15px;
    padding-top: 5px;
}
#sidebar {
    width: 240px;
    margin-top: 0;
}
.SpryHiddenRegion {
   visibility: hidden;
}

/* Form Elements
----------------------------------------------- */
#wrap label, #wrap select { 
    font-size: 85%;
    font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
}
#wrap select {

    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-color: rgb(202,84,11);
    color: #fff;
    border-top: solid 1px #999;
    border-right: solid 1px #404040;
    border-bottom: solid 1px rgb(157,65,9);
    border-left: solid 1px rgb(157,65,9);
}
#transport a:visited {
    background-color: rgb(202,84,11);
    color: #fff;
    border-top: solid 1px #999;
    border-right: solid 1px #404040;
    border-bottom: solid 1px rgb(157,65,9);
    border-left: solid 1px rgb((157,65,9);
}
#transport a:hover {
    background-color: rgb(202,84,11);
    color: #000;
    border-top: solid 1px #999;
    border-right: solid 1px #404040;
    border-bottom: solid 1px rgb(157,65,9);
    border-left: solid 1px rgb(157,65,9);
}
#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: 300px;
    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;
}
.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
----------------------------------------------- */


/* 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;
}