/*  General STyle
===============================*/
html {
-moz-text-size-adjust: none;
 -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  	text-size-adjust: none;

}


a:link {
color:#009;
font-weight:bold;
text-decoration:none;
}

a:hover {
	COLOR: #990000;
	TEXT-DECORATION: underline;
}

a:visited {
	COLOR: #990000;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
margin:0px;
padding:0px;
}

h1 {
font-size:120%;
font-weight:700;
padding-top:10px;
margin-left:10px;
color:#333;
border-bottom-width:thin;
border-bottom-style:solid;
border-bottom-color:#999;
padding-bottom:7px;
}

h2 {
font-weight:700;
font-size:120%;
color:#333;
background-image:url(/images/torch.gif);
background-repeat:no-repeat;
margin:10px 0 0 10px;
padding:6px 5px 6px 30px;
}

h3 {
font-size:90%;
margin:5px;
padding:6px 5px 6px 10px;
}

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:135%;
padding-left:15px;
padding-right:10px;
margin-top:10px;
margin-bottom:10px;
}

ul {
padding-top:0;
padding-bottom:3px;
padding-left:15px;
margin:0 5px 5px 15px;
}

li {
line-height:130%;
padding:5px 10px 5px 2px;
}

iframe, object, embed {
        max-width: 100%;
}


/*  NAVIGTION BAR
===============================*/

#navigationbar {
font-size:90%;
background-image:url(/images/navigation-bar-back.gif);
background-repeat:repeat-x;
background-position:center;
padding-bottom:2px;
line-height:220%;
padding-left:20px;
margin-left: -4px;
}

.navhome a {
color:#FFF;
background-color:#AC5151;
border: 1px solid #AC5151;
padding:4px 9px;
}

.navhome a:hover, .navhomeactive a {
color:#009;
background-color:#FFF;
border:1px solid #999;
padding:4px 9px;

}

.navtutorials a {
color:#FFF;
background-color:#508362;
border:1px solid #508362;
padding:4px 9px;
margin-left: -5px;
}

.navtutorials a:hover, .navtutorialsactive a {
color:#009;
background-color:#FFF;
border:1px solid #999;
padding:4px 9px;
margin-left: -5px;
}

.navforum a{
color:#FFF;
background-color:#626B9B;
border:1px solid #626B9B;
padding:4px 9px;
margin-left: -5px;
}


.navforum a:hover {
color:#009;
background-color:#FFF;
border:1px solid #999;
padding:4px 9px;
margin-left: -5px;
}


.navshop {
margin-left: -4px;
}
.navshop img {
/* sets image level*/
margin:0 0 -6px;
}

.navshop a {
background-color:#FFF;
border:1px solid #999;
padding:4px;
}

.navshop a:hover {
background-color:#FFF;
border:1px solid red;
padding:4px;
}

.whitebackground {
background-color:#FFF;
padding-right:2px;
}




/* CONTENT
===============================*/

#pagecontent {
background-color:#FFF;
border-left-width:1px;
border-left-style:none;
border-left-color:#E1E1E1;
margin:0 0 0 200px;
padding:0 0 0 5px;
clear:both;
}



#footer {

border-top-width:2px;
border-top-style:solid;
border-top-color:#636D9D;
margin:10px 15px 40px 0px;
padding:6px 5px 6px 0;
clear:both;
}

.footernav {
background-color:#FFF;
text-align:center;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
padding:10px 10px 10px 20px;
}



#breadcrumbs {
padding-top:10px;
padding-right:10px;
padding-left:10px;
font-size:80%;
margin-left:10px;
}

.red {
color:red;
}

.purplebox {
background-color:#CDF;
width:300px;
border:1px solid #999;
}

.footerleft {
text-align:left;
display:block;
float:left;
clear:left;
}

.footerright {
text-align:right;
display:block;
float:right;
margin-right: 20px;
}

.clearfloats {
font-size:1px;
line-height:1px;
height:1px;
clear:both;
}

.searchbox {
position:absolute;
right:15px;
top:75px;
margin-right:0;
padding-left:2px;
padding-right:1px;
}

.inlinetable {
margin-left:10px;
}

.supplimentary {
padding-top:15px;
padding-bottom:15px;
border-top-style:solid;
border-bottom-style:solid;
margin-top:20px;
margin-bottom:20px;
padding-left:20px;
border-color:#666;
border-width:thin;
clear:both;
}

.donate {
position:absolute;
top:25px;
right:20px;
}

#eucookies {
   position:fixed;
   left:0px;
   bottom:0px;
   height:20px;
   width:100%;
   background:#ccc;
}
#eucookies-tablet{
display:none;
   position:fixed;
   left:0px;
   bottom:0px;
   height:20px;
   width:100%;
   background:#ccc;
}



/*  SIDE NAVIGATION
===============================*/
#navigation {
width:180px;
position:absolute;
left:15px;
top:120px;
z-index:2;
border:1px solid;
border-color: #AAAAAA;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
       -o-border-radius: 10px;
          border-radius: 10px;


}



.navbody {
background:#F5F5F5;
border-top:1px #999;
border-right:0px;
border-bottom:1px #999;
border-left:0px;
border-color: #AAAAAA;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
       -o-border-radius: 10px;
          border-radius: 10px;


}

.nav_head {

color:#009;
cursor:pointer;
border-left:0px ;
border-top:0px;
border-bottom:1px solid #999;
border-left:0px ;

}

.nav_head a {
color:#009;
text-decoration:none;
display:block;
height:100%;
padding:11px 5px 9px;
}

.nav_head a:hover {
color:#FFF;
background:#383854;
}

.navspacer {
background-color:#545C83;
margin-right:1px;
margin-left:1px;
margin-top:2px;
}

.nav {
background: #fff ;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#545C83;
border-right-width:2px;
border-left-width:2px;
border-right-style:solid;
border-left-style:solid;
border-right-color:#545C83;
border-left-color:#545C83;
margin:0 1px;
padding:2px 0 5px;
}

.nav p {
z-index:10;
line-height:115%;
margin:0;
padding:0;
}

.nav a {
color:#009;
text-decoration:none;
display:block;
font-weight:400;
margin:0;
padding:6px 16px 6px 8px;
}

.navactive {
background-image:url(images/arrow.gif);
background-repeat:no-repeat;
background-position:right center;
}

.header_highlight {
background:#6D77A3;
}

.header_highlight a {
color:#FFF;
text-decoration:none;
padding:11px 17px 9px 5px;
}

.header_highlight_active {
background:#6D77A3;
background-image:url(images/arrow-highlight.gif);
background-repeat:no-repeat;
background-position:right center;
}

.header_highlight_active a {
font-weight:700;
color:#FFF;
padding:11px 17px 9px 5px;
}

.navfoot {
z-index:5;

}

.categoryheading {
z-index:5;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#999;
height:34px;
margin:0;
padding:0;

}

.categoryheading a {
display:block;
padding:9px 10px;
}

.categoryheading a:hover {
color:#FFF;
background:#383854;
text-decoration:none;
}

.categoryheading_active {


z-index:5;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#999;
height:34px;

}

.categoryheading_active a {
display:block;
padding:9px 10px;
}

.categoryheading_active a:hover {
background:#383854;
color:#FFF;
}

.a400,#footer a,#breadcrumbs a {
font-weight:400;
}

a:hover,.nav a:hover {
color:#900;
text-decoration:underline;
}



/*  Structural stuff
===============================*/
#mainbody {
background-color:#FFF;
padding-bottom:20px;
border-style:none;
clear:both;
}


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

video {
	
	height: auto;
	border:none;
	max-width: 100%
}

.lhtext {
  float: left;
  width: 52%;
}


.rhimage {
padding-top: 15px;
  float: left;
   width: 45%; 
   min-width: 150px;
}

.lhimage {
  float: left;
  width: 300px;
}


.rhtext {
  float: left;
   width: 45%; 


}



.lhtextwide {
  float: left;
  width: 70%;
}


.rhimagesmall {
padding-top: 15px;
  float: left;
   width: 30%; 
   min-width: 80px;
}

.lhtextindex {
  float: left;
  width: 52%;
}


.rhimageindex {
padding-top: 15px;
  float: left;
   width: 45%; 
   
}



.fullwidth {
display:block;
clear: both;
width: calc(55% + 350px);
max-width: 100%;

}

.boxclear {
padding-top: 5px;
padding-bottom: 5px;
display: block;
clear: both;
overflow: auto;
}

#indexleft {
width: 66%;
  float: left;
}
#indexright {
width: 33%;
float: left;
}

.indexdivider {
  float: left;
  width: 60%;
}
.indexdividerright {
  float: left;
  width: 40%;
}

.indexdivider drop {
  float: left;
  min-width: 120px;
}

.halfpage {
  float: left;
  width: 50%;
}

/*  MEDIA 
===============================*/



/* Media 750px to 650px
===============================*/


@media (max-width: 720px) {

.searchbox {
top:15px;
}
input[name="sa"] {
position:absolute;
right: 0px;
top:23px;
}

#eucookies {
display:none;
}

#eucookies-tablet{
display:block;

}



}


/* Media 650px to 450px
===============================*/


@media (max-width: 650px) {

h2 {
font-size:120%;
}


#pagecontent {
border-left-width:0px;
margin:0px;
}

#navigation {
position:relative;
top:0px;
left:0px;
width:280px;
  margin-left: auto;
  margin-right: auto;
}

#navigationbar {
padding-left:5px;
}

#indexleft {
width: 55%;
  float: left;
}
#indexright {
width: 45%;
float: left;
}







.indexdivider {
width:100%;
}

.indexdividerright {
display:none;
}
.halfpage {
  width: 100%;
}

.rhtext {
  width: 100%;


}







}

/* Media max 480px
===============================*/
@media (max-width: 480px) {
.searchbox {
display:none;
}



#navigation {
position:relative;
top:0px;
left:0px;
width:280px;
  margin-left: auto;
  margin-right: auto;
}


.lhtext, .rhtext, .lhimage, #indexleft, #indexright {
  width: 100%;
}

#indexright {
margin-top: 10px;
}



.rhimage {
padding-top: 10px;
padding-right: 0px;
margin-left: 0px;
float: left;
width: 100%; 

}



.indexdividerright {
  float: left;
  width: 40%;
}




}



/*  Media under 420px
===============================*/

@media (max-width: 420px) {




#footer {
margin-left: 10px;
}


#mainbody {
margin:0px;
}

#pagecontent {
border-left-width:0px;
margin:15px;
}

.navhome a,
.navhomeactive a,
.navtutorials a,
.navtutorialsactive a,
.navforum a,
.navshop a,
.navshop a:hover, 
.navtutorialtext {
padding:5px 4px;
}

.navhome a:hover,
.navtutorials a:hover,
.navforum a:hover
{
padding:5px 4px;
}
.navhome a {
padding:5px 3px;
}
.navhome a:hover {
padding:5px 3px;
}



.navshop a,
.navshop a:hover {
padding:4px 1px;
}


navtutorialtext {
display:none;
}
.navshop img {
max-width: 75px;
}



}