/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 0.833em;
    line-height: 1.1;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
    font: 13.5px/18px Helvetica, Helvetica Neue, Arial;
 background: silver;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}

/* ===================
    ALL: Orange Theme
   =================== */

.header-container {
    border-bottom: 20px solid midnightblue;
/*
background: #ff0000;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmNzU3NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ff0000 0%, #ff7575 50%, #ff0000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(50%,#ff7575), color-stop(100%,#ff0000));
background: -webkit-linear-gradient(top, #ff0000 0%,#ff7575 50%,#ff0000 100%);
background: -o-linear-gradient(top, #ff0000 0%,#ff7575 50%,#ff0000 100%);
background: -ms-linear-gradient(top, #ff0000 0%,#ff7575 50%,#ff0000 100%);
background: linear-gradient(to bottom, #ff0000 0%,#ff7575 50%,#ff0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ff0000',GradientType=0 );
background: url(pattern13.png);
*/
}

.main aside { display: block; margin-top: 16px; }
.footer-container,
.main aside #access {
    border-top: 20px solid black; margin-top: 16px;
opacity: 1; z-index:9;
display: block;
}
.main { display: block; }

.header-container,
.footer-container {
 color: white;
    background: black;
}
.main aside #access {
    background: midnightblue; color: white;
 min-height: 60px;
min-width: 180px;
}
/*
.main aside a, .main aside a:visited { color: white; }
*/

.title {
    color: white;
 font-size: 1em;
 position: absolute; z-index: 1;
width: 100%; height: 32px; 
left: 0; top: -12px;
background:black;
}
nav { padding-top: 28px; }
.title a, .title a:visited { /*/*/
 color: white; text-decoration: none;
}

a { color: blue; font-weight: bold; }

.panel {
 background: white; box-shadow: 0 5px 10px gray; box-sizing: border-box; padding: 0 1% 1%;
 overflow: hidden;
}
.panel h1, .panel h2, .panel h3 { margin: 0 -11%; padding: 2px 9%; background: midnightblue; color: white; }

/* ==============
    MOBILE: Menu
   ============== */

/* === sub menus == */
nav ul, nav li, nav a, nav span { margin: 0; padding: 0; }
nav ul ul li, nav ul li ul li a { margin:0; padding: 0!important; box-sizing: border-box; line-height: 1em; }
nav ul li ul { display: none; position: absolute; top: 54px; left: 12px; border: 1px solid black; outline: 3px outset lime; }
nav li ul li { width:100%; text-indent:10px; line-height:30px; }
nav li:hover > ul { display:block; position:absolute; z-index:1000; }
nav li:hover { position:relative; z-index:2000; }
nav > ul li ul li a { display: block; float: none; padding: 12px 24px!important; }  /* TODO: link design */


/*
#navx, .nav, #navx .nav li, .nav li a { margin:0px; padding:0px; }
#navx li ul.first {left:-1px; top:-20%;}
ul.nav { display:none; }
#navx li ul li a { display:block; width:inherit; height:inherit; }
#navx li:hover > a, #navx li:hover { color:#fff; background:#000; }
*/

nav li ul li {
 display:inline;
 cursor:pointer; list-style:none;
 padding:0 12px;
 float:left;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav a, nav span {
    display: block;
    padding: 15px 0;
    margin-bottom: 10px;

    text-align: center;
    text-decoration: none;
    font-weight: bold;

    color: white;
}
nav a, .title a {
/*
 background-color: #1e5799;
*/
}
nav span { color: silver; background: midnightblue; }

nav a:hover,
nav a:visited {
    color: white;
}

nav a:hover, .title a:hover {
 /*   text-decoration: underline; */
 background-color: blue;
}

/* ==============
    MOBILE: Main
   ============== */

.main {
    padding: 36px 0;
 box-shadow: 0 5px 3px 1px gray inset; background: rgba( 255,255,255,0.75); /*/*/
}

.main article { padding: 0 2%; box-sizing: border-box; }


.main article h1 {
    /*
 font-size: 2.5em;
    */
}

.main aside {
    padding: 0px 2% 10px;
}

/*
.footer-container footer {
    color: white;
}
*/

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title {
    padding-top: 20px;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

h1 { display: table-cell; padding-top: 18px; }

.replyform input { max-width: 180px; }
.replyform, .replyform textarea { max-width: 240px; }
aside textarea { width: 100%; }
aside input[type="text"] { float: right; max-width: 132px; }
aside select { float: right; max-width: 86%; }

#access { min-height: 64px; padding-right: 6px; max-width: 690px; }
#google_translate_element { float: right; max-width: 150px; overflow: hidden; text-align: right; }
.goog-te-gadget { white-space: normal!important; }
/*
footer a, footer a:visited { color: white; }
*/
#foot1, #foot2, #foot3 { clear: left; width: 100%; box-sizing: border-box; padding: 16px 1% 0; }
footer img { max-width: 100%; height: auto; }
#endfoot { clear: both; text-align: right; font-size: smaller; font-weight: bold; padding: 9px; margin: 0; }
input[type='text'], textarea { font-size: large; background: aliceblue; border: 1px solid black; border-radius: 3px;  }

#dropmenu { color: white; font-size: 24pt; position: absolute; right: 0; z-index: 99; padding: 12px 24px 16px; text-decoration: none; display: block; }
.dbar { clear: both; width: 24px; height: 3px; display: block; background: white; float: right; margin-top: 4px; }
nav { position: relative; margin-top: -180px; }

/*
#mainmenu, #mainmenu li { margin:0; padding:0; display:inline; font-size: small; }
#mainmenu li { margin-right: 16px; white-space:nowrap; }
*/

figure, figure img { max-width: 100%!important; height: auto; }
/* nivo */

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(/vixfn/nivo/themes/default/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}
.nivo-controlNav { display: none; }
.nivoSlider img { max-width: none; }

.vixgal { max-width: 100%; }
/* causes problems in Nivo / most browsers; a variant may still be needed though...
.vixgal { max-width: 100%!important; }
*/

/* old captioning */
.incap,.outcap{
 font-family: tahoma,arial,helvetica,helv,sans-serif,sans; font-size: 8pt;
 font-style: normal; font-weight: bold; text-decoration:none;
}
.incap{
 position:absolute; padding: 4px; color:white; background-color:black;
 filter:alpha(opacity=75); -moz-opacity:0.75; opacity: 0.75;
}
.outcap{ width:100%; padding:0; padding-bottom:3px; }
.mid p { text-align:center; }
.right p { text-align:right; }
.left p { text-align:left; }
.picdiv p { margin:0; }

button {
border: 2px outset tan;
border-radius: 6px;
padding: 2px 6px;
font-style: italic;
font-weight: bold;
background: #fefcea;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmNlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMWRhMzYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36));
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%);
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%);
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%);
background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 );
}

form p { clear: right; }

.main-container { min-height: 75%; }
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; }
.main-container { flex: auto; }
.header-container, .footer-container { flex: none; }
.main { min-height: 100%; }





.main article.fullwidth { width: 100%; }


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

.replyform input { max-width: none; }
.replyform, .replyform textarea { max-width: none; }

/* ====================
    INTERMEDIATE: Menu
   ==================== */

    nav a, nav span {
        float: left;
        width: 17%;
        margin: 0 1.7%;
        padding: 12px 2.5%;
        margin-bottom: 0;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

#foot1, #foot2 { width: 50%; clear: none; float: left; }
#access { min-height: 36px; }
#google_translate_element { max-width: 180px; }
#dropmenu { display: none; }
nav { padding-top: 0; margin-top: 0; }
.title { position: relative; width: auto; height: auto; font-size: 2em; } /* background: none; } */
.panel { float: left; width: 31.3%; margin: 0 1%; }

nav > ul { float: right; }
nav > ul li { position: relative; float: left; }
nav > ul > li > a, nav > ul > li > span { width: 90px; min-height: 78px; }
nav > ul li ul { position: absolute; top: 96px; left: 0; }
nav > ul li ul li a { width: 100%; }

nav li { margin-left: 2px; }
nav li ul li { margin-left:0; }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li {
        display: inline;
    }

    .oldie nav a, .oldie nav span {
        margin: 0 0.7%;
    }

}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

    .header-container {
        -webkit-box-shadow: 0 5px 10px #acc;
           -moz-box-shadow: 0 5px 10px #acc;
                box-shadow: 0 5px 10px #acc;
}
    .main aside #access {
        -webkit-box-shadow: 0 5px 10px #369;
           -moz-box-shadow: 0 5px 10px #369;
                box-shadow: 0 5px 10px #369;
 margin-bottom: 72px; 
    }

/* ============
    WIDE: Menu
   ============ */

    .title {
        float: left;
    }

    nav {
        float: right;
        width: 58%;
    }

/* ============
    WIDE: Main
   ============ */

    .main article {
        float: left;
        width: 67%;
    }

    .main aside {
        float: right;
        width: 25%;
    }
.main aside #access {
outline: 1px solid midnightblue;
    }
.addthis_toolbox { float: left; }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins */
        margin: 0 auto;
    }
#foot1, #foot2, #foot3 { width: 25%; clear: none; float: left; }
#foot3 { width: 50%; }
nav { font-size: 1em; }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }
/*
    a[href]:after {
        content: " (" attr(href) ")";
    }
*/
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p, b,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
max-width:60%;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
figure { max-width:38%!important; float:right; }
}

h1, h2, h3 { font-family:Impact,'Arial Black',Arial,sans-serif; line-height:100%; }
h1 { font-size:3em; }
h2 { font-size:2.5em; }
h3 { font-size:2em; }
h4 { font-size:1.5em; }
h5 { font-size:1em; }
h6 { font-size:0.8em; }

.dialog {
 min-width:200px; max-width:33%; margin:30vh auto 0;
 border: 16px solid navy; padding:12px;
 text-align:center;
 background:white;
}
.dialog h1 { display:block; }