/* body */
html {
background-color: #e0d3e0;
background-image: url('/img/bg.png');
margin: 0px;
padding: 0px;
}
body {
background-image: url('/img/bg.png');
padding: 0px;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 1em;
/* background-color: #d0eed0; */
background-color: #e0d3e0;
}
/* img overrides */
img {
margin: 0px;
padding: 0px;
border: none;
}
/* form overrides */
form {
margin: 0;
padding: 0;
}
/* link overrides */
a {
/* color == navbar::background-color */
color: #488657;
text-decoration: none;
}
a:visited {
color: #084617;
}
a:hover {
color: #66dd66;
}
/* page */
.page {
/*width: 784px; /* norm: 782 */
min-width: 784px;
background-color: #c0b3c0;
margin-right: 75px;
margin-left: 75px;
padding-bottom: 2px;
}
.sites {
text-align: left;
padding: 0px;
margin-right: 2px;
border-right: 1px solid black;
border-left: 1px solid black;
}
/* header section */
.printheader {
display: none;
}
.header {
padding: 0px;
margin: 0px;
height: 158px;
border-top: 1px black solid;
text-align: center;
background-image: url('/img/header_r.png');
background-repeat: no-repeat;
background-position: top right;
}
.contentBodyCenter {
font-size: 10pt;
font-family: sans-serif;
padding-top: 0px;
margin-left: 21px;
margin-right: 24px;
margin-bottom: 18px;
font-style: normal;
text-align: center;
}
.headerl {
overflow: hidden;
z-order: -1;
position: absolute;
left: 76px;
top: 11px;
width: 50%;
height: 158px;
float: left;
}
.headerm {
position: relative;
z-order: 2;
}
/* navigation bar */
.navbarContainer {
text-align: center;
width: 100%;
padding-top: 1px;
padding-bottom: 4px;
background-color: #4B7857;
}
.navTBButton {
vertical-align:middle;
margin: 0px;
padding: 0px;
border: none;
}
#navTBText {
font-size: 8pt;
font-weight: bold;
font-family: sans-serif;
//color: #D4C6D4;
color: #ADADAD;
}
/* content section */
.contentContainer {
background-color: #e8ffe8;
background-color: #fcfffc;
border-left: 10px solid #4B7857;
}
.content {
padding-top: 23px;
background-image: url('/img/w.png');
background-position: 50% 50%;
background-repeat: no-repeat;
border-left: 1px solid #3D5F44;
border-bottom: 1px solid #3D5F44;
padding-bottom: 10px;
text-align: justify;
}
.contentHeader {
vertical-align: middle;
font-size: 14pt;
font-weight: bold;
font-family: sans-serif;
border-bottom: 1px solid #3D5F44;
border-top: 1px solid #3D5F44;
border-left: 1px solid #3D5F44;
padding: 0px 10px 0px 9px;
color: white;
background-color: #B28CB4;
background-color: #68A677;
}
.contentNav {
vertical-align: middle;
text-align: right;
padding: 0px;
margin: 0px;
font-size: 8pt;
}
.contentNavTable {
width: 100%;
}
.contentLine {
border-bottom: 1px solid gray;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 18px;
}
.contentList {
display: none;
float: right;
border: 1px solid black;
margin-right: 10px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
color: #68A677;
background-color: #d8efd8;
font-size: 10pt;
font-family: sans-serif;
font-style: normal;
}
.contentListHeader {
text-align: center;
text-decoration: underline;
}
ul {
padding-left: 15px;
}
.contentList .contentListItem {
margin-top: 15px;
}
.contentListItem + .contentListItem {
margin-top: 5px;
}
.contentSectionHeader {
margin-bottom: 18px;
margin-left: 10px;
margin-right: 11px;
padding-top: 15px;
border-bottom: 1px solid #cBc8c7;
}
.contentSectionHeader div {
font-size: 13pt;
font-weight: 700;
font-family: sans-serif;
padding-left: 3px;
padding-right: 7px;
padding-top: 0px;
padding-bottom: 4px;
border-bottom: 1px solid #4D4F44;
border-bottom: 1px solid #b28cb4;
color: black;
color: #7C5480;
}
.contentSubHeader {
font-size: 11pt;
font-weight: bold;
font-family: sans-serif;
padding-top: 0px;
padding-bottom: 8px;
padding-left: 14px;
padding-right: 10px;
color: #0B2807;
}
.contentBlog .contentSubHeader {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 1.2em;
margin-bottom: 0.8em;
margin-left: -3px;
}
.contentDate {
float:right;
font-size: 10pt;
font-style: italic;
padding-left: 10px;
padding-right: 15px;
padding-top: 6px;
color: gray;
}
.contentBody {
font-size: 10pt;
font-family: sans-serif;
padding-top: 0px;
margin-left: 21px;
margin-right: 24px;
margin-bottom: 18px;
font-style: normal;
}
.contentBody + .contentBody {
margin-top: -6px;
}
.contentBlogTitle {
font-size: 14pt;
font-weight: 400;
font-family: sans-serif;
padding-top: 4px;
padding-bottom: 8px;
padding-left: 14px;
padding-right: 10px;
color: #0B2807;
}
.contentBlogTitle div {
padding-bottom: 4px;
border-bottom: 1px solid black;
margin-right: 14px; /* 24 - 10 */
margin-bottom: 10px;
}
.contentBlog {
font-family: "Lucida Sans Unicode", "Lucida Sans", "georgia", sans-serif;
margin-top: 10px;
margin-left: 5px;
}
.contentBlog div.image {
float:right;
margin: 5px;
padding: 2px;
margin-right: 0px;
margin-left: 10px;
text-align: center;
border: 1px solid gray;
font-size: 8pt;
background-color: #ffffe7;
}
.contentBlog div.image div.imagecontainer {
border: 1px solid #c0c0c0;
background-color: #fffffa;
padding: 5px;
}
.contentBlog div.image .caption {
margin-top: 2px;
border: 1px solid #c0c0c0;
background-color: #fffffa;
padding: 5px;
}
.contentBlog div.codeContainer {
clear: both;
margin: 5px;
margin-top: 10px;
margin-bottom: 10px;
padding: 2px;
text-align: center;
border: 1px solid gray;
background-color: #ffffe7;
}
.contentBlog div.codeSection {
margin: 0px;
border: 1px solid lightgray;
background-color: #fffffd;
}
.contentComments {
font-weight: 400;
font-size: 8pt;
font-family: serif;
font-style: normal;
padding-left: 2px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
border-bottom: 1px solid gray;
}
.contentSubHeader .contentComments {
border-bottom: none;
margin-top: 2px;
margin-bottom: 4px;
}
/* comments */
.commentAuthor {
margin-left: 40px;
margin-right: 13px;
margin-bottom: 5px;
padding-left: 3px;
font-weight: 700;
font-size: 10pt;
font-family: sans-serif;
border-bottom: 1px solid gray;
}
.commentAuthor#wilks {
color: green;
}
.commentContainer#wilks {
color: green;
}
.commentDate {
margin-right: 17px;
font-size: 10pt;
font-style: italic;
padding-left: 10px;
color: gray;
float:right;
}
.commentContainer {
margin: 10px;
margin-top: 0px;
margin-left: 40px;
padding: 6px;
font-size: 10pt;
font-family: sans-serif;
}
.commentTextBoxAuthor {
margin-left: 13px;
margin-bottom: 5px;
width: 150px;
}
.commentTextBoxWeb {
margin-left: 13px;
margin-bottom: 5px;
width: 300px;
}
.commentTextBoxComment {
margin-left: 13px;
margin-bottom: 5px;
width: 500px;
}
.commentTextBoxCaptcha {
margin-left: 13px;
margin-bottom: 5px;
width: 150px;
}
.commentButton {
margin-left: 18px;
margin-bottom: 5px;
}
.commentCaptcha {
margin-left: 13px;
}
/* workaround */
.commentContainer .commentAuthor {
margin-left: 0px;
}
.errorContainer {
background-color: #FFDDDD;
border: 1px solid #68A677;
padding: 6px;
margin: 10px;
font-size: 10pt;
font-family: sans-serif;
text-align: center;
}
img.left {
float: left;
clear: both;
padding: 1px;
margin: 10px;
margin-left: 0px;
border: 1px solid black;
}
img.right {
float: right;
clear: both;
padding: 1px;
margin: 10px;
margin-right: 0px;
border: 1px solid black;
}
img.center {
padding: 1px;
margin: 10px;
border: 1px solid black;
}
div.hardleft {
color: #7C5480;
}
div.hardright {
text-align: right;
color: #7C5480;
}
div.hardcenter {
float:none !important;
margin-top: 10px;
text-align: center;
color: #7C5480;
}
div.hardleft img {
text-align: left;
padding: 1px;
border: 1px solid black;
margin: 9px 0;
}
div.hardright img {
text-align: right;
padding: 1px;
border: 1px solid black;
margin: 9px 0;
}
div.hardcenter img {
padding: 1px;
border: 1px solid black;
margin: 9px 0;
}
/* Copyright */
.copyright {
width:100%;
border-bottom: 1px solid black;
border-right: 1px solid black;
background-color: #4B7857;
text-align: left;
font-size: 8pt;
font-family: sans-serif;
font-style: italic;
text-align: center;
color: white;
padding: 0px;
margin: 0px;
padding-top:3px;
padding-bottom:3px;
}
/* Toolbar */
table {
padding: 0px;
margin: 0px;
border: none;
}
.tbImage {
vertical-align: middle;
}
.tbButton {
margin-left: 5px;
}
#hovertext {
margin-right: 10px;
}
/* content sections */
.artSection {
border: 1px solid #ddccdd;
padding: 3px;
padding-bottom: 4px;
background-color: #FFFEFF;
margin-bottom: 6px;
}
.artContents {
float:right;
padding-right: 3px;
color: gray;
}
.artHeader {
font-weight: 700;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
border-bottom: 1px solid #cccccc;
margin-bottom: 5px;
}
.artHeader a {
color: #7C5480;
}
.artHeader a:visited {
color: #5D4060;
}
.artHeader a:hover {
color: #D077E9;
}
.artDesc {
margin-left: 10px;
margin-right: 10px;
text-align: justify;
}
.codeSection {
margin-left: 10px;
margin-right: 15px;
margin-bottom: 16px;
margin-top: 15px;
background-color: #fffcff;
padding: 3px;
padding-left: 5px;
font-style: normal;
font-family: monospace;
font-size: 10pt;
border: 1px solid gray;
text-align: left;
}
.overflowWidth {
overflow: auto;
max-width: 100%;
max-height: 768px;
}
.overflow {
overflow:auto;
max-height: 500px;
}
.codeKeyword {
color: #0000b8;
}
.codeOp {
color: #b80000;
}
.codeString {
color: #dd8800;
}
.codePreProp {
color: purple;
}
.codeNumber {
color: #008888;
}
.codeComment {
color: #008800;
}
.codeText {
color: #555555;
}
.codeAttribute {
color: #aa00aa;
}
.dirSection {
margin-left: 10px;
}
.dirFolder {
font-size: 12pt;
font-family: sans-serif;
font-weight: 700;
padding-left: 3px;
margin-bottom: 5px;
}
.dirCurFolder {
font-size: 12pt;
font-family: sans-serif;
font-weight: 700;
padding-left: 7px;
padding-bottom: 5px;
padding-top: 3px;
margin-right: 15px;
border: 1px solid #eeddee;
color: #79478B;
background-color: #68A677;
background-color: #C489CD;
background-color: #D3B8DA;
background-color: #FFFEFF;
color: #7C5480;
}
.dirSimpleFolder {
font-size: 10pt;
font-family: sans-serif;
font-weight: 700;
margin-bottom: 5px;
}
.dirFile {
font-size: 10pt;
font-family: sans-serif;
font-weight: 400;
margin-bottom: 5px;
}
.dirLine {
border-bottom: 1px solid gray;
margin-right: 15px;
margin-bottom: 4px;
}
/* Code View */
.dirCurFolder .links {
float: right;
padding-right: 10px;
font-style: italic;
font-size: 8pt;
color: #E5B9E9;
}
.dirCurFolder .links a {
font-weight: 400;
color: #E5B9E9;
}
.dirCurFolder .links a:visited {
color: #E5B9E9;
}
.dirCurFolder .links a:hover {
color: #E5B9E9;
}
/* TUTORIAL */
.tutWord {
color: purple;
font-weight: 700;
}
/* PROJECT LIST */
.projectList
{
margin: 0px;
padding: 0px;
border: none;
}
.projectItem
{
vertical-align:top;
}
.projectDesc
{
padding-top: 7px;
width:100%;
vertical-align:top;
}
.projectDesc .contentSubHeader
{
margin-left: 12px;
padding-left: 2px;
padding-bottom:1px;
margin-bottom:2px;
border-bottom: 1px solid gray;
}
.projectDesc .contentBody
{
margin-left: 12px; margin-bottom: 10px;
}
/* SCREEN SHOT LIST */
.projectShotList
{
width: 734px;
text-align: center;
font-weight: 700;
color: purple;
padding-left: 3px;
padding-top: 3px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
.projectShotList * td
{
width: 150px;
}
.projectShotList tr td + td
{
padding-left: 15px;
}
.projectShotList tr td img
{
vertical-align: middle;
width: 150px;
padding: 1px;
border: 1px solid #dfdfdf;
}
.projectShotList tr td a:hover img
{
border: 1px solid #808080;
}
.projectDate {
float:right;
font-size: 10pt;
font-style: italic;
padding-left: 10px;
padding-right: 15px;
padding-top: 0px;
color: gray;
}
/* DOWNLOAD */
.downloadList
{
padding-left:0px;
margin-left: 0px;
}
.downloadItem
{
vertical-align: middle;
}
.downloadDesc
{
padding-bottom: 9px;
vertical-align: middle;
}
.downloadDesc .contentBody
{
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
.downloadDesc .contentBody + .contentBody
{
padding-top: 3px;
}
/* Music Section */
.trackListing
{
border: 1px solid gray;
margin-bottom: 20px;
background-color: #ffffef;
}
.trackListing table {
width: 100%;
}
.trackListing table tr td.album {
padding: 5px;
margin: 0px;
vertical-align: top;
width: 196px;
}
.trackListing table tr td {
padding: 5px;
margin: 0px;
vertical-align: top;
}
.trackAlbum {
border: 1px solid #c0c0c0;
clear: both;
display: block;
}
.trackAlbum img {
padding: 2px;
margin: 0px;
clear: both;
display: block;
}
.trackListing .trackLinks {
float: right;
padding-right: 10px;
font-style: italic;
}
.trackListing .contentBlogTitle {
border-bottom: 1px solid #c0c0c0;
margin-bottom: 13px;
padding-left: 2px;
}
.trackListing .contentSectionHeader {
border-bottom: 1px solid #c0c0c0;
margin-bottom: 13px;
padding-left: 2px;
}
.trackListing .contentSubHeader {
padding-left: 2px;
margin-left: 2px;
line-height: 1.3em;
}
.trackListing .contentBody {
padding-left: 2px;
margin-left: 2px;
}
/* Easter Egg */
.easteregg
{
margin-top: -10px;
padding-right: 20px;
text-align: right;
}
/* Highlighting */
.hlite
{
background-color: #FBFFB3;
}
table.org
{
color: #7C5480;
background-color: #FFFEFF;
margin-right: auto;
margin-left: auto;
margin-top: 3px;
margin-bottom: 20px;
border: 1px solid gray;
border-spacing: 0px;
}
table.org.headers td
{
padding-right: 10px;
padding-left: 15px;
text-align: right;
border-right: 1px solid lightgray;
border-bottom: 1px solid lightgray;
}
table.org.headers td + td
{
padding-right: 15px;
padding-left: 6px;
text-align: left;
border-right: none;
}
table.org.headers td.last
{
border-bottom: none;
}
table.org.headers td.last + td
{
border-bottom: none;
}
div.hardcenter img.headimg
{
border: none;
vertical-align: middle;
margin: 0px;
padding: 0px;
}
.progressBody {
padding-left: 5px;
width: 250px;
padding-bottom: 2px;
}
.progressBar {
float: right;
width: 100px;
height: 1em;
border: 1px solid black;
}
.progressBar .for0 {
height: 1em;
width: 0px;
}
.progressBar .for5 {
height: 1em;
border-right: 1px solid black;
width: 5px;
background-color: green;
}
.progressBar .for10 {
height: 1em;
border-right: 1px solid black;
width: 10px;
background-color: green;
}
.progressBar .for15 {
height: 1em;
border-right: 1px solid black;
width: 15px;
background-color: green;
}
.progressBar .for20 {
height: 1em;
border-right: 1px solid black;
width: 20px;
background-color: green;
}
.progressBar .for25 {
height: 1em;
border-right: 1px solid black;
width: 25px;
background-color: green;
}
.progressBar .for30 {
height: 1em;
border-right: 1px solid black;
width: 30px;
background-color: green;
}
.progressBar .for35 {
height: 1em;
border-right: 1px solid black;
width: 35px;
background-color: green;
}
.progressBar .for40 {
height: 1em;
border-right: 1px solid black;
width: 40px;
background-color: green;
}
.progressBar .for45 {
height: 1em;
border-right: 1px solid black;
width: 45px;
background-color: green;
}
.progressBar .for50 {
height: 1em;
border-right: 1px solid black;
width: 50px;
background-color: green;
}
.progressBar .for55 {
height: 1em;
border-right: 1px solid black;
width: 55px;
background-color: green;
}
.progressBar .for60 {
height: 1em;
border-right: 1px solid black;
width: 60px;
background-color: green;
}
.progressBar .for65 {
height: 1em;
border-right: 1px solid black;
width: 65px;
background-color: green;
}
.progressBar .for70 {
height: 1em;
border-right: 1px solid black;
width: 70px;
background-color: green;
}
.progressBar .for75 {
height: 1em;
border-right: 1px solid black;
width: 75px;
background-color: green;
}
.progressBar .for80 {
height: 1em;
border-right: 1px solid black;
width: 80px;
background-color: green;
}
.progressBar .for85 {
height: 1em;
border-right: 1px solid black;
width: 85px;
background-color: green;
}
.progressBar .for90 {
height: 1em;
border-right: 1px solid black;
width: 90px;
background-color: green;
}
.progressBar .for95 {
height: 1em;
border-right: 1px solid black;
width: 95px;
background-color: green;
}
.progressBar .for100 {
height: 1em;
border-right: 1px solid black;
width: 100px;
background-color: green;
}