/* andreas06 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work.
   Version: 1.1, November 28, 2005
   updated to CSS 3, HTML 5, design and content change, D. Gougler; April / May 2018 */

body{
background:#b8b8b8 url(img/bodybg2.gif) repeat-x;
color:#505050;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

p{
line-height:1.5em;
margin:0 0 15px;
}

a{
color:#1d295c;
font-weight:700;
text-decoration:none;
}

a:hover{
color:#1b5cb2;
}

hr{
height:1px;
margin:10px 0;
width:98%;
}

dt{
font-weight:700;
}

dd{
margin:1px 0 12px 15px;
}

#container{

margin:0 auto;
background:url(img/banner2.jpg) top center no-repeat;
text-align:left;
width:752px; 

}

#sitename{

color:#ffffff;
font-weight:400;
height:137px;
text-align:center;
}

/*
#sitename h1{
font-size:1em;
padding-top:110px;
margin-left:-120px;
margin-bottom:0px;
}


#sitename span{


}*/

#nav{
background:url(img/greypx.gif) bottom left repeat-x;
float:left;

width:752px;
}

#nav ul{
list-style:none;
margin:0;
padding:0;
}

#nav a{
background:url(img/tabs2.gif) no-repeat 100% 0;
color:#bdbcbc;
display:block;
font-size:1.2em;
letter-spacing:-1px;
padding:7px 17px 4px 7px;
text-decoration:none;
}

#nav a:hover{
color:#ffffff;
}

#nav li{
background:url(img/tabs2.gif) no-repeat 0 0;
float:left;
margin:0 4px 0 0;
padding:0 0 0 5px;
}

#nav #current{
background:url(img/tabs2.gif) no-repeat 0 -41px;
}

#nav #current a{
background:url(img/tabs2.gif) no-repeat 100% -41px;
color:#303030;
padding:7px 17px 5px 7px;
}

#wrap1{
background:#ffffff url(img/innerbg2.gif) repeat-y;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080;
clear:both;
padding:0 0 10px;
width:750px;
}

#topbox{
color:#808080;
margin:0 0 4px;
text-align:right;
}

#topbox a{
color:#1b5cb2;
}

#topbox a:hover{
text-decoration:underline;
}

#wrap2{
background:url(img/world-1c_16op.png) top repeat-y;
/*padding:10px;
width:730px; */
width: 100%;
}

/* start the flex CSSS */

#leftside {
    background-color: rgba(11,111,211, 0.1);
    padding: 10px;
    ;
}
#leftside h1{
font-size:1.4em;
font-weight:400;
}

#rightside {
    background-color: rgba(11,220,100,0.1);
    padding: 10px;
}
#rightside h1{
font-size:1.4em;
font-weight:400;
margin:0 0 12px;
}
#rightside p{
font-size:0.9em;
margin:2px 0 12px 10px;
}
#rightside img{
border:1px solid #1d295c;
margin:10px 0 5px 5px;
padding:2px;
}
#rightside span{font-weight:bold;}

#content {
    background-color: rgba(210,210,40,.2);  /*220,220,230*/
    padding: 10px;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 150%;
    font-weight: 400;
}
#contentalt{
margin:45px 15px 0 180px;
}
#content p,#contentalt p{
margin:8px 0 0px 10px;
}
#content h1,#contentalt h1{
color:#505050;
font-size:2em;
font-weight:400;
margin:15px 0 10px;
padding:0;
}
#content h2,#contentalt h2{
color:#505050;
font-size:1.5em;
font-weight:400;
margin:20px 0 10px;
padding:0;
}
#content img,#contentalt img{
border:1px solid #1d295c;
float: left;
margin:5px 15px 6px 0px;
}

/* for the animation to work in all 3 break points, these also need to go inside responsive break points */ 
#dog{
    margin-top: -158px;
    /*opacity: 1;*/
}

#dogtail {
    margin-top:105px;
    margin-left: 40px;
}

@media screen and (min-width: 768px) {     /* less than 769, stack as 1 column *; 768 break to 2 column */
    
    #wrap2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }
    
    #leftside {
    flex-basis: 50%;
    box-sizing: border-box;
    }

    #rightside{
    flex-basis: 100%;
    box-sizing: border-box;
    }

    #content{
    /*margin:45px 160px 0 180px; */
    flex-basis: 50%;
    box-sizing: border-box;
    }
    
#dog{
    margin-top: -75px;
    /*opacity: 1;*/
}

#dogtail {
    margin-top:65px;
    margin-left: 40px;
}

} /* media 768 break to 2 columns */

@media screen and (min-width: 992px) {   /* break to 3 column */ 

    #wrap2 {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    }

    #leftside{
    flex-basis: 25%;
    }

    #rightside{
    /*float:right;
    margin:40px 15px 20px 0;
    width:130px;*/
    flex-basis: 20%;
    }

    #content{
    /*margin:45px 160px 0 180px; */
    flex-basis: 55%;
    }
    
    
#dog{
    margin-top: -32px;
}

#dogtail {
    margin-top:65px;
    margin-left: 40px;
}

} /* media 992 break to 3 columns */

#footer{
clear:both;
color:#a0a0a0;
font-size:0.8em;
height:39px;
margin-top:20px;
padding:1px;
text-align:right;
width:730px;
}

#footer a{
color:#a0a0a0;
font-weight:400;

}

#footer a:hover{
color:#a0a0a0;
text-decoration:underline;
}

.clearfloats {clear:both;}


.menublock{
margin-bottom:10px;
}

.nav{
color:#1d295c;
display:block;
font-size:1.1em;
font-weight:700;
margin-bottom:1px;
padding:2px 2px 2px 10px;
position:relative;
text-decoration:none;
width:125px;
}

.nav:hover{
border:1px solid #505050;
color:#505050;
padding:1px 1px 1px 9px;
}

.sub{
font-size:0.9em;
margin-left:20px;
padding:1px 1px 1px 6px;
width:105px;
}

.sub:hover{
border:1px solid #505050; 
color:#505050;
padding:0 0 0 5px;
}

.intro{
font-weight:700;
}

.active{
border:1px solid #fa9035;
padding:1px 1px 1px 9px;
}

.box{
background:#f8f8f8 url(img/boxbg.gif) top left repeat-y;
border:1px solid #d0d4d4;
color:#505050;
margin:15px auto;
padding:10px 10px 10px 20px;
width:75%;
}

.photo{
margin:5px auto 15px;
padding:5px;
}

.smallcaps{
font-variant:small-caps;
}

.small{
font-size:0.85em;
}

.large{
font-size:1.4em;
}

.soft{
color:#808080;
}


.sharp{
color:#101010;
}

.center{
text-align:center;
}

.hide{
display:none;
}

.bold {font-weight:bold}

#jakebruno, #jake, #bruno, #tux, #dog{
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 160%;
    font-weight: 600;    
}

#dog {
    font-style: italic;
}

#jake {
    margin-left: -1px;
}

#tux {
    padding-left: 15px;
    padding-top: 12px;
    margin-left: -2px;
    text-align:center;
}

#bruno {
    margin-right: -5px;
    padding-top: 20px;
}

img {
    max-width: 100%;
    height: auto;
   
}

#w3c {
    margin-top: 12px;
    margin-left: 18px;
    margin-bottom: -35px;
}

#tablecap2 {
    font-variant: small-caps;
    font-size: 1.2em;
    font-weight: bolder;
    text-decoration: none;
    line-height: .5
}

tfoot {
    font-size: small;
    font-style: italic;
    line-height: 70%;
    text-align: center;
}

tfoot a {
    text-decoration: underline;
}

.col1 { text-align: left;}

td, th {
    border: 1px solid black;
    font-size: smaller;
    padding: 5px;
 
    text-align: center;
}
            
table {
    border: 2px dashed black;
    padding:6px; 
    caption-side: top;
    border-spacing: 0px;
}
           
tr:nth-child(odd) {background-color: rgba(0,80,0,.2);
}
            
th, tfoot {background-color: rgba(0,0,210,.2);
}

td {
    font-size:85%;
    color: black;
}

form {
    padding-bottom: 15px;
    padding-right: 10px;
    margin-top:10px;
    display: inline-block;
    color: black;
    border: solid black 1px;
    background-color: rgba(246,246,212,.9);
}
#form p {
    margin-bottom: -8px;
}
#checkbox {
    margin-left: 30px;
}

@keyframes wagtail {
    0% {
            opacity: 0;
        }
    50% {
            opacity: 1;
    
        }
    100% {
        opacity: 0;
    }
}

#animatedog {
    animation: wagtail 900ms;
    animation-iteration-count: infinite;
}