/*------------- Body ------------------------------------------------------------------------*/

body
{
    margin: 0 auto;
	padding: 0 auto;
	font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* Block positions */
#container
{
	width: 870px;
	height: 490px;
	margin: 0 auto;
	padding: 0 auto;
	position: relative;
    cursor: default;
	float: left;
	background-color: #e8e8e8;
}


/* get rid of those system borders being generated for A tags */
a:active
{
  outline:none;
}

/*------------- top_wrap -------------------------------------------------------------------*/

/* styling for the image wrapper  */
.top_wrap
{
    /* dimensions */
    width:870px;
    height:230px;
    margin:30px 0px 0px 30px;
    
    font-family: "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
    text-align:left;
}
    
/*------------- bottom_wrap ----------------------------------------------------------------*/

/* styling for the image wrapper  */
.bottom_wrap
{
    /* dimensions */
    width:810px;
    height:200px;
    margin:0px 0px 0px 30px;
    background-color: #fbfbfb;
    border:1px solid #aaa;
    -webkit-border-radius:10px;
    text-align:left;
}

/*------------- top title ----------------------------------------------------------------*/

.top_title
{
	width: 50%;
	margin: 0px 0 0 20px;
	float: left;
    
	font-size: 16px;
	font-weight: bold;
	color: #000;
    text-shadow: #a0a0a0 1px 1px 2px;
}

/*------------- description ----------------------------------------------------------------*/

.description, .movie_length
{
	width: 60%;
	margin: 10px 0 0 20px;
	float: left;
    
	text-align: justify;
	font-size: 12px;
	color: #000;
}

/*------------- rating ---------------------------------------------------------------*/    
    
.rating_
{
    position: absolute;
    float:left;
    margin:150px 0px 0px 270px;
    width:60%;
}

/*------------- bottom title ----------------------------------------------------------------*/

.bottom_title
{
    visibility: hidden;
	width: 90%;
	margin: 20px 0 0 20px;
	position: absolute;
	float: left;
    
	font-family: "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #000;
}

/*------------- preview image ---------------------------------------------------------------*/    

.preview,
.showMovie
{
    float:left;
    margin:0px 0px 0px 0px;
    padding:0px;
    width:250px;
    height:187px;
    //-webkit-box-shadow: 2px 2px 2px #787777;
}

.showMovie
{
border:1px solid #aaa;
}

.refresh
{
    visibility: hidden;
    position: absolute;
    float: left;
    margin:70px 0px 0px 705px;
    width:60px;
    height:68px;
}

.noInternetConnection
{
    visibility: hidden;
    position: absolute;
    float: left;
    margin:5px 0px 0px 165px;
}

/*------------- Root element for the scrollable ---------------------------------------------*/

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position: absolute;
	overflow: hidden;
    overflow-x: hidden;/*scroll;*/
	width: 790px;
	height:150px;
    
    float:left;
    margin-left: 10px;
    margin-top: 25px;
	/* custom decorations */
	border:0px solid #ccc;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	width:0000px; /* calculating in html code */
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:800px;
}

/* single scrollable item */
.item img {
	float:center;
	margin:2px 0px 0px 5px;
	width:100px;
	height:75px;
    cursor: pointer;
    border:1px solid #aaa;
    //-webkit-box-shadow: 2px 2px 2px #787777;
}

div.item{
    padding:15px 0px 0px 20px;
	font-size: 10px;
    width: 110px;
    height: 140px;
    cursor: default;
}

div.item #name{
	font-family: "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 10px;
	display: block;
	font-weight: normal;
    text-align: center;
}

/* active item */
/*.item img.active*/
.scrollable .active {
	margin:-1px 0px 0px 1px;
	position:relative;
	cursor:default;
    border:1px solid #aaa;
    width:108px;
	height:81px;
    //-webkit-box-shadow: 5px 5px 5px #787777;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/*------------- Single Button ----------------------------------------------------------------*/

.singleButton
{
    position:absolute;
	float: left;
    height: 22px;
    overflow: hidden;
	cursor: pointer;
}

.singleButton#playTutorial
{
    margin:130px 0px 0px 270px;
    width: 90px;
}

.singleButton#readPDF
{
    margin:130px 0px 0px 392px;
    width: 150px;
}

.singleButton
{
    -webkit-border-image:url(../img/TSingleButtonN.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}
.singleButton.active
{
    -webkit-border-image:url(../img/TSingleButtonP.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}

.singleButton .label
{
    margin-top:5px;
    color: #000;
	font-size: 10px;
	text-align:center;
    font-weight: 400;
    text-shadow: #f0f0f0 0px 1px 0px;
}

.singleButton:hover .label
{
    color: #278be0;
    font-weight: 400;
    text-shadow: #f0f0f0 0px 1px 0px;
}

/*------------- Button Cells ----------------------------------------------------------------*/

.buttonsMatrix
{
    position:absolute;
    margin:-12px 0px 0px 250px;
	float: left;
    width: 500px;
    height: 22px;
    cursor: default;
    /*border:1px solid #000;*/
}

.buttonCell
{
	float: left;
    /*width: 90px;*/
	height: 22px;
	overflow: hidden;
	cursor: pointer;
    /*border:1px solid #ccc;*/

}

.leftCell
{
    -webkit-border-image:url(../img/TBtnCellLeftN.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}
.midCell
{
    -webkit-border-image:url(../img/TBtnCellMidN.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}
.rightCell
{
    -webkit-border-image:url(../img/TBtnCellRightN.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}

.leftCell.active
{
    -webkit-border-image:url(../img/TBtnCellLeftP.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}
.midCell.active
{
    -webkit-border-image:url(../img/TBtnCellMidP.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}
.rightCell.active
{
    -webkit-border-image:url(../img/TBtnCellRightP.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
}


.buttonCell .label
{
    margin-top:5px;
    color: #000;
	font-size: 10px;
	text-align:center;
    font-weight: 400;
    text-shadow: #f0f0f0 0px 1px 0px;
}

.buttonCell.active
{
	cursor:default;
}

.buttonCell.active .label
{
    color: #efefef;
    font-weight: 400;
    text-shadow: #606060 0px 1px 0px;
}

/*------------- Scrollbar ----------------------------------------------------------------*/

::-webkit-scrollbar
{
    height: 8px;
     -webkit-border-radius: 1ex;
}
/*
::-webkit-scrollbar-thumb
{
    border-top: 1px solid #fff;
    background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
*/
::-webkit-scrollbar-thumb:horizontal
{
    -webkit-border-image:url(../img/TScrollerKnob.png) 0 5 0 5;
    border-color: transparent;
    border-width: 0 5px;
    min-width: 20px;
}

::-webkit-scrollbar:horizontal {
    -webkit-border-image:url(../img/TScrollerSlot.png) 0 5 0 5;
    border-color: transparent;
    border-width: 0 5px;
    min-width: 20px;
}
