@charset "UTF-8";

@font-face { font-family: "clean-ui"; src: url('AdobeCleanUI-Regular.otf'); }
@font-face { font-family: "clean-ui-l"; src: url('AdobeClean-Light.otf'); }
@font-face { font-family: "clean-ui-b"; src: url('AdobeCleanUI-Bold.otf'); }

html * {
	font-family: 'Lucida Grande', Tahoma, sans-serif;
	-webkit-user-select:none;
}
html .win * {
	font-family: Tahoma, 'メイリオ', 'Meiryo', sans-serif;
	text-shadow: none;
}

body {
	padding:0px;
	margin:0px;
    font-size:11px;
    background-color:#383838 !important;
	color:#AAAAAA;
}

::-webkit-scrollbar {
    width: 12px;
    background-color:#3B3B3B;
    
}

::-webkit-scrollbar-track {
    background-color:rgba(0,0,0,0.1);
    border: 1px solid #1B1B1B;
}
 
::-webkit-scrollbar-thumb:horizontal {
    background-image: -webkit-linear-gradient(top, rgb(113,113,113) 0%, rgb(95,95,95) 100%);
    border-radius: 1px;
    border:1px solid #1B1B1B;
}

::-webkit-scrollbar-thumb:vertical {
    background-image: -webkit-linear-gradient(left, rgb(113,113,113) 0%, rgb(95,95,95) 100%);
    border-radius: 1px;
    border:1px solid #1B1B1B;
}

::-webkit-scrollbar-corner {
    background-color:#404040;
}

#outter, .wrapper, .body {
	width:100%;
	height:100%;
	border:0px solid #000;
}

strong {
    font-weight:normal;
    color:#efefef;
    padding:0px 4px 0px 4px;
}

.bodyFrame {
	width:100%;
	border:0px solid #000;
}


a:link, a:visited, a:active {
	color:#E09a2C;
}

a.nextStepButton:link, a.nextStepButton:visited, a.nextStepButton:active {
    display:block;
    background: url(images/userActionArrow.png) no-repeat 8px 3px;
    padding:2px 0px 4px 28px;
    color:#E09a2C;
    cursor:pointer;
    margin:15px 0px 0px 15px;
    font-size:1.0em;
}

a.appActiveButton:link, a.appActiveButton:visited, a.appActiveButton:active {
    background: url(images/userActionArrow.png) no-repeat 8px 3px;
    
}

ul li.nextStep {
	color:#E09a2C;
}


/*****  LESSONS  ******/

.useraction {
    color:#FFFFFF !important;
}

.useractionClick *, .useractionClickTall * {
    color:#E09a2C !important;
    text-decoration:none !important;
}

.useractionClick, .useractionClickTall {
    background: url(images/userActionArrow.png) no-repeat 8px 3px;
    padding-left:28px;
    color:#E09a2C;
}

ul {
    padding:0px 15px 0px 45px;
    margin:15px 0px;
}

ul li {
    padding:0px 5px 9px 0px;
    margin:0px;
    line-height:1.5em;
}

ol {
    padding:0px 15px 0px 45px;
    margin:15px 0px;
    
}

ol li {
    padding:0px 5px 4px 0px;
    margin:0px;
    font-size:1.0em;
    line-height:1.5em;
}

nol > li:before {
  content: counter(chapter) ". ";
  counter-increment: chapter; 
}

.useraction ul {
    list-style:dash;
}

ol li.useractionClick, .userAction ul li.useractionClick {
    background: url(images/userActionArrow.png) no-repeat 0px 6px;
}

.useraction ul li.useractionClickTall, .useraction ol li.useractionClickTall {
    background: url(images/userActionArrow.png) no-repeat 4px 8px;
}

.screenshot {
    margin:15px 15px 15px 20px;
}

.screenshot img {
    border:0px solid rgba(255,255,255,0.4);
    -webkit-box-shadow:0px 2px 4px rgba(40,40,40,0.8);
    border-radius:3px;
}

img.inline {
    display:inline-block;
    position:relative;
    top:4px;
}
img.inline2 {
    display:inline-block;
    position:relative;
	left:-30px;	
    top:4px;
    bottom:4px;    
}


h3 {
    font-size:13px;
    font-weight:bold;
    padding-bottom:0px;
    margin:15px 0px 0px 15px;
}

p, .lessonContent {
    clear:both;
    font-size:1.0em;
    font-weight:light;
    line-height:1.5em;
    letter-spacing:0.3px;
    word-spacing:0.3px;
	margin:15px 15px 0px 15px;
}






/********** LESSON CHROME **************/

#chapterFooter {
    position:fixed;
    height:18px;
    width:100%;
    bottom:0px;
    margin:0px;
    padding: 4px 0px 0px 10px;
    color:#888888;
}

#footerPrevious, #footerNext, #footerStepStatus {
    float:left;
}

#footerStepStatus {
}

#chapterBrowser {
    position:fixed;
    top:0px;
    height:26px;
    padding:0px;
    width:100%;
    background-color:#494949;
    border-bottom:1px solid #1B1B1B;
}

.lessonChapters {
	position:absolute;
	top:26px;
	bottom:22px;
	left:0px;
	overflow-x:hidden;	
	overflow-y:auto;	
	width:100%;
}

#chapterDropdown {
    position:absolute;
    margin:0px 0px 0px 0px;
    min-width:80px;
    left:1px;
    right:54px;
    height:26px;
    background: url(images/dropdownTick.png) no-repeat 95% 10px;
    cursor:pointer;
    border-radius:2px;
}


.appLocale-de_DE #chapterDropdown, 
.appLocale-fr_FR #chapterDropdown,
.appLocale-es_ES #chapterDropdown,
.appLocale-it_IT #chapterDropdown,
.appLocale-ja_JP #chapterDropdown 
{
    right:50px;
}

#chapterDropdown span {
    padding:3px 0px 0px 10px;
    color:#fafafa;
    font-size:12px;    
    letter-spacing:1.1px;
}

.appLocale-de_DE #chapterDropdown span, 
.appLocale-fr_FR #chapterDropdown span,
.appLocale-es_ES #chapterDropdown span,
.appLocale-it_IT #chapterDropdown span,
.appLocale-ja_JP #chapterDropdown span 
{
    padding:3px 0px 0px 3px;
    font-size:10px;
}

#chapterDropdownList {
    display:none;
    position:absolute;
    left:0px;
    top:-1px;
    width:100%;
    padding:6px 0px 8px 0px;
    background-color:#383838;
    color: #fff;
    border:1px solid rgba(0,0,0,1);
    -webkit-box-shadow:2px 2px 4px rgba(0,0,0,0.4);
    border-radius:8px;
}

#chapterDropdownList div {
    min-width:100px;
    padding:8px 8px 8px 16px;
    background-color:#383838;
    color:#b7b7b7;
}

#chapterDropdownList div.selected {
    color: #fafafa;
    cursor:default;
}

#chapterDropdownList div:hover {
    background-color:rgba(0,0,0,0.05);
    color:#fafafa;
}

#chapterDropdown:hover {
    background-color:rgba(50,50,50,0.5);
}

#chapterDropdown.menuActive #chapterDropdownList {
    display:block;
}

#chapterDropdown #chapterDropdownList:hover {
    display:block;
}

#chapterDropdown #chapterDropdownList.dismissMenu {
    display:none;
}


#chapterCurrent {
    position:absolute;
    left:8px;
    top:3px;
    overflow:hidden;
    max-width:82%;
    white-space:nowrap;
}

#chapterPrevious, #chapterNext {
    float:right;
    width:26px;
    height:26px;
    background:url(images/prevArrow.png) no-repeat 0px 5px;
    border-left:1px solid #1B1B1B;
    cursor:pointer;    
}

#chapterNext {
    background:url(images/nextArrow.png) no-repeat 4px 5px;
}

#chapterPrevious {
    background-position:3px 5px;
}

#chapterPrevious.arrowDisabled, #chapterNext.arrowDisabled {
    opacity:0.4;
    cursor:default;
}

code {
	font-family:"Courier New", Courier, monospace;
	font-size:100%;
	-webkit-user-select:text !important;
}
