@import url('reset.css');

body {
    font-family:Droid Sans, Helvetica, sans-serif; font-size:10px;
    background-color:#ffffdd;
    min-height:800px; width:100%; padding-top:1em;
    background:-moz-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc;
    background:-webkit-radial-gradient(50% 30% , circle , #fffff9, #ffffcc) no-repeat scroll 0 0 #ffffcc;
}
a {color:#d00e0e; text-decoration:none;}
    a:hover {color:#f00e0e;}

div.hide {display:none;}

div#branding {width:80%; margin:1em auto; position:relative;}
    div#branding .title {
        font-family:"URW Gothic L", "Century Gothic", sans-serif; text-transform:uppercase; font-size:3.5em; 
        font-weight:bold; text-shadow:1px 1px 1px rgba(0,0,0,.2); color:#333333;
        position:absolute; top:0; right:0; line-height:41px; vertical-align:middle;
    }

div.navigation {position:relative;}
    ul.languages {margin: 0 2px !important;}
    ul.languages li {display:inline-block; *display:inline; *zoom:1; margin: 0 -2px !important;}

/* Dropdown menu CSS */

menu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: "URW Gothic L", "Century Gothic", sans-serif;
  font-size: 11pt;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(100,20,20,.2);
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
  padding: 0 10%;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li.right {
  position: absolute;
  right: 10%;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 9pt;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

/* End of dropdown menu CSS */

div#content {display:block;}
    /**
     * The .main class is for content wrapper on the home page (with the big banner)
     */
div#content .main {
    background:url('../images/dots.png') 0 10% no-repeat rgba(171, 204, 113, 0.6); background-size:100% auto; width:auto; padding:4em 35% 4em 10%; position:relative;
    margin:0 auto; text-shadow:1px 1px 1px rgba(255,255,255,.5); font-size:1.6em; line-height:1.5em;
    border:2px solid #abcc71; border-left:none; border-right:none;  box-shadow:0px 2px 8px rgba(0,0,0,.2)}
    div#content .main h1 {font-family:"URW Gothic L", "Century Gothic", sans-serif; font-size:2.5em; 
    text-shadow:1px 1px 2px rgba(0,0,0,.3); color:white; margin-bottom:.5em;}
    .main .get-i2p {
        position:absolute; display:block; top:50%; right: 10%;
        margin-top:-1em; height:1em; padding:.5em; line-height:1em;
        font-size:2em; color:white; font-family:Arial, Helvetica, sans-serif; font-weight:bold; 
        text-transform:uppercase; text-decoration:none; text-align:center; 
        background:green; border-radius:.3em; -moz-transform:rotate(-5deg); 
        text-shadow:1px 1px 1px rgba(0,0,0,.2);
        box-shadow:2px 2px 4px rgba(0, 0, 0, 0.3), 1em 3em 2em 0.5em rgba(255, 255, 255, 0.3) inset, inset -.2em -.5em 1em -0em rgba(0,0,0,.3)}
    .main .get-i2p:hover {box-shadow:2px 2px 2px rgba(0, 0, 0, 0.3), inset 0 -2.2em 2.2em rgba(255, 255, 255, 0.3), inset .2em .5em 1em 0em rgba(0,0,0,.3);}
    div#content .aside-wrap {width:80%; margin:2em auto;}
    div#content .aside {position:relative; width:30.9%; margin-left:3%;    display:inline-block; vertical-align:top; font-size:1.2em}
        div#content .aside:first-child {margin-left:0%;}
        div#content .aside a {font-weight:bold;}
        div#content .aside h1 {padding:1em 0; border-bottom:1px solid rgba(171, 204, 113, 0.6); font-size:1.4em; color:#222200; text-shadow:1px 1px 1px rgba(0,0,0,.3)}
        div#content .aside p {margin:1em 0;}
            div#content .aside ul {margin:1em 0;}
                div#content .aside ul li {list-style-type:none; margin:1em 0; line-height:1.3em;}

    /**
     * The .inner class is for the content wrapper on inner pages (as opposed to the home page)
     */
    div#content .inner {
        width:auto; padding: 4em 10%; position:relative;
        background: rgba(171, 204, 113, 0.6); border-top:2px solid #abcc71;
        color:black; font-size:1.2em; line-height:1.4em;
    }
    div#content .inner h1, div#content .inner h2, div#content .inner h3 {color:white; text-shadow:1px 1px 1px rgba(0,0,0,.3); margin:1em 0 .5em; border-bottom:1px solid white; padding-bottom:.2em;}
    div#content .inner h1 {font-size:2.2em; margin:0em 0 1em;  width:auto;}
    div#content .inner h2 {font-size:1.6em;}
    div#content .inner h3 {font-size:1.4em;}
    div#content .inner ul {margin:1.5em; 1em;}
    div#content .inner p {margin:1em 0;}

div#footer {width:auto; border-top:3px solid #883333; background:#552222; box-shadow:0px -4px 8px rgba(0,0,0,.3); padding:1em 10%; background:-moz-linear-gradient(#883333, #772222);}
    div#footer .aside {display:inline-block; width:15%; margin-left:1%; vertical-align:top;}
        div#footer .aside.first {margin-left:0;}
        div#footer .aside.third, div#footer .aside.fifth {margin-left:2.5%}
        div#footer .aside h1 {color:#ffdd88; font-size:1.2em; text-shadow:-1px -1px 1px rgba(0,0,0,.2); border-bottom:1px solid #ccaa66; margin:1em 0; line-height:1.3em;}
        div#footer .aside ul {margin:0; padding:0;}
        div#footer .aside ul li {list-style-type:none; line-height:1.5em;}
        div#footer .aside ul li a {color:#ccaa66; font-weight:bold;}
        div#footer .aside ul li a:hover {text-decoration:underline;}
        div#footer a.button {padding:.5em 2em; background-color:#cc2222; border:1px solid #bb2222; border-radius:3px; display:inline-block; color:white; margin:1em auto; text-align:center; width:auto; font-weight:bold;}