programming_notes_v1.css

/* 
 * Universal selector - clear all the margin and padding to get consistent layout for Firefox and IE 
 */
* { 
	margin: 0;
	padding: 0;
}

/* 
 * Set default style for all the tags.
 * Apply to the main content division as well.
 */
body {
	background-color: rgb(202, 251, 237);
	color: #000;
	font-family: "Segoe UI", Segoe, Calibri, "Nimbus Sans L", "Ubuntu", Tahoma, Arial, Helvetica, Verdana, sans-serif;
	   /* for Ubuntu: "Nimbus Sans L", "Ubuntu" */
	font-size: 14px;
	text-align: justify;
	line-height: 1.5;
}

/*
 * "wrap-outer" wraps header, wrap-inner and footer
 */
#wrap-outer {
	margin: 20px 20px 20px 20px;
	padding: 0;
	
}
/*
 * "wrap-inner" wraps content-header, content-main and content-footer
 */
#wrap-inner {
	background-color: #fff;
	margin: 0;
	border: 1px solid #ddd;
	padding: 25px 15px;
	box-shadow: 5px 5px 0 #ddd;
}
#content-header {
	margin: 0;
	padding: 50px 0 10px 0;
}

#content-main {
	margin: 0;
	padding: 30px 0 20px 0;
}
#content-footer {
	font-family: "Century Gothic", "Segoe UI", Segoe, "Nimbus Sans L", "Ubuntu", Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: right;
	color: rgb(192, 80, 77);
/*	color: rgb(11, 83, 149); */
	margin: 30px 0 0 0;
    padding: 0;
	border-top: 4px solid rgb(12, 155, 116);
}
/*
 *  The main "header" & "footer" divisions
 */
.header-footer {
	font-family: "Century Gothic", "Segoe UI", Segoe, "Nimbus Sans L", "Ubuntu", Verdana, Tahoma, Arial, Helvetica, sans-serif;
	color: rgb(192, 80, 77);
/*	color: rgb(11, 83, 149); */
	font-size: 13px;
	text-align: right;
	margin: 10px 0 5px 0;
	padding: 5px 4px;
}
.header-footer a {
	color: rgb(192, 80, 77);
	text-decoration: underline;
}
.header-footer a:focus, .header-footer a:hover {  /* change color and remove underline */
	text-decoration: none;
 	color: rgb(11, 83, 149);
/*	color: rgb(192, 80, 77); */
}

h1, h2, h3, h4, h5, h6 {  /* main title and sub-title */
	font-family: "Century Gothic", "Trebuchet MS", "Segoe UI", Segoe, "Nimbus Sans L", "Ubuntu", Verdana, Tahoma, Arial, Helvetica, sans-serif;
	margin: 0;
	color: rgb(10, 132, 100);
	letter-spacing: 1px;
	line-height: 1.2;
	text-align:left;
}
h1 {
	font-size: 40px;
	font-weight: 400;
	padding: 0.2em 0;
}
h2 {
	font-size: 36px;
	font-weight: 400;
	padding: 0.2em 0;
}
h3 {
	font-size: 22px;
	border-bottom: thin solid rgb(12, 155, 116);
	padding: 1.5em 0 0.3em 0;
}
h4 {
	font-family: "Segoe UI", Segoe, "Nimbus Sans L", "Ubuntu", Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 18px;
	padding: 1.3em 0 0.2em 0;
	border-bottom: thin dotted rgb(12, 155, 116);
}
h5, h6 {
	font-family: "Segoe UI", Segoe, "Nimbus Sans L", "Ubuntu", Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #444;
	padding: 1.2em 0 0 0;  /* top right bottom left */
	letter-spacing: 1px;
}
.line-heading {
	color: #444;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 0.2em 0;
}
.line-heading-code-new {
	font-family: Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
	color: #E31B23;
	font-size: 15px;
    font-weight: normal;
/*	letter-spacing: 0.5px; */
}
p {
	margin-top: 0.6em;
	margin-bottom: 0.4em;
}
pre {
	font-family: Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
	     /* "DejaVu Sans Mono" for Ubuntu */
	font-size: 13px;
	margin: 5px 0 8px 0;
	border: solid 2px #f8f8f8;  /* slight 3D shape */
	padding: 5px 10px;
	line-height: 135%;
}
code {
	font-family: Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
}

ul {   /* first level ul */
	margin: 0.3em 0 0.2em 1.8em;
	padding: 0;
/*	list-style-type: square;  */
	list-style-image: url(images/BulletSquare.png);
}
ul ul li {   /* 2nd level ul */
	list-style-image: url(images/BulletRound.png);
/*
	list-style-type: disc;
	list-style-image: none; */
}
ul ul u1 li {   /* 3rd level ul */
	list-style-type: circle;
	list-style-image: none;
}
ol {   /* first level ol */
/*    list-style-position:inside; */
/*    display: table  */
    list-style-type: decimal;
	margin: 0.3em 0 0.2em 2.5em;
	padding: 0;
}
ol ol li {   /* 2nd level ol */
	list-style-type: lower-alpha;
}
ol ol o1 li {  /* 3rd level ol */
	list-style-type: lower-roman;
}

li {
	margin: 0.4em 0;
}

.float-left-ol-ul {
	overflow:hidden;
}

/* li after a left-float image */
.float-left-li {
   position: relative; left: 20px;
   margin-right: 20px;
}

a {
	color: rgb(11, 83, 149);
	text-decoration: none;
}
a:hover, a:focus {
	color: rgb(192, 80, 77);
	text-decoration: underline;
}

a.references {
	display: block;
	width: 30em;
	font-size: 18px;
	font-weight: bold;
	margin: 4em 0 0 0;
}

p.references {
	font-size: 18px;
	font-weight: bold;
	margin: 4em 0 0 0;
}

/*
 * General classes
 */
.center-block {
	margin: 10px auto;  /* auto margin-left and margin-right to center the table */
}
.text-center {	
    text-align: center; 
}
.text-right {	
    text-align: right; 
}
.underline {
	text-decoration: underline;
}
.font-code {
	font-family: Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
}
.font-code-text {
	font-family: Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
	font-size: 14px;
}
.font-code-smaller {
	font-family: Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
	font-size: 13px;
}
.font-normal {
	font-family: "Segoe UI", Segoe, Calibri, "Nimbus Sans L", "Ubuntu", Tahoma, Arial, Helvetica, Verdana, sans-serif;
}
/* to remove in future version, don't work under DW */
.pre {
    white-space: pre;	
}
/* color control mainly for <pre>, <div>, <span> */
.color-example {
	background-color: rgb(215, 236, 211);  /* darker */
}
.color-example-light {
	background-color: rgb(236, 246, 234);  /* lighter */
}
.color-syntax, .color-command {
	background-color: rgb(204, 238, 241);  /* darker */
}
.color-explanation {
	background-color: #eee;   /* grey */
}
/* Character level control for code listing */
.color-comment {
	color: #009900;  /* green */
}
.color-new {
	color: #E31B23;  /* dark red to highlight new terms */
}
.color-error {
	color: #ff0099;  /* bright red */
/*	font-weight:bold; */
}
.color-plain {
	background-color: #fff;
}
.color-highlight {
	background-color: #ff0;
}
.color-highlight-new {
    background-color: #FFC;  /* lighter */
}

.output {  /* Output of program or DOS session */
    background-color: rgb(236, 246, 234);  /* lighter */
	border: solid 2px #f8f8f8;   /* slight 3D shape */
	padding: 4px 8px;
}
.side-note {
	margin-top: 15px;
    margin-left: 40px;
	padding: 3px 8px; 
	background-color: #e7e7e7;
}


/*
 * for positioning images 
 */
img.image-center {      /* center horizontally an image */
	display: block;
	margin: 10px auto;
}
img.image-border {
    border: #ddd thin solid;
}
img.image-float-left {
	float: left;
	margin: 8px 15px 15px 0;
    border: #ddd thin solid;
}
img.image-float-right {
	float: right;
	margin: 8px 0 15px 15px;
    border: #ddd thin solid;
}
.float-clear {
   clear: both;	
}

/*
 *  Table - for tablulating data with alternate row colors or different column colors
 */
.table-zebra, .table-program {
	border-collapse: collapse;
	border: 0;
	margin: 0 auto; /* center */
	padding: 0;
    width: 100%;
	/* Default setting for all cells in this table, inherited */
    background-color: rgb(231, 240, 248);  /* default-color: lighter */
	text-align: left;
	vertical-align: top;
}

.table-zebra tr > th {  /* header cells */
	color: #ffffff;     /* white text on dark background */
	background-color: rgb(0, 157, 217);
	margin: 0;
	border: 2px solid white;
	padding: 4px 10px;
	font-size: 15px;
	letter-spacing: 1px;
	text-align: center;
}

.table-zebra tr > td {  /* data cells */
    margin: 0;
	border: 2px solid white;
	padding: 2px 8px;
	/* color, font, text inherited from table */
	vertical-align: top;
}

.table-zebra tr:nth-child(odd) > td {  /* odd rows */
	background-color: rgb(203, 223, 241);  /* darker */
}

td > pre {
	font-family: Consolas, "DejaVu Sans Mono", "Lucida Console", "Courier New", Courier, monospace;
	font-size: 14px;
	margin: 0;
    border: none;
	padding: 2px 0px 5px 0px;
    line-height: 135%;
}


.table-program th {  /* header cells */
	color: #ffffff;     /* white text on dark background */
	background-color: rgb(0, 157, 217);
	margin: 0;
	border: 2px solid white;
	padding: 4px 10px;
	font-size: 15px;
	letter-spacing: 1px;
	text-align: center;
}

.table-program td {  /* data cells */
    margin: 0;
	border: 0;
	padding: 0;
	/* color, font, text inherited from table */
}

.table-program td pre {
	margin: 0;
	border: solid 2px #f8f8f8;   /* slight 3D shape */
	padding: 5px 10px;
}

.table-program td pre.text-right {
	text-align: right;
}

/* Setting the color for row (2 colors) or column (3 colors) */
/* can only set the background, border, width of <col>, NOT font, text, color */
/* for table-zebra */
.col-desc {       /* same as default color */
    background-color: rgb(231, 240, 248);  /* lighter */
}


/* To remove tr-alt in future version */
.col-code, .tr-alt {
	background-color: rgb(203, 223, 241);  /* darker */
}

.col-example {
    background-color: #eee;  /* grey */
}

/* for table-program */
.col-line-number {
	width: 40px;
    background-color: rgb(225, 233, 207);
}

.col-program {
    background-color: rgb(240, 244, 233);
}

/*
 * For the "Table of Content" generated by JavaScript
 * in <div id="toc">
 */
#wrap-toc {
    display: block;
	background: none repeat scroll 0 0 rgb(231, 246, 239);
	float: right;
	width: 230px;
	z-index: 100;
	line-height: 1.5;
	margin: 0 0 0 15px;
	padding: 5px 8px 10px 8px;
	text-align: left;
	white-space: nowrap;
/*	min-height: 180px;  */
}
#wrap-toc h5 {
   letter-spacing: 1px;
   margin: 0;
   text-transform: uppercase;
	color: #444;
	padding: 0.5em 0;
}
a#show-toc {
	color: rgb(192, 80, 77);
	text-decoration: none;
   letter-spacing: 1px;
}
#toc {
	overflow: auto;
}
#toc a.toc-H3 {
    margin-left: 0px;
	font-size: 15px;
}
#toc a.toc-H4 {
    margin-left: 20px;
	font-size: 14px;
}
#toc a.toc-H5 {
    margin-left: 40px;
	font-size: 14px;
}