/*
    This portion of the CSS is dedicated
    to global stylizing. In other words,
    a design that most skilled people of
    the trade will likely agree is needed
    to better experience the user interface.
*/

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);

* {
    cursor: default;
}

a:link {
    cursor: pointer;
}

/*
    The following begins to outline basics.
*/

body {
    background-color: #666;
    margin: 1em 0 0 0;
    padding:0;
}

#page {
    width: 980px;
    border:0;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    padding: 6px 0px 0 0px;
}

#banner {
    background: url("../images/banner.png") no-repeat;
    min-height: 234px;
}

#showcase {
    font-family: 'Tahoma', sans-serif;
    padding: 0.3em 1.5em 0.5em 1.5em;
}

.content-split {
    -moz-column-count: 2;
    -moz-column-gap: 24px;
    -webkit-column-count: 2;
    -webkit-column-gap: 24px;
    column-count: 2;
    column-gap: 24px;
    padding: 20px;
}

.content {
    padding: 20px;
}

.content>h1 {
    font-family: 'Roboto Slab';
    font-weight: bold;
    text-transform: capitalize;
    margin:0 0 0.5em 0;
}

.content>.nav-left {
    width: 18em;
    display: block;
    color: #fff;
    margin: 5px 2em 5px 0;
    padding: 1em;
    font-family: tahoma;
    font-size: 9pt;
    float: left;
    text-transform: capitalize;
    -webkit-box-shadow: inset 0 0 6px 2px #00396d;
}

.content>.nav-left>h1 {
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    margin:0;
    padding: 10px;
}

.content>.nav-left>ul {
    list-style-type: none;
    margin:0;
    padding:0;
}

.content>.nav-left>ul>li {
    line-height: 20pt;
}

.content>.nav-left>ul>li>a:link {
    color: #fff;
    text-decoration: none;
    border-top: 1px dotted #fff;
    display: block;
}

.content>.nav-left>ul>li>a:hover {
    text-decoration: underline;
}

.content>.nav-left>ul>li>#exclude {
    border:0;
}

.content>.nav-left>ul>li>#current {
    padding-left: 1em;
}

p {
    font-family: "Roboto Slab";
    font-size: 11pt;
    margin:0;
    padding-bottom: 10px;
}

p>strong {
    font-family: "Roboto Slab";
    font-weight: normal;
    text-shadow:0 -1px 0 #000;
}

p>em {
    font-family: "Roboto Slab";
    font-variant: italic;
    padding-right:2px;
}

p>.article-img {
    float: left;
    margin: 1em 2em 1em 0.5em;
    border:0;
}

#footer {
    width: 980px;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 0 1em 0;
}

#footer>.column {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-left: 1px dotted #00519c;
    width: 25%;
    min-height: 200px;
    float: left;
    text-align: center;
}

#footer>.column:first-child {
    border: 0;
}

#footer>.column>h2 {
    color: #c00;
    font-family: "Roboto Slab";
    font-size: 17px;
    font-weight:normal;
    text-shadow: 1px 1px 0 #fff, 0px -1px 0 #800;
}

#footer>.column>ul {
    list-style-type: none;
    text-align: left;
    font-family: Tahoma;
    font-size: 9pt;
    padding: 0 0 0 2em;
}

.column>ul>li>a:link {
    text-decoration: none;
    color: #00519c;
}

.column>ul>li>a:hover {
    text-decoration: underline;
    color: #00519c;
}

.clear-both {
    clear: both;
    display: block;
}

#copyright-notice {
    width: 940px;
    padding: 20px;
    background-color: #00519c;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    color: #fff;
    font: 10pt Tahoma;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
}

#banner, #copyright-notice, .rounded-corners-top {
    -webkit-border-radius: 11px 11px 0 0;
    border-radius: 11px 11px 0 0;
}

.bluebox, .blue-fade {
    background: #007aec; /* Solid light blue color for old browsers */
    background: -moz-linear-gradient(top,  #007aec 0%, #00519c 100%); /* FireFox 3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#007aec), color-stop(100%,#00519c)); /* Chrome, Safari 4+ */
    background: -webkit-linear-gradient(top,  #007aec 0%,#00519c 100%); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(top,  #007aec 0%,#00519c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #007aec 0%,#00519c 100%); /* IE 10+ */
    background: linear-gradient(to bottom,  #007aec 0%,#00519c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007aec', endColorstr='#00519c',GradientType=0 ); /* IE 6-9 */
}

.gray-fade, #showcase, #footer {
    background: #f4f4f4; /* Solid light grey color for old browsers */
    background: -moz-linear-gradient(top,  #f4f4f4 0%, #d2d2d2 100%); /* FireFox 3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#d2d2d2)); /* Chrome, Safari 4+ */
    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#d2d2d2 100%); /* Chrome 10+, Safari 5.1+ */
    background: -o-linear-gradient(top,  #f4f4f4 0%,#d2d2d2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f4f4f4 0%,#d2d2d2 100%); /* IE 10+ */
    background: linear-gradient(to bottom,  #f4f4f4 0%,#d2d2d2 100%); /* The W3C Standard */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d2d2d2',GradientType=0 ); /* IE 6-9 */
}

.dblue-fade {
    background: #0067c8;
    background: -moz-linear-gradient(top,  #0067c8 0%, #00396d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0067c8), color-stop(100%,#00396d));
    background: -webkit-linear-gradient(top,  #0067c8 0%,#00396d 100%);
    background: -o-linear-gradient(top,  #0067c8 0%,#00396d 100%);
    background: -ms-linear-gradient(top,  #0067c8 0%,#00396d 100%);
    background: linear-gradient(to bottom,  #0067c8 0%,#00396d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0067c8', endColorstr='#00396d',GradientType=0 );
}

#page, .rounded-corners {
    -webkit-border-radius: 11px;
    border-radius: 11px;
}

#page, #footer, #copyright-notice, .drop-shadow {
    -webkit-box-shadow: 1px 1px 10px 0 #000000;
    box-shadow: 1px 1px 10px 0 #000000;
}

.bluebox, .blue-fade, .dblue-fade, .rounded-corners-small {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bluebox {
    width: 94px; /* 104 - 10px */
    height: 96px; /* 106 - 10px */
    margin: 3px;
    padding: 5px; /* Adds 10px inside box */
    display: block;
    float: left;
    font: bold 13px 'Arial', sans-serif;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
}

.bluebox a:link {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.bluebox a:visited {
    color: #fff;
    text-decoration: none;
}

.bluebox a:hover {
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000;
}

.bluebox-element {
    border:0;
    margin-left: auto;
    margin-right: auto;
}

.breadcrumb {
    font-size: 0.9em;
}

code {
    font-variant: none;
    font-weight: normal;
    font-family: monospace;
    font-size: 9pt;
    background-color: #ddd;
    border: 1px solid #aaa;
    margin:0;
    padding: 2px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

code:before {
    content: ".";
}