@charset "UTF-8";
@import 'Common.css';
@import 'TutorialExample.css';

/* Main page styles */
#header
{
   background: url(../images/title_page.png) no-repeat;
}
#tutorial
{
   margin: 0px;
   padding: 0px;
}
#tutorialTitle
{
   text-align: center;
   padding-top: 58px;
   text-decoration: none;
   letter-spacing: -0.04em;
   font: normal 30px Georgia, "Times New Roman", Times, serif;
   text-transform: capitalize;
}
#topMenu
{
   background: #CCCCCC url(../images/menu.png) no-repeat;
   height: 35px;
   padding-right: 20px;
   padding-left: 10px;
   padding-top:15px;
   font-size:1.1em;
}
#topMenu a:link, #topMenu a:visited, #topMenu a:active
{
   color:#000000;
   text-decoration:none;
}
#topMenu a:hover
{
	color:#FF6633;
}
#topMenu #topMenuRight
{
	float:right;
}
#topMenu .grey1
{
	font-size:0.9em;
    color:#555555;
    letter-spacing:normal;
}
/* HTML element styles */
h2 + h3
{
	padding-left:20px;
}
ul
{
   margin: 0px;
   padding:0px;
   list-style: url(none) none;
}
li
{
   margin: 0px;
   padding:5px 5px 5px 10px;
}
#furtherRead ul, .examples ul
{
   background: url(../images/divider1.png) repeat-x;
   list-style: url(none) none;
   margin: -10px 0px 0px;
   padding: 10px 0px 0px;
   letter-spacing: -0.08em;
}
.examples ul
{
   background: url(../images/divider2.png) repeat-x;
}
#furtherRead li, .examples li
{
   margin: 0px;
   padding: 2px 5px 2px 15px;
}
pre
{
   background: #f2f2eb url(../images/shadow_code.gif) repeat-y;
   border-bottom: 1px dashed #cac3b1;
   margin: 0px 0px 10px;
   padding: 0px 0px 0px 10px;
   font: normal 12px "Courier New", Courier, monospace;
   color: #4B382D;
}
table
{
   margin: 0px;
   padding: 0px 0px 0px 10px;
}
table td
{
   margin: 0px;
   padding: 4px;
}
/* Code styles */
p.note
{
   background: #FFFBB0 url(../images/shadow_note.gif) repeat-y;
   padding: 10px;
   margin-bottom: 10px;
}
.note code
{
   font-weight: bold;	
}
.fullCode
{
   background:#e3f2ff url(../images/shadow_blue.gif) repeat-y;
   padding-top: 5px;
   border-bottom: 1px dashed #ACD2F6;
   margin-bottom: 4px;
}
.fullCode pre
{
   background: #f9fcfe;
   margin-left: 15px;
   color: #000066;
   border-left: 1px solid #4481EE;
   border-bottom-style: none;
   padding-left: 5px;
   margin-bottom: 4px;
}
.fullCode p
{
   margin-bottom: 6px;
}
/* Design styles */
#designer img
{
   float:left;
   border: 1px dashed #999999;
}
#designer .normal 
{
   padding: 10px 0px 10px 15px;
}
#designer .shadowBlue, #blog .shadowBlue, #blog .normal
{
   padding: 10px 5px 10px 15px;
}
#designer p
{
   margin: 0px 0px 0px 210px;
   padding: 10px 0px 0px;
}
/* Link styles */
#tutLinks a, #tutLinks a:link, #tutLinks a:active, #tutLinks a:visited, #coderLinks a, #coderLinks a:link, #coderLinks a:active, #coderLinks a:visited
{
   color: #000000;
   text-decoration: none;
}
#tutLinks a:hover, #coderLinks a:hover
{
   color: #FF6633;
   text-decoration: underline;
}
#tutLinks img
{
   border: 1px dashed #CCCCCC;
}
/* Common styles */
.shadowBlue, .shadowNormal
{
   padding: 10px 10px 10px 12px;
}
li.shadowBlue
{
   border-bottom-style: none;
}
#coderLinks li
{
   padding: 5px 10px 5px 12px;
}
/* Other styles */
.border
{
   background: url(../images/border1.gif) repeat-x;
   height: 10px;
}
.leftFloat
{
   margin: 0px 10px 0px 0px;
   padding: 0px;
   float: left;
}
.grey
{
   color: #333333;
}