html, body { height: 100%; }
body { margin:0; padding:0; background:#191919; font-size:100%; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height:1.3em; color:#ffffff; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }

.noPadding { margin:0; padding:0; }
.textCenter { text-align:center; }
.textRight { text-align:right; }
.textLeft { text-align:left; }
.textBold { font-weight:bold; }
.textItalic { font-style:italic; }
.clear { clear:both; }
.floatRight { float:right; }
.floatLeft { float:left; }
.imgRight { float:right; margin:0 0 10px 10px; }
.imgLeft { float:left; margin:0 10px 10px 0; }
.nowrap { white-space:nowrap; }
.hide { visibility:hidden; }
.hidden { display:none; }

a { color:#ccc; outline:none; }
a:hover { color:#fbde14; }
img { max-width:100%; border:0px none; }

h1 { font-size:160%; }
h2 { font-size:140%; }
h3 { font-size:120%; }
H4 { font-size:110%; }

/* little support for HTML5 seamless attribute currently, frameborder and scrolling deprecated */
iframe[seamless] { background-color:transparent; border:0px none transparent; padding:0px; overflow:hidden; }

/* Layout */
#headerContent, nav ul, #topContent, #content, #footerContent { max-width:980px; margin:0 auto; }
section#main { min-height:75%; }

/* header Styles */
header { background-color:#737770; color:#FFFFFF; overflow:hidden; }
#headerContent h1 { float:left; font-size:220%; margin:.5em 0 .3em; }
#headerContent p { padding:0; margin:.5em 0 0; font-size:120%; }
#headerContent .social { float:right; }
#headerContent .headerBox { text-align:center; float:left; background-color:#191919; margin:1em 1em .5em 0; padding:.5em .5em 0 .5em; min-height:4em; border-radius:8px; }
#headerContent .headerBox p { margin:0; padding:0; }
#headerContent p.headerInfo { color:#fbde14; font-size:90%; font-style:italic; padding-top:5px; }
#headerContent .searchBox { text-align:center; float:right; background-color:#191919; margin:1em 0 .5em 0; padding:.5em .5em 0 .5em; min-height:4em; border-radius:8px; }
#headerContent .searchBox input { border-radius:5px; font-size:100%; outline:none; margin:5px; vertical-align:middle; padding:2px; }
#headerContent .searchBox input[type="text"] { background-color:#f5f7f6; }
headerContent .searchBox input[type="submit"] { background-color:#42a2f4; }
headerContent .searchBox input[type="submit"]:hover { background:#3b91db; }

/* nav Styles */
#mainNav { background-color:#191919; overflow:hidden; font-variant:small-caps; border-left:1em solid #191919; }
#mainNav ul { list-style:none; margin:0 auto; padding:0; }
#mainNav ul li { float:left; padding:0; }
#mainNav ul li a { display:block; padding:.5em 1.5em; text-decoration:none; color:#ccc; }
#mainNav ul li a.last {  }
#mainNav ul li a:hover { background-color:#fbde14; color:#191919; }
#mainNav ul ul { position:absolute; }
#mainNav ul ul li { float:none; margin:0; padding:0; overflow:hidden; min-width:7em; }
#mainNav ul ul li.first {  }
#mainNav ul ul li.last { border-radius:0 0 .5em .5em; }
#mainNav ul ul li a { background-color:#191919; min-width:7em; }
#mainNav ul ul, #mainNav ul li:hover ul ul, #mainNav ul ul li:hover ul ul { display:none; }
#mainNav ul li:hover ul, #mainNav ul ul li:hover ul, #mainNav ul ul ul li:hover ul { display:block; z-index:1000; }

/*content styles */
#main { background-color:#7a7a7a; border:1px solid #7a7a7a; } /* without a border getting unwanted spacing */
#content { border:1px solid #7a7a7a; }
#content img { padding:5px; }
#content h3 { color:#fbde14;  }
#content h3.model { color:#000; }
#content p {  }
#content ul.list { margin-left:210px; }
.info { font-style:italic; font-size:120%; text-align:center; color:#fbde14; font-weight:bold; }
#topContent { background-color:#191919; overflow:hidden; margin-top:-1px; }

#formData { width:80%; margin:1em auto;  border-radius:10px; }
#formData fieldset { margin:0; padding:0 0 5px 0; border:0 none; background-color:#737770; border-radius:10px; }
/* Padding on the left was pushing legend out with 100% width, reduced width by padding left value */
#formData legend { color:#ffffff; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#42a2f4; font-variant:small-caps; padding:2% 0 2% 2%; margin:0; width:98%; font-size:130%; } 
#formData h3 { color:#ffffff; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#42a2f4; font-variant:small-caps; padding:20px 0 10px 50px; margin:0; }
#formData label.inputLabel { float:left; text-align:right; width:22%; color:#fff; margin:0; padding:10px 0 0 0; }
#formData p.inputField { margin:3px 0 3px 24%; padding:2px; }
#formData p.contentField { margin:3px 5px; padding:2px; }
#formData input, #formData select, #formData textarea { width:52%; border-radius:5px; font-size:100%; outline:none; background-color:#f5f7f6; margin:2px; vertical-align:middle; padding:5px; }
#formData select { width:54%;  }
#formData textarea { height:100px; }
#formData textarea.tinymce { height:250px; width:100%; }
#formData textarea.pages { height:250px; width:96%; }
#formData input[type="radio"], #formData input[type="checkbox"] { cursor:pointer; width:1em; margin:3px 3px 0 0; background:#7c7d7c; }
#formData input:focus, #formData textarea:focus { background-color:#ebebeb; }
#formData input[type="radio"]:focus, #formData input[type="checkbox"]:focus { background:#7c7d7c; } 
p.formButtons { margin:0; padding:0; background-color:#7c7d7c; border-radius:0 0 10px 10px; text-align:right; }
p.formButtons2 { margin:0; padding:0; text-align:right; }
#formData button, #formData input[type="submit"], #formData input[type="button"] { margin:15px 0 25px 1%; cursor:pointer; width:20%; height:40px; border:none; color:#FFF; font-size:120%; border-radius:5px; }
#formData button, #formData input[type="submit"], #formData input[type="button"] { background-color:#42a2f4; }
#formData button:hover, #formData input[type="submit"]:hover, #formData input[type="button"]:hover { background:#3b91db; }
.formField { margin:0; padding:0; overflow:hidden; }
.loginIcon { background-image:url(../images/login-icon.png); background-repeat:no-repeat; background-position:0% 50%; }
.formLinks { text-align:right; margin:0; padding:0 2% 10px; }
.frmFieldMsg { color:#FFF; border-radius:4px; font-style:italic; padding:5px 8px; font-size:80%; margin-left:3px; }
.frmMsgAccept { background-color:#6F8F52; }
.frmMsgError { background-color:#AD2930; }
.frmMsgImg { height:16px; padding:5px 0 0; }
.frmInfo { color:#F3F904; font-style:italic; font-weight:bold;  margin:5px; }
.fieldReq { color:#F3F904; font-style:italic; font-weight:bold; }
.fieldNote { color:#A4A4A4; font-style:italic; font-weight:bold; font-size:90%; }
.divider { height:10px; }
.button { cursor:pointer; border:none; color:#FFF; font-size:120%; border-radius:5px; background-color:#42a2f4; text-decoration:none;  padding:2px 3px; }
.button:hover { background:#3b91db; color:#FFF; }
.button2 { cursor:pointer; border:none; color:#FFF; font-size:120%; border-radius:5px; background-color:#7c7d7c; text-decoration:none;  padding:2px 3px; }
.button2:hover { background:#3b91db; color:#FFF; }

#formData2 { width:95%; margin:1em auto; border-radius:10px; }
#formData2 fieldset { margin:0; padding:0 0 5px 0; border:0 none; background-color:#737770; border-radius:10px; }
/* Padding on the left was pushing legend out with 100% width, reduced width by padding left value */
#formData2 legend { color:#ffffff; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#42a2f4; font-variant:small-caps; padding:1% 0 1% 1%; margin:0; width:99%; font-size:120%; } 
#formData2 h3 { color:#ffffff; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#42a2f4; font-variant:small-caps; padding:20px 0 10px 50px; margin:0; }
#formData2 .formField { float:left; width:46%; padding:0 3px; }
#formData2 label.inputLabel { float:left; text-align:right; width:30%; color:#fff; margin:0; padding:10px 5px 0 0; }
#formData2 p.inputField { margin:0 0 0 31%; padding:3px; }
#formData2 p.inputField2 { margin:8px 0 0 31%; padding:3px;  }
#formData2 input, #formData2 select, #formData2 textarea { border-radius:5px; font-size:100%; outline:none; background-color:#f5f7f6; margin:2px; vertical-align:middle; padding:5px; width:95%; }
#formData2 select { width:99%; }
#formData2 textarea { height:100px; }
#formData2 input[type="radio"], #formData2 input[type="checkbox"] { cursor:pointer; width:1em; margin:0 3px 0 0; background:#7c7d7c; }
#formData2 input:focus, #formData2 textarea:focus { background-color:#ebebeb; }
#formData2 input[type="radio"]:focus, #formData2 input[type="checkbox"]:focus { background:#7c7d7c; } 
#formData2 button, #formData2 input[type="submit"], #formData2 input[type="button"] { margin:15px 0 25px 1%; cursor:pointer; width:20%; height:40px; border:none; color:#FFF; font-size:120%; border-radius:5px; }
#formData2 button, #formData2 input[type="submit"], #formData2 input[type="button"] { background-color:#42a2f4; }
#formData2 button:hover, #formData2 input[type="submit"]:hover, #formData2 input[type="button"]:hover { background:#3b91db; }

img#securityImage { border:0 none; padding:0; }
input#securityCode { width:15%; margin-top:-1.1em; }

.trading h4 { color:#B7B7B7; margin:1em 0 .5em 1em; padding:0; }
.trading ul { list-style:none; margin:0 1em 0 0; padding:0; }
.trading li { line-height:1.5em; }
/* Unicode for a 'large black square' and a 'no-break space' www.fileformat.info */
.trading li:before { content:"\2B1B \00A0"; color:#fbde14; }  
.trading { float:right; }
.trading p { padding:1em 2em 0 0; margin:0; font-size:140%; font-weight:bold; color:#fbde14; }

.slideWrapper { width:100%; max-width:620px; overflow:hidden; float:left; margin:0 0 5px 0; border-top:.5em solid #191919; border-left:2em solid #191919; }
#slideshow img { border:0 none; margin:0; padding:0; border-radius:8px;  }

.boxes { width:100%; overflow:hidden; padding:5px 0;  }
.box { display:inline-block; width:24.5%; margin:10px auto; text-align:center; background-color:#fff; color:#000; vertical-align:top; }
.box h3 { background-color:#fbde14; margin:0; padding:5px 0; color:#000; }
.box h3 a { color:#000; }
.box h3 a:hover { color:#999; text-decoration:none; }
.box p { margin:0; padding:2px 0; }
.box img { max-width:95%; border-radius:10px;}

#map_canvas { width:80%; height:550px; border:1px solid #000; border-radius:8px; margin:0 auto 20px; }

/* ---- Popup Styles ---- */
#mainContent { border-radius:0 0 10px 10px; min-height:550px; background-color:#494a4a; padding:10px 5px; }
#ifrImage { border-radius:10px; width:450px; height:250px; }
#ifrPopup { border-radius:10px; }

/* ---- Page Navigation Styles ---- */
p.pageNavBar { padding:8px 5px 12px; margin:0; text-align:right; font-size:90%; }
.pageNav { border-radius:5px; margin:2px; padding:2px 5px; background-color:#7c7d7c; color:#A4A4A4; border:none; }
a.pageNav:link, a.pageNav:visited { border:none; color:#FFF; border-radius:5px; background-color:#42a2f4; text-decoration:none;  padding:2px 3px; }
a.pageNav:hover, a.pageNav:active { background:#3b91db; color:#FFF; }

/*footer styles */
footer { clear:both; margin:0; padding:0; overflow:hidden; font-size:90%; line-height:1.7em; }
footer p { margin:0; padding:0; }
.vcard { float:left; margin:2em 0 0; }
.vcard div { line-height:1.7em; }
.payments { float:right; margin:2em 0 0; }
footer .divider { clear:both; border-bottom:1px solid #999; height:10px; margin-bottom:10px; }
#copyright { float:left; padding-bottom:10px; }
#kramtek { float:right; padding-bottom:10px; }

@media only screen and (max-width: 768px) {
	body { line-height:1.1em; }
	.box { width:32%; margin-top:5px; }
	#mainNav ul li a { padding:.2em .5em; }
	#map_canvas { width:95%; height:400px; }
}

@media only screen and (max-width: 550px) {
	footer p { text-align:center; }
	#copyright { float:none; padding:3px 0; }
	#kramtek { float:none;  padding:3px 0; }
}

@media only screen and (max-width: 450px) {
}

@media only screen and (max-width: 350px) {
}
