/*   * {border: 1px solid red !important;}  */

body {background-color:#FFF;}
html, body, td {font:medium Palatino, "Palatino Linotype", Georgia, serif; color:#000; margin:0; padding:0; border-width:0; word-wrap:break-word;}

h1, h2, h3, h4 {font-weight:bold; line-height:1.3;}
h1 {font-size:xx-large;}
h2 {font-size:x-large; margin-top:2em;}
h3 {font-size:large; margin-top:2em;}
h4 {font-size:medium; margin-top:2em;}
h1 + h2, h2 + h3, h3 + h4, h1 + p, h2 + p, h3 + p, h4 + p, h3:first-child, h4:first-child {margin-top:auto;}
p {margin:1.3em 0; line-height:1.3;}
p:first-child {margin-top:0.7em;}
p:last-child {margin-bottom:0.7em;}
img {border-width:0;}
a {text-decoration:none; color:#008899;}
/* a:visited {color:#666;} */
a:hover, a:active {text-decoration:underline; color:#000;}
ul, ol {list-style-position:outside; margin:1.5ex 0 1.5ex 1em; padding-left:0.5ex;}
li {margin:0.7ex 0;}
form, input, select, select option, textarea {font-family:inherit; font-size:inherit; padding-left:0.5ex; padding-right:0.5ex;}
input[type="submit"] {padding-left:1.5ex; padding-right:1.5ex;}
input[type="button"] {padding:0.3ex 1ex;}

.ad {clear:both; padding:1ex 0;}
.bld {font-weight:bold;}
.itl {font-style:italic;}
.clrbth {clear:both;}
.horizontalline {clear:both; height:0; width:100%; border-width:0; border-top:1px solid #CCC; margin:1ex 0; padding:0;}
.colouredbox {background-color:#FEFEF5; border:1px dashed #CDC7A2; padding:1ex; margin:2ex 0;}
.quotation {padding: 0.5ex 0.3ex 0.5ex 4ex; font-style:italic; background:url('/img/quote-left.png') top left no-repeat, url('/img/quote-right.png') bottom right no-repeat;}
.additionalinfo {margin-left:2em; padding-left:1em; border-left:5px dashed #EEE;}
.openingquote {text-align:right; font-style:italic; padding-left:20%;}
.articledate {clear:both; color:#888; font-style:italic;}
.greytext {color:#888;}
.smalltext {font-size:small;}
.nobreak {white-space:nowrap;}
.externallink:after {content:url("/img/external-link.gif"); vertical-align:baseline; padding-left:0.3ex;}
img.left {float:left; margin:0.3em 1em 1em 0; max-width:50%; height:auto;}
img.right {float:right; margin:0.3em 0 1em 1em; max-width:50%; height:auto;}
img.border {border:1px solid #CCC;}

.tablecoloured {border:1px solid #AAA; border-collapse:separate; border-spacing:2px; margin:2ex 0;} 
.tablecoloured td {vertical-align:top;}
.tablecoloured td, .tablecoloured th {padding:0.8ex;}
.tablecoloured th {font-weight:bold; color:#FFF; background-color:#8B814C;}
.tablecoloured tr.odd {background-color:#F6F6F6;}
/* .tablecoloured tr:hover {background-color:#E3E3E3;}  */
table.alternating tr:nth-child(even) {background-color:#FFF;}  /* not supported in older browsers, use the "odd" class when possible */
table.alternating tr:nth-child(odd) {background-color:#F6F6F6;}
.tabletransparent td {padding:0.8ex;}
.tabletransparent th {font-weight:bold; color:#000; background-color:inherit; text-align:left;}

.figure {padding:0.5ex 0 2ex 0;}
.centered {text-align:center;}
.figure .picture {padding:0.5ex 0;}
.figure img {max-width:100%; height:auto;}
.figure .title {padding:1ex 0 2ex 3ex; font-style:italic; line-height:1.1;}
.figure .title:before {content:url("/img/arrow-above.gif"); vertical-align:text-top; padding-right:1ex;}

.nextpage {clear:both; text-align:center; padding:1.5em 0;}

#page {width:80%; margin:0 auto; min-width:740px; padding:0;}

#menucontent, #maincontent, #bottomcontent {padding-left:1ex; padding-right:1ex;}

#menu {width:25%; min-width:25%; float:left;}
#menucontent {padding-top:3ex; padding-bottom:2ex;}
#logo {text-align:left;} /* 4 */
#logo img {max-width:100%; height:auto;}
.menulevel1 {padding:1.5ex 0ex 0.5ex; font-weight:bold;}
.menulevel1 a {text-decoration:none; border-bottom:1px dashed #666; color:#000;}
.menulevel1 a:hover {border-bottom-style:solid; border-bottom-color:#000;}
.menulevel2 {padding:0.5ex 0ex 0.5ex 2ex;}
.menulevel2 a {text-decoration:none; border-bottom:1px solid #CCC; color:#000; line-height:1.3;}
.menulevel2 a:hover {border-bottom-color:#000;}
#menucalendar .menulevel1 a::before {content:url(/img/icon-calendar.png); vertical-align:baseline;}
#menusoftware .menulevel1 a::before {content:url(/img/icon-software.png); vertical-align:baseline;}
#menudesign .menulevel1 a::before {content:url(/img/icon-design.png); vertical-align:baseline;}
#menumisc .menulevel1 a::before {content:url(/img/icon-misc.png); vertical-align:baseline;}
#menuinfo .menulevel1 a::before {content:url(/img/icon-info.png); vertical-align:baseline;}

#main {padding:0 0 0 27%;}
#maincontent {padding-top:3ex; padding-bottom:2ex; overflow:auto;} /* 1 */

#bottom {clear:both; border-top:1px solid #CCC;}
#bottomcontent {font-size:small; padding:2ex;}

.socialmedia {margin-top:1.5em; clear:both; vertical-align:top;}
div.fb-like.fb_iframe_widget, .fb_iframe_widget > span {vertical-align:top !important;}
#printcopyright {display:none;}


@media screen and (min-width: 1600px) {
#page {width:65%;}
}

@media screen and (min-width: 1400px) and (max-width: 1599px) {
#page {width:75%;}
}

@media screen and (min-width: 1200px) and (max-width: 1399px) {
#page {width:85%;}
}

@media screen and (max-width: 768px) {
#page {width:100%; margin:0; min-width:300px;}

#menu {width:100%; float:none; border-bottom:1px solid #CCC; background-color:#F9F9F9; margin-bottom:1em;}
#menucontent, #maincontent, #bottomcontent {padding:2ex;}
#logo {float:left; text-align:left; padding-right:2ex; max-width:30%;}
#menuitems {overflow:auto;}
.menulevel1 {float:left; clear:left; padding:0.5ex 0ex;}
.menulevel2 {display:none;}

#sectioncalendar #menucalendar .menulevel2, #sectionsoftware #menusoftware .menulevel2, #sectiondesign #menudesign .menulevel2, #sectionmisc #menumisc .menulevel2, #sectioninfo #menuinfo .menulevel2 {display:block; float:left; clear:left;}
#menucontent::after {content:""; display:block; clear:both;} /* 5 */
#main {padding:0; clear:both;}
}


@media screen and (max-width: 600px) {
.menulevel1 a::before {content:"" !important;} /* 6 */
p {line-height:1.7;} /* 7 */
.figure .title, #bottomcontent {font-size:medium;} /* 7 */
}


/* Medium-size screen and older browsers */ /* 9 */
@media screen and (min-width: 769px) and (max-width: 1199px) {
#page {width:90%;}
}


@media print {
#menu, #bottom, .socialmedia, .ad, .noprint {display:none;}
#page {width:100%; margin:1em; min-width:0px;}
#main {padding:0;}
#maincontent {padding:0; overflow:visible;}
a:link, a:visited, a:hover, a:active {text-decoration:none; border-bottom-width:0; color:#000;}
#printcopyright {display:block; font-style:italic; padding-top:1ex;}

.externallink:after {content:" ("attr(href)") "; padding-left:0;}
.colouredbox {background-color:transparent; border-color:#CCC;}

.tablecoloured {border:1px solid #000; border-collapse:separate; border-spacing:2px; margin:2ex 0;} 
.tablecoloured th {font-weight:bold; color:#000; background-color:#FFF;}
.tablecoloured tr.odd {background-color:#FFF;}
.tablecoloured td {border-top:1px solid #000;}
}