/* CSS for WebMO Help System */

/*
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}
*/

/*** GLOBAL ***/

body{
font-family: arial, helvetica, sans-serif;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

.version:after {
content: "24";
}

/*** MENU SIDEBAR ***/

#menu{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px; /*width of menu*/
height: 100%;
overflow: scroll;
background: #014E82;  /*consistent with webmo.css*/
color: grey;
}
#menu h1,h2,h3 {color: white}  /*consistent with webmo.css*/
#menu a:link		{color: #E0E0E0; text-decoration: none}
#menu a:visited	{color: #E0E0E0; text-decoration: none}
#menu a:hover		{color: #FFFFFF; text-decoration: none; font-weight: bold}
#menu a:active	{color: #333333; text-decoration: none; font-weight: bold}
#menu ul{
margin-left: 5px;
margin-right: 0px;
padding-left: 10px;
padding-right: 0px;
}
#menu h2 {padding-bottom: 0; margin-bottom: 0; font-size: 1.33em;}
#menu h2.selected a {color: #FFFFFF; text-decoration: none; font-weight: bold}
#menu ul.top {padding-left: 0; margin-top: 0;}
#menu li.top {font-weight: bold; padding-top: 0.5em;}
#menu li.selected a {color: #FFFFFF; text-decoration: none; font-weight: bold}

/*** TITLE BAR ***/

#title{
position:fixed;
left:200px;
top:0px;
right:0px;
height:3.75em; /*height of title*/
background: #014E82;  /*consistent with webmo.css*/
color: white;
}
#title h1,h2,h3 {color: white}  /*consistent with webmo.css*/
#title h1 {margin-top: 0; font-size: 1.75em;}

/*** MAIN CONTENT ***/

#main{
margin-top: 3.75em; /*set to height of title*/
position: fixed;
top: 0; 
left: 200px; /*set to width of menu*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
color: black;
}
#main h2,h3 {color: black}  /*override webmo.css*/
#main p {margin-left: 48px;}
#main ul,ol {margin-left: 48px;}
#main ol ul {margin-left: 0px;}
#main ol ol {margin-left: 0px;}
#main ul ul {margin-left: 0px;}
#main ul ol {margin-left: 0px;}
#main table {margin-left: 48px;}
#main p + ul {margin-top: -1em;}
#main p + ol {margin-top: -1em;}
#main h2 + ul {margin-top: 0em;}
#main h2 + ol {margin-top: 0em;}
#main .ul2 {margin-left: 0px;}
#main .iconimg{height: 20px; margin-bottom: -4px;}
#main .hs{font-weight: bold; font-size: 115%;}
#main .video{margin-left: 48px;}
#main strong {font-weight: bold; font-size: 115%;}
#main code {font-size: 110%;}
#main em {font-style: italic; xfont-weight: bold}
#main .threeimg {width: 250px}
#main .twoimg {width: 350px}
#main .smaimg {width: 400px}
#main .narimg {width: 500px}
#main .medimg {width: 600px}
#main .widimg {width: 700px}
#main .twotable td {padding-left: 20px; vertical-align: bottom}
#main .twotable td:first-child {padding-left: 0px}
#main .twotable img {width: 350px}
#main .threetable td {padding-left: 20px; vertical-align: bottom}
#main .threetable td:first-child {padding-left: 0px}
#main .threetable img {width: 250px}
#main .twovideotable td {padding-left: 20px; vertical-align: top; width: 514px}
#main .twovideotable td:first-child {padding-left: 0px}


.thinborder-center{
  border-collapse: collapse;
  border: 1px solid black;
  }
.thinborder-center th {
  border: 1px solid black;
  text-align: center;
  padding: 4px;
  }
.thinborder-center td {
  border: 1px solid black;
  text-align: center;
  padding: 4px;
  }
.thinborder-left{
  border-collapse: collapse;
  border: 1px solid black;
  }
.thinborder-left th {
  border: 1px solid black;
  text-align: left;
  padding: 4px;
  }
.thinborder-left td {
  border: 1px solid black;
  text-align: left;
  padding: 4px;
  }

.notice
{
line-height: 1.5;
font-style: italic;
word-wrap: break-word;
padding: 0.8em 0.7em;
position: relative;
margin: 3em 0px 1.5em;
border-bottom: 1px dotted #EC7970;
border-top: 1px dotted #EC7970;
font-size: 18px;
}

#main .notice .iconimg{height: 26px; margin-bottom: -5px;}

.tip:before
{
word-wrap: break-word;
font-style: italic;
line-height: 24px;
color: #FFF;
position: absolute;
left: 0px;
top: 0px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 2px;
content: "Tip!";
background: #EC7970 none repeat scroll 0% 0%;
font-size: 22px;
padding: 5px 8px 6px;
transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-webkit-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-moz-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-ms-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-o-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
}

.important:before
{
word-wrap: break-word;
font-style: italic;
line-height: 24px;
color: #FFF;
position: absolute;
left: 0px;
top: 0px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
border-radius: 2px;
content: "Important:";
background: #EC7970 none repeat scroll 0% 0%;
font-size: 22px;
padding: 5px 8px 6px;
transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-webkit-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-moz-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-ms-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
-o-transform: rotate(-5deg) translateX(-25px) translateY(-25px);
}

.tip b
{
color:#EC7970;
}