/* --- View --- */

#uxTutorialView { line-height: 1.8em; }

#uxTutorialView dfn { border-bottom: dotted 1px; cursor: help; }

#uxTutorialView h1 { font-size: 1.4em; line-height: 26px; margin-bottom: 1em; }
#uxTutorialView #uxSPlayer { width: 452px; height: 335px; margin-bottom: 0.4em; }
#uxTutorialView ul.actionPanel { position: relative; clear: left; width: 436px; height: 22px; margin-bottom: 0.4em; text-align: left; border: solid 1px #CBCBCB; background-color: #F8F8F8; padding: 0.2em 0.6em; }
#uxTutorialView .actionPanel li { float: left; }
#uxTutorialView .actionPanel a { text-decoration: none; color: #595959; display: block; }
#uxTutorialView .actionPanel a:hover { text-decoration: underline; }

#uxTutorialView .actionPanel a.sendMessage { background: url(images/sendMessage.gif) no-repeat right 70%; padding-right: 24px;}
#uxTutorialView .actionPanel a.printMe { background: url(images/printMe.gif) no-repeat right 80%; padding-right: 16px;}
#uxTutorialView .actionPanel a.sendFriend { background: url(images/send2friend.gif) no-repeat right 60%; padding-right: 16px;}
#uxTutorialView .actionPanel a.addMyFavorite { background: url(images/add2Fav.gif) no-repeat right 70%; padding-right: 16px;}

#uxTutorialView .googleAds {float:left; margin-bottom:10px; margin-left:-10px; .margin-left:0px; .margin-right:-6px;}

#uxTutorialView dt.from { color: #A45466; }
#uxTutorialView dt { display:inline; font-weight: bold; }
#uxTutorialView dd { color: #595959; display:inline; }
#uxTutorialView dd a { color: #595959; text-decoration: none; }
#uxTutorialView dd a:hover { text-decoration: underline; }

#uxTutorialView .description { padding: 1em 0px; }
#uxTutorialView #TutorialContent { width: 100%; overflow-x: auto; }
#uxTutorialView #TutorialContent strong { font-weight: bold; }

#uxTutorialViewExtra { line-height: 1.8em; }

#uxTutorialViewExtra dt { float: right; clear: right; font-weight: bold; }
#uxTutorialViewExtra dd { float: right; color: #0274FD; }

#uxTutorialViewExtra dl.alt dt { float: right; clear: right; font-weight: bold; }
#uxTutorialViewExtra dl.alt dd { float: left;clear: left; padding-left: 30%; width:100px; text-align:left; color: #595959; }

#uxTutorialViewExtra ul.grade li { cursor: pointer; float: left; padding: 0 0.3em; line-height:1.4em; margin-right: 0.2em; background-color: red; color: White; }

#uxTutorialViewExtra .stars div { background: url('bgImages/star.jpg') repeat-x left 50%; float: left;}
#uxTutorialViewExtra .stars .s0 { width: 60px; background: none; }

#uxTutorialViewExtra .stars .s1 { width: 6px; }
#uxTutorialViewExtra .stars .s2 { width: 12px; }

#uxTutorialViewExtra .stars .s3 { width: 18px; }
#uxTutorialViewExtra .stars .s4 { width: 24px; }

#uxTutorialViewExtra .stars .s5 { width: 30px; }
#uxTutorialViewExtra .stars .s6 { width: 36px; }

#uxTutorialViewExtra .stars .s7 { width: 42px; }
#uxTutorialViewExtra .stars .s8 { width: 48px; }

#uxTutorialViewExtra .stars .s9 { width: 54px; }
#uxTutorialViewExtra .stars .s10 { width: 60px; }

#uxTutorialViewExtra .adText { cursor: pointer; font-size: 16px; font-weight: bold; text-align: center; }

/* --- List --- */

.MTutorialList .noResults {font-size: 16px; font-weight: bold;}
.MTutorialList div.noResults {float: left; margin-left: 1em; text-align: center;}
.MTutorialList p.noResults {padding: 3em;}
.MTutorialList p.noResultsP{padding: 3em;text-align:center;}

.MTutorialList { background: url(bgImages/dottedSides.gif) repeat-y center top; padding-right: 11px; width: 731px; position: relative; padding-top: 52px; padding-bottom: 16px; float: right; }
.MTutorialList .header { position: absolute; left: -2px; top: 0px; background:url(bgImages/header.jpg) no-repeat left top;height:37px;width: 745px; }
.MTutorialList .header h2 { width: 734px; padding-top: 13px; padding-right: 11px; font-size: 14px; }
.MTutorialList .header div { position: absolute; left: 19px; top: 13px; font-size: 13px; font-weight: bold; }
.MTutorialList .header div a { color: gray; text-decoration: none; }
.MTutorialList .header div a:hover { text-decoration: underline; }
.MTutorialList .header div .mbSort a:hover { text-decoration: underline; }
.MTutorialList .footer { position: absolute; right: 1px; bottom: 6px; background:url(bgImages/footer.jpg) no-repeat 2px top;height:11px;width: 745px; }

.MTutorialList .content ul { width: 100%; position: relative; float: right; }
.MTutorialList .content li { float: right; width:159px; height:150px; margin-right: 10px; margin-bottom: 10px; padding: 4px; padding-top: 17px; position: relative; }
.MTutorialList .content li.blue      { background:url('bgImages/video-b.jpg') no-repeat; }
.MTutorialList .content li.orange    { background:url('bgImages/video-o.jpg') no-repeat; }

.MTutorialList .content li img.thumb { width: 159px; height: 108px; border: none 0px; }
.MTutorialList .content li img.external { position: absolute; top: 103px; left: 7px; background: url('../../../layouts/common/images/external.png') no-repeat; width: 17px; height: 20px; }
.MTutorialList .content li a { display: block; color:#9B4857; text-decoration: none; }
.MTutorialList .content li a strong { font-weight:bold; font-size:12px; line-height: 12px; padding-right: 17px; display: block;}
.MTutorialList .content span { font-size: 11px; line-height: 12px; }
.MTutorialList .content span.category { display: block; padding-right: 17px; }
.MTutorialList .content span.watchCount { float: right; padding: 8px 17px 0px 0px; width: 80px; }
.MTutorialList .content span.grade { float: right; padding-top: 8px; }

.MTutorialList .header div ul                {}
.MTutorialList .header div ul li             {float: left;  color:#626362}
.MTutorialList .header div ul li a           {color:#626362; text-decoration:none display: block;}
.MTutorialList .header div ul li a:hover     {text-decoration:none}
.MTutorialList .header div ul li a.Current   {font-weight:bold; text-decoration: underline;}

.MTutorialList div.paging { width: 100%; text-align: center; padding: 0.4em 0px; clear: both; font-size: 14px; margin-bottom: 3px;}
.MTutorialList div.paging a { background-color: #BACCD0; text-decoration: none; color: #000; padding: 2px 0px; border: solid 1px #626362; }
.MTutorialList div.paging a:hover { background-color: #626362; color: #FFF; padding: 2px 0px; border: solid 1px #BACCD0; }
.MTutorialList div.paging span { background-color: #626362; color: #FFF; padding: 2px 0px; border: solid 1px #BACCD0; }


    
.ballon { font: 11px Arial, Tahoma; text-align: center; line-height: 1.2em;
	width: 84px; height: 80px; padding: 9px 6px 0px 12px;
	background: url('bgImages/bubble-new.png') no-repeat; }

.ballon-hide { display: none; }