/* @Fonts *********/
/* Regular */
@font-face {
  font-family: "Open Sans";
  src: url("/css/OpenSans-Regular-webfont.eot");
  src: url("/css/OpenSans-Regular-webfont.woff");
  src: url("/css/OpenSans-Regular-webfont.ttf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("/css/OpenSans-Semibold-webfont.eot");
  src: url("/css/OpenSans-Semibold-webfont.woff");
  src: url("/css/OpenSans-Semibold-webfont.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Open Sans";
  src: url("/css/OpenSans-Bold-webfont.eot");
  src: url("/css/OpenSans-Bold-webfont.woff");
  src: url("/css/OpenSans-Bold-webfont.ttf");
  font-weight: bold;
  font-style: normal;
}

body {
margin: 0;
padding: 0;
color: #111;
font-size: 1.1em;
font-family: "Open Sans", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Calibri, sans-serif;

}

* html {
margin: 0;
padding: 0;

}

.small {
font-size: 0.7em;

}

/* @Headings ***/
h1, h2, h3, h4, h5, h6 {
	 font-family:  "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Calibri, sans-serif, "Open Sans Light";
	color: #222;
	
}

h1 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
position: relative;
z-index: 100;
font: 1.3em "Open Sans", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Calibri, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: left;
  
}

h1 span {
display: block;

}

h1 span.small {
margin-left: 2px;
padding-top: 6px;

}

h2 {
font-size: 1.2em;
line-height: 1.3em;
  font-weight: 600;
  
}

img + h2 {
margin: 50px auto;
max-width: 100%;

}

h3 {
font-size: 1.1em;
line-height: 1.3em;
  font-weight: 600;
  
}

h4 {
	font-size: 1em;
  font-weight: 600;
  
}

#header {
width: 100%;
background-image:  linear-gradient(rgba(0, 150, 222, 1), rgba(0, 79, 146, 1) 90%);
background-color: rgba(0, 103, 172, 1);
box-shadow: 0px 4px 20px 0px rgba(0, 50, 92, 1), inset 0px -2px 0px 0px rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(0, 43, 142, 1);

}

#top1 {
margin: 0px 0px 0px 34px;
padding: 0px;
z-index: 2;
float: left;
width: 100%;
max-width: 700px;
font-size: 2em;

}

#top1 a {
color: #fff;
letter-spacing: 1px;

}

#top1 a > img {
max-width: 60px;

}

#top1 a:hover {
	color: #fff;
	text-decoration: none;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);

}

#top-bar {
width:100%;
height: 60px;
margin: 0;

}

* html .top-bar-content {
height: 60px;

}

.top-bar-content {
height: 60px;
clear: both;
line-height: 50px;
font-size: 0.9em;

}

#top2 {
	width: 100%;
	max-width: 110px;

}

html {
  background:#F9F9F9;
  
}

#content {
  background-color: #F9F9F9;
margin: 0px auto;
	width: 100%;
	max-width: 80%;
position: relative;
padding: 0px 10px 10px 10px;
font-family: "Open Sans", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Calibri, sans-serif;
background-color: transparent;
line-height: 1.27em;

}

#FxMain {
			width: 100%; 
	max-width: 300px;
	margin-top: -30px;
	border: 2px solid #FFFFFF; 
	box-shadow: 0px 4px 10px 1px #1E528C; 

}

.pageIMG {
	width: 100%; 
	max-width: 300px;
	
}

.H2img {
	vertical-align: middle;
width: 80px;
 padding-right: 14px;
	
}

#content p,
#content ul {
clear: both;

}

#skip {
margin: 30px 44px 0px 0px;
position: relative;
float: right;

}

#DDGs{
	font-size: 0.9em;
	margin-top: -30px;

}

/* @Links ***/
a:link,
a:visited {
  color: rgb(0, 70, 225);
  text-decoration: none;
  
}

a:hover,
a:focus,
a:active {
  color: rgb(0, 0, 221);
  text-decoration: underline;
  
}

a:link:active, a:link:visited:active  {
color: #FF0000;
text-decoration: underline;

}

.left {
float: left;
margin: 10px;

}

.right {
float: right;
margin: 10px;

}

hr {
border-top: 1px dotted #001849;
border-right: 1px dotted #001849;
border-bottom: 1px dotted #001849;
border-left: 1px dotted #001849;
clear: both;
opacity: 0.2;

}

br {
clear: both;

}

img {
border: 0;

}

.clear {
clear: both;

}

#author_h1 {
width: 210px;
height: 36px;
margin-top: -5px;
padding:  0px 5px 12px 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

#author_h1 img{
vertical-align: middle; 
padding-right: 5px

}

#footer {
	margin: 0px auto;
	width: 100%;
	max-width: 80%;
position: relative;
padding: 0px 10px 0px 10px;
border-top: 1px solid #ccc;
background-color: transparent;
line-height: 23px;

}

.left_f {
width: 325px;
float: left;
margin-left: 35px;
text-align: left;

}

.right_f {
width: 275px;
float: right;
margin-left: 10px;
margin-right: -8px;
text-align: left;

}

ul.circle {
list-style-type: circle

}

#footer hr {
clear: both;
border-top: 1px solid #4b5c7e;
border-right: 0px dotted #4b5c7e;
border-bottom: 0px dotted #4b5c7e;
border-left: 0px dotted #4b5c7e;

}

.center {
text-align: center;
margin: 0 auto;

}

#bigbuttons {
margin-left: 0px;
padding-left: 0px;

}

#bigbuttons  ul{
margin-left: 0px;
padding-left: 0px;

}

#bigbuttons li {
padding: 0px 2px 0px 2px;
list-style: none;
display: inline;

}

@media print {
* {
background-image: none ;

}

#wrapper {
padding: 0 ;
margin: 0  ;

}


#footer {
padding: 0 ;
margin: 0  ;

}
}

/*  @Tablet @Layout: 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

body {
color: #000;

}

#header {
height: 100px;
width: 100%;

}
}


/*  @Mobile @Layout: 320px */
@media only screen and (max-width: 767px) {

body {
background: #fff;
color: #000;
font-size: 1.2em;
  
}

#header {
height: 100px;
width: 100%;

}

#content {
	width: 100%;
	max-width: 90%;
padding: 20px 0px 2px 0px;

}

.pageIMG {
	width: 100%; 
	max-width: 300px;
	
}

	#logo {
margin: 4px 0px 0px 20px;
padding: 0px;

}

	#logo img{
margin: 10px 0px 0px -60px;
max-width: 64px;
}

#top1 {
	width: 100%;
max-width: 300px;
font-size: 1.6em;

}

.H2img {
	max-width: 96px ;
 padding-right: 8px;
float: left;
}

#content H2  {
clear: both;
font-size: 1.2em;

}

#content H3 img  {
	max-width: 64px ;
 padding-right: 8px;
float: left;

}

#content H3  {
clear: both;
font-size: 1em;

}
}

/*  @Wide @Mobile @Layout: 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

body {
background: #fff;
color: #000;

}

#header {
height: 100px;
width: 100%;

}
}