/*
================================================================================================
http://www.tripwiremagazine.com/2010/02/185-very-useful-and-categorized-css-tools-tutorials-cheat-sheets.html
http://matthewjamestaylor.com/demos/ipad-css-layout/
http://stanislav.it/how-to-make-div-element-100-height-of-browser-window-using-css-only/
http://smacss.com/book/formatting
http://www.cssmatic.com/ http://css3generator.com/
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.codebeautifier.com/
http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options

margin order is: | top | right | bottom | left |
------------------------------------------------------------------------------------------------ */


html
 {
 height: 100%;
 width: 100%;
 font-size: 12px;
 }

body
 {
 font-size: 1rem;
 background: black;
 border: 0px solid white;
 margin: 0px;
 padding: 0px;
 width: 100%;
 /*
 ================================================================================================
 The following are non-standard Internet Explorer properties
 ------------------------------------------------------------------------------------------------ */
 scrollbar-3dlight-color: hsla(210, 10%, 50%, 1);
 scrollbar-face-color: hsla(210, 25%, 20%, 1);
 scrollbar-shadow-color: hsla(210, 15%, 15%, 1);
 scrollbar-track-color: hsla(210, 10%, 10%, 1);
 scrollbar-arrow-color: hsla(210, 70%, 80%, 1);
 scrollbar-highlight-color: hsla( 30, 60%, 90%, 1);
 scrollbar-darkshadow-color: hsla( 0, 0%, 0%, 1);
 }

#noborders
 {
 border: 0px solid black !important;
 margin: 0px 0px 0px 2px !important;
 padding: 0px 0px 0px 2px !important;
 border-width: 0px 0px 0px 1px !important;
 }

a:link,a:visited,a:active
 {
 color: hsla(210, 50%, 70%, 1);
 font: 1.0000rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-decoration: none;
 }

a:hover
 {
 color: hsla(210, 50%, 70%, 1);
 font: 1.0000rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-decoration: underline;
 }

.appthumbnailmargin
 {
 margin: 0px 15px 0px 0px;
 }

.background-page
 {
 background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%), url("picts/Background-NewLeather2.jpg");
 background-repeat: no-repeat;
 background-position: top left;
 }

.background-Content
 {
 background-color: black;
 box-shadow: 7px 7px 7px 7px black;
 }

.biglink
 {
 color: hsla(210, 50%, 70%, 1);
 font: 1.1666rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-decoration: none;
 }

.biglink:hover
 {
 color: hsla(210, 50%, 70%, 1);
 font: 1.1666rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-decoration: underline;
 }

.block-appscreenshot
 {
 margin: 15px 15px 15px 15px;
 }

.block-appicon
 {
 margin: 5px 15px 0px 15px;
 }

.block-center
 {
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

.block-copyright
 {
 color: hsla(210, 70%, 50%, 1);
 font: 0.8333rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 text-align: center;
 margin: 0px 0px 0px 0px;
 }

.block-date
 {
 color: hsla(210, 10%, 60%, 1);
 font: 0.8333rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 margin: 5px 15px 10px 0px;
 }

.block-normal
 {
 color: hsla(210, 10%, 65%, 1);
 font: 1.0000rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 margin: 0px 15px 10px 15px;
 }

.block-normal-nomargin
 {
 color: hsla(210, 10%, 65%, 1);
 font: 1.0000rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 margin: 0px 0px 0px 0px;
 }

.block-screenshot
 {
 margin: auto;
 width: 90%;
 }

.block-sourcecode
 {
 color: hsla(210, 50%, 95%, 1);
 font: 1.1666rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 margin: 0px 15px 10px 15px;
 }

.block-subtitle
 {
 color: hsla(210, 50%, 95%, 1);
 font: 1.1666rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 margin: 10px 15px 10px 15px;
 }

.block-title
 {
 color: hsla(210, 10%, 60%, 1);
 font: 1.6666rem Arial, Helvetica, sans-serif;
 font-weight: bold;
 margin: 5px 15px 10px 0px;
 }

.block-thumbnailframe
 {
 margin: 0px 0px 7px 0px;
 }

.block-thumbnailframelink
 {
 margin: 0px 0px 7px 0px;
 }

.button-appicon
 {
 display: block;
 text-align: center;
 padding: 0px;
 text-indent: 0px;
 padding-top: 5px;
 padding-bottom: 6px;
 width: 240px;
 -webkit-box-shadow:
 inset 9px 9px 7px -9px gray,
 inset -9px -9px 7px -9px black;
 -moz-box-shadow:
 inset 9px 9px 7px -9px gray,
 inset -9px -9px 7px -9px black;
 box-shadow:
 inset 9px 9px 7px -9px gray,
 inset -9px -9px 7px -9px black;
 background-image: url("picts/menu.jpg");
 text-shadow: 4px 3px black;
 }

.button-appicon:hover,.over
 {
 background-image: url("picts/menuon.jpg");
 }

.center
 {
 text-align: justify;
 }

.center-screenshot
 {
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

.floatleft
 {
 float: left;
 }

.headerpanel
 {
 -webkit-box-shadow: inset 3px 3px 8px -1px hsla(210, 100%, 85%, 1);
 -moz-box-shadow: inset 3px 3px 8px -1px hsla(210, 100%, 85%, 1);
 box-shadow: inset 3px 3px 8px -1px hsla(210, 100%, 85%, 1);
 }

.homegraphic
{
 width: 90%;
}


/* 15, 25 */
.iconframe,.iconframelink
 {
 border-radius: .33em;
 background-color: hsla(210, 100%, 15%, 1);
 -webkit-box-shadow:
 0px 0px 1px 0.4px hsla(210, 100%, 10%, 1),
 0px 0px 1px 0.9px hsla(210, 100%, 20%, 1),
 0px 0px 1px 1.3px hsla(210, 100%, 30%, 1),
 0px 0px 1px 1.7px hsla(210, 100%, 50%, 1),
 0px 0px 1px 2.1px hsla(210, 100%, 70%, 1),
 0px 0px 1px 2.6px hsla(210, 100%, 80%, 1),
 0px 0px 1px 3.0px hsla(210, 100%, 90%, 1);
 -moz-box-shadow:
 0px 0px 1px 0.4px hsla(210, 100%, 10%, 1),
 0px 0px 1px 0.9px hsla(210, 100%, 20%, 1),
 0px 0px 1px 1.3px hsla(210, 100%, 30%, 1),
 0px 0px 1px 1.7px hsla(210, 100%, 50%, 1),
 0px 0px 1px 2.1px hsla(210, 100%, 70%, 1),
 0px 0px 1px 2.6px hsla(210, 100%, 80%, 1),
 0px 0px 1px 3.0px hsla(210, 100%, 90%, 1);
 box-shadow:
 0px 0px 1px 0.4px hsla(210, 100%, 10%, 1),
 0px 0px 1px 0.9px hsla(210, 100%, 20%, 1),
 0px 0px 1px 1.3px hsla(210, 100%, 30%, 1),
 0px 0px 1px 1.7px hsla(210, 100%, 50%, 1),
 0px 0px 1px 2.1px hsla(210, 100%, 70%, 1),
 0px 0px 1px 2.6px hsla(210, 100%, 80%, 1),
 0px 0px 1px 3.0px hsla(210, 100%, 90%, 1);
 }

.iconframelink:hover
 {
 border-radius: .33em;
 background-color: hsla(210, 100%, 25%, 1);
 -webkit-box-shadow:
 0px 0px 1px 0.4px hsla(210, 100%, 10%, 1),
 0px 0px 1px 0.9px hsla(210, 100%, 20%, 1),
 0px 0px 1px 1.3px hsla(210, 100%, 30%, 1),
 0px 0px 1px 1.7px hsla(210, 100%, 50%, 1),
 0px 0px 1px 2.1px hsla(210, 100%, 70%, 1),
 0px 0px 1px 2.6px hsla(210, 100%, 80%, 1),
 0px 0px 1px 3.0px hsla(210, 100%, 90%, 1),
 0px 0px 5px 4.5px hsla(210, 50%, 70%, 1);
 -moz-box-shadow:
 0px 0px 1px 0.4px hsla(210, 100%, 10%, 1),
 0px 0px 1px 0.9px hsla(210, 100%, 20%, 1),
 0px 0px 1px 1.3px hsla(210, 100%, 30%, 1),
 0px 0px 1px 1.7px hsla(210, 100%, 50%, 1),
 0px 0px 1px 2.1px hsla(210, 100%, 70%, 1),
 0px 0px 1px 2.6px hsla(210, 100%, 80%, 1),
 0px 0px 1px 3.0px hsla(210, 100%, 90%, 1),
 0px 0px 5px 4.5px hsla(210, 50%, 70%, 1);
 box-shadow:
 0px 0px 1px 0.4px hsla(210, 100%, 10%, 1),
 0px 0px 1px 0.9px hsla(210, 100%, 20%, 1),
 0px 0px 1px 1.3px hsla(210, 100%, 30%, 1),
 0px 0px 1px 1.7px hsla(210, 100%, 50%, 1),
 0px 0px 1px 2.1px hsla(210, 100%, 70%, 1),
 0px 0px 1px 2.6px hsla(210, 100%, 80%, 1),
 0px 0px 1px 3.0px hsla(210, 100%, 90%, 1),
 0px 0px 5px 4.5px hsla(210, 50%, 70%, 1);
 }

.just
 {
 text-align: justify;
 }

.menuimage-borders
 {
 border: solid black;
 border-width: 0px;
 }

.menuimage-borders-new
 {
 margin-top: 0px;
 margin-right: 1px;
 margin-bottom: 0px;
 margin-left: 1px;
 border-top: 0px;
 border-right: 0px;
 border-bottom: 0px;
 border-left: 0px;
 width: 124px;
 }

.noflashtitle
 {
 color: white;
 font: normal 22px "Courier New", arial, sans-serif;
 }

.page-splits
 {
 border: 0px;
 height: 3px;
 width: 98%;
 /*
 ================================================================================================
 The following are non-standard browser-specific properties
 ------------------------------------------------------------------------------------------------ */
 background-image: -webkit-linear-gradient(left, hsla(210, 10%, 5%, 1), hsla(210, 10%, 20%, 1), hsla(210, 10%, 5%, 1));
 background-image: -moz-linear-gradient(left, hsla(210, 10%, 5%, 1), hsla(210, 10%, 20%, 1), hsla(210, 10%, 5%, 1));
 background-image: -ms-linear-gradient(left, hsla(210, 10%, 5%, 1), hsla(210, 10%, 20%, 1), hsla(210, 10%, 5%, 1));
 background-image: -o-linear-gradient(left, hsla(210, 10%, 5%, 1), hsla(210, 10%, 20%, 1), hsla(210, 10%, 5%, 1));
 }

.page-splits-sourcecode
 {
 margin-top: 30px;
 margin-bottom: 0px;
 height: 30px;
 width: 98%;
 border-style: solid;
 border-color: hsla(210, 10%, 80%, 1);
 border-width: 1px 0 0 0;
 border-radius: 20px;
 }

.page-endcontent
 {
 border: 0px;
 height: 3px;
 width: 98%;
 /*
 ================================================================================================
 The following are non-standard browser-specific properties
 ------------------------------------------------------------------------------------------------ */
 background-image: -webkit-linear-gradient(left, hsla(210, 10%, 10%, 1), hsla(210, 70%, 50%, 1), hsla(210, 10%, 10%, 1));
 background-image: -moz-linear-gradient(left, hsla(210, 10%, 10%, 1), hsla(210, 70%, 50%, 1), hsla(210, 10%, 10%, 1));
 background-image: -ms-linear-gradient(left, hsla(210, 10%, 10%, 1), hsla(210, 70%, 50%, 1), hsla(210, 10%, 10%, 1));
 background-image: -o-linear-gradient(left, hsla(210, 10%, 10%, 1), hsla(210, 70%, 50%, 1), hsla(210, 10%, 10%, 1));
 }

.pagebars
 {
 -webkit-box-shadow:
 inset 0px 1px 6px -1px lightgray,
 inset 0px -1px 6px -1px black;
 -moz-box-shadow:
 inset 0px 1px 6px -1px lightgray,
 inset 0px -1px 6px -1px black;
 box-shadow:
 inset 0px 1px 6px -1px lightgray,
 inset 0px -1px 6px -1px black;
 background: url(picts/bar.jpg) hsla(207,10%,25%,1);
 border: solid black;
 border-width: 1px 0px;
 height: 15px;
 }

.photoframe,.photoframelink
 {
 border-radius: .33em;
 background-color: hsla(210, 100%, 10%, 1);
 box-shadow:
 0px 0px 3px 1px hsla(210, 100%, 10%, 1),
 0px 0px 3px 2px hsla(210, 100%, 20%, 1),
 0px 0px 3px 3px hsla(210, 100%, 30%, 1),
 0px 0px 3px 4px hsla(210, 100%, 50%, 1),
 0px 0px 3px 5px hsla(210, 100%, 70%, 1),
 0px 0px 3px 6px hsla(210, 100%, 80%, 1),
 0px 0px 3px 7px hsla(210, 100%, 90%, 1);
 }

.photoframelink:hover
 {
 border-radius: .33em;
 box-shadow:
 0px 0px 3px 1px hsla(210, 100%, 10%, 1),
 0px 0px 3px 2px hsla(210, 100%, 20%, 1),
 0px 0px 3px 3px hsla(210, 100%, 30%, 1),
 0px 0px 3px 4px hsla(210, 100%, 50%, 1),
 0px 0px 3px 5px hsla(210, 100%, 70%, 1),
 0px 0px 3px 6px hsla(210, 100%, 80%, 1),
 0px 0px 3px 7px hsla(210, 100%, 90%, 1),
 0px 0px 15px 10.5px hsla(210, 50%, 70%, 1);
 }

pre
 {
 font: 1.0000rem "Lucida Console", Monaco, "Courier New", Courier, monospace;
 color: hsla(30, 10%, 65%, 1);
 }

.pre-inline
 {
 font: 1.0000rem "Lucida Console", Monaco, "Courier New", Courier, monospace;
 color: hsla(30, 10%, 65%, 1);
 margin: 0px 7px 0px 7px;
 }

.tablebackground
 {
 background-color: black;
 }

th
 {
 float: left;
 }

th.right
 {
 float: right;
 }

.thumbnailframe,.thumbnailframelink
 {
 border-radius: .33em;
 background-color: hsla(210, 100%, 15%, 1);
 box-shadow:
 0px 0px 2px 0.7px hsla(210, 100%, 10%, 1),
 0px 0px 2px 1.4px hsla(210, 100%, 20%, 1),
 0px 0px 2px 2.1px hsla(210, 100%, 30%, 1),
 0px 0px 2px 2.9px hsla(210, 100%, 50%, 1),
 0px 0px 2px 3.6px hsla(210, 100%, 70%, 1),
 0px 0px 2px 4.3px hsla(210, 100%, 80%, 1),
 0px 0px 2px 5.0px hsla(210, 100%, 90%, 1);
 }

.thumbnailframelink:hover
 {
 border-radius: .33em;
 background-color: hsla(210, 100%, 25%, 1);
 box-shadow:
 0px 0px 2px 0.7px hsla(210, 100%, 10%, 1),
 0px 0px 2px 1.4px hsla(210, 100%, 20%, 1),
 0px 0px 2px 2.1px hsla(210, 100%, 30%, 1),
 0px 0px 2px 2.9px hsla(210, 100%, 50%, 1),
 0px 0px 2px 3.6px hsla(210, 100%, 70%, 1),
 0px 0px 2px 4.3px hsla(210, 100%, 80%, 1),
 0px 0px 2px 5.0px hsla(210, 100%, 90%, 1),
 0px 0px 10px 7.5px hsla(210, 50%, 70%, 1);
 }

.width-stepdown
 {
 width: 96%;
 }

@media print
 {
 .printhelp
 {
 width: 600px;
 }

 .printhide
 {
 display: none;
 }
 }

@media screen
 {
 .printonly
 {
 display: none;
 }
 }