/* äöü (prevent textpad utf-8 loading bug) */

a:link {color: #ff3333;font-weight: bold;text-decoration: none;}
a:hover {color: Navy;text-decoration: underline;}
body {min-width:320px; padding:0;margin:0 auto; background : #fff;}

/* use these to highlight page elements while working on layout ¡COMMENT OUT BEFORE UPLOAD!
div {border:1px dotted #000}
div.container {border:1px solid #f00 !important;}
div.row{border:1px solid #ff0;}
*/


div.container {min-width:320px !important;padding:0;}
.jumbotron, div, p, h1, h2, address, li {background-color:transparent !important;}
.jumbotron{width:100%;height:180px;padding:0 !important;background: #175A8F url(../graphics/header-background.jpg)repeat;
	font-family:Mistral,cursive;
	color:#ff4;
}
.jumbotron div.logo {width:20%;max-width:120px;padding:0;margin:0;text-align:center;float:left;}
.jumbotron div.site-title {min-width:180px;max-width:80%;text-align:center;float:right;height:147px;}
.jumbotron div.logo img {width:80%;max-width:100px;height:auto;}

div.nav {padding:0 1px 0 0;width:100%;float:right;margin-bottom:0;height:33px;text-align:right}
div.tab, div.tab-s {
	display:inline-block;
	height:33px;
	font-family: Tahoma, Helvetica, sans-serif;
	font-size:12px;
	text-align: center;
	vertical-align:middle;
	margin:auto auto 0 auto;
}
div.tab {
	width: 16.6%;
	max-width: 100px;
	min-width:76px;
	padding-top:8px;
	background: url("../graphics/tab.png");
}
div.tab-s {
	width: 42px;
	padding-top:6px;
	background: url("../graphics/tab_s.png");
}
div.tab-s img {margin:auto;border:1px #999 solid;}
div.tab-s a:hover img {border-color: #eee;}
div.tab a{font-weight: normal !important;color:#000;}
div.tab a:hover{color:#fff;}

/*div.nav img {margin:0; max-width:16.6%;min-width:60px;border:none}*/
/*h1 {font-size:3vw !important;}*/

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 961px) {
  .jumbotron div.site-title h1 {font-size: 64px !important;}
  .jumbotron div div div.logo {font-size:32px;}

}
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 713px) and (max-width: 960px) {
  .jumbotron div.site-title h1 {font-size: 60px !important;}
  .jumbotron div.logo {font-size:32px;}
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (min-width: 481px) and (max-width: 712px) {
  .jumbotron{width:100%;height:213px;}
  .jumbotron div.site-title h1 {font-size: 32px !important;}
  .jumbotron div.site-title {max-width:72%;}
  .jumbotron div div div.logo {font-size:24px;}
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (min-width: 340px) and (max-width: 480px) {
  .jumbotron{width:100%;height:213px;}
  .jumbotron div.site-title h1 {font-size: 24px !important;}
  .jumbotron div.site-title {max-width:180px;}
  .jumbotron div div div.logo {font-size:24px;}
}

h1, h2 {text-align: center;}
h3, p {text-align: left;}
section {margin-bottom:32px;}

div.outer {width:100%;clear: both;padding:0;margin: auto;}
div.lcol {float:left;width:60%; min-width:320px;padding:0;}
div.rcol {float:left;width:40%; min-width:320px; padding:0;}

div.pic {width:80%; text-align:center; margin:auto auto 24px auto}
div.picl {width:100%; text-align:center; margin: auto; padding-bottom:32px;} /*larger*/
div.footer {width:100%;font-family: Tahoma, Helvetica, sans-serif;font-weight: bold;text-align: center;}
div.head {width: 100%;padding: 5px 5px 10px 5px;}
div.webform-link {background-color:#fff !important;padding:5px;font-weight:bold;border: thin groove black;}
div.txt {padding: 7px;}
div.txt p {text-align: justify;}
div.flags {width:100%;text-align:center;}
div.flags img {margin:auto 16px}
li {margin: 3px 10px 3px 15px;font-family: Tahoma, Helvetica, sans-serif;font-size: 16px;text-align: left;}


div.three-col-outer {width:100%;clear: both;padding:0;margin: auto;}
div.lcol3 {float:left; width:33%; background:#fff;}
div.ccol3 {float:left; width:34%; background:#fff;}
div.rcol3 {float:right; width:33%; background:#fff;}
div.lcol3, div.ccol3, div.rcol3 {padding-bottom:32767px; margin-bottom:-32767px;}
div.wrapper-3col {overflow:hidden;}
div.content-3col {padding:10px;}

a.button {
	border: 1px solid #999;
	padding: 3px 5px;
	margin-right:10px;
	border-radius: 4px;
	background: #eee url('../graphics/button_bg.png') repeat-x center;
	font-size: 80%;
	line-height: 1.8;
	font-weight: normal;
	color: #222 !important;
	text-decoration:none;}



img.border, iframe.border {border: 3px ridge yellow; margin: auto;}
div.pic img {border: 3px ridge yellow;}
div.picl img {border: 2px ridge yellow;}
div.pic p, div.picl p  {text-align:center;}
img.flag{margin-right:16px;}
h2 img {margin-right:10px;}

p.footer {text-align: center; font-size: 12px;}
p#cpyrt {font-size: 10px; text-align: center;}
p, td, div.formnotes {margin: 10px 10px 10px 15px; font-family: Tahoma, Helvetica, sans-serif; font-size: 16px; text-align: left;}

sup {font-size: 65%;}
*.centred {text-align: center;}
table#form {margin-top: 10px; border: 3px inset #cc0000;}
*.small {font-size: 12px;}
*.smallest {font-size: 10px;}
*.bold {font-weight: bold;}
table#links {margin: 15px auto 10px auto;}
td.links {text-align: center; width: 50%;}
*.c {text-align: center;}
.indent8 {margin-left:8px}
.indent16 {margin-left:16px}
.indent24 {margin-left:24px}
.indent32 {margin-left:32px}


/* announcement panel */
div#announcement {max-width:80%;margin:20px auto;padding:6px 4px;  border: 3px ridge #ee0; background-image: linear-gradient(#81B0F3, #BDD7FF);}
div#announcement h2 {color:#194b71; background-color: transparent; text-align: center;}
div#announcement p {font-size:120%;text-align: center;color:#333;}

br.both {clear: both}