@import url('webfonts/open-sans.css');

html, body  { 
	font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; 	
	font-size: 1em;
	line-height: 160%;
	color: #222;
	margin:0;
	padding:0;
	hyphens:auto;
}


p, h1, h2, h3, h4, h5, h6, ul {margin: 1px 0 8px 0; padding: 1px 0 0 0; }
table {border-collapse:collapse;}
td {vertical-align: top;}
area, usemap {border:0;}
a img {border:0;}
img {border:0;}

a { color: #c00; text-decoration: none; XXborder-bottom: 1px dotted #999; padding-bottom:1px; text-shadow: 0px 1px 3px #aaa; transition:0.5s all;} 
a:hover { color: #000000; text-shadow: 0px 4px 8px #666; transition:0.5s all;} 


h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 2.5em;
	color: #999;
	font-weight: normal;
	line-height: 120%;
	margin-top: 0px;
	XXclear:both;
}

h2 {
	font-size: 2em;
	line-height: 120%;
	color: #c00;	
	margin-top: 12px;
	margin-bottom: 4px;
	font-weight: normal;
}

h3 {
	font-size: 1.3em;
	color: #c00;
	margin-bottom: 2px;
	font-weight: 600;
	
}

h4 {
	font-size: 1.2em;
	color: #666;
	margin-bottom: 0;

}

h5 {
	font-size: 1em;
	color: #333333;
	font-weight: normal;
	line-height: 140%;
	margin-bottom: 0;
}

h6 {
	font-size: 0.9em;
	color: #333333;
	font-weight: normal;
	line-height: 140%;
	margin-bottom: 0;
}


p {
	XXline-height: 160%;	
	margin-top: 0;
}



hr{
	border:none;
	border-bottom:dotted #999 1px; height:1px;
	clear:both;
}


li {	
	XXmargin-bottom: 12px;
	line-height: 150%;		
} 

ul {	
	XXline-height: 180%;
	margin-top: 5px;
	margin-bottom: 15px;
	margin-left: 0.8em;
	padding-left: 1em;
	list-style-image:  url(img/li.gif);
	list-style-type: square	
}

ol {
	
	line-height: 150%;
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;		
}

blockquote, .sidebarbox { line-height:130%; font-size:0.95em; XXbackground-color:#eef;}
blockquote img , .sidebarbox img { margin: 0 0 0 0;}


.picfull {max-width:100%; height:auto;}
.pic2left {float:left; max-width:48%; margin: 3px 3% 2px 0; height:auto;}
.pic2right {float:right; max-width:48%; margin: 3px 0 2px 0.9%; height:auto;}

.pic3left {float:left; max-width:32%; margin: 3px 1.5% 2px 0; height:auto;}
.pic3right {float:right; max-width:32%; margin: 3px 0 2px 0.3%; height:auto;}

.pic4left {float:left; max-width:24%; margin: 3px 1% 2px 0; height:auto;}
.pic4right {float:right; max-width:24%; margin: 3px 0 2px 0.5%; height:auto;}



/*Show and Hide Responsive*/
.hideOnDesktops {display: none;}	

	
.figure {border: 1px #999 solid; padding:10px 10px 0 10px ;}


/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
	
	/*Show and Hide Responsive*/
	body .hideOnTablets {display: none;}
	.hideOnDesktops {display: block;}
	
	
	

}

/* Small devices (Smartphone, up to <480px) */
@media (max-width: 479px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
	
	/*Show and Hide Responsive*/
	.hideOnMobiles {display: none;}
	body .hideOnTablets {display: block;}
	body .hideOnDesktops {display: block;}
		
	

}


/* ================================================================================================= */
/* Touch Screens */
@media screen and (max-width: 1024px) {
	h1 {	font-size: 24px;}
	h2 {	font-size: 18px;line-height: 120%;}
	h3 {font-size: 14px;}
	h4 {font-size: 14px;}
	h5 {font-size: 13px;}
	h6 {font-size: 12px;	line-height: 140%;}
}