/* @override http://localhost:8888/global/styles/GlobalScreen.css */

/* Global styles for Digital Concepts website */

/*
	 When overriding the following 'global' styles with LocalScreen.css styles, keep in mind the cascading
	 precedence rules:
	 
	 Step 1:
		a. Count the number of ID attributes in the selector
		b. Count the number of CLASS attributes in the selector
		c. Count the number of HTML tag names in the selector
		
	 Step 2:
	 	Write the three numbers in exact order with no spaces or commas to obtain a three digit number.
	 	(Note, you may need to convert the numbers to a larger base to end up with three digits.)
	 	The final list of numbers corresponding to selectors will easily determine specificity with
	 	the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

			#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100
			UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013
			LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011
			LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001
*/

/* @group Base Styles */

/* Underlying style defaults */

body {
	font: 12pt -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: #555d66;
	text-align: left;
	margin: 0;
	background: black url(/global/images/bg-220.jpg) repeat-x 0 115px;
}

.headerBase {
	height: 115px;
	margin-bottom: -115px;
	border-bottom-style: ridge;
	background: #171c26;
	border-bottom-color: #2e384d;
}

.subheaderBase {
	height: 30px;
	padding-top: 12px;
	margin-top:  -12px;
	border-bottom-style: ridge;
	background: #1F2733;
	border-bottom-color: #2e384d;
}

/* This is part of the hack required to get IE to correctly handle .png files */

img, div {
	behavior: url(/global/iehack/iepngfix.htc);
}

/* These are the wrappers for the individual background elements for the different site areas */

.wrapper {
	margin: auto;
	width: 1010px;
	margin-top: 0;
	padding-top: 5px;
}

/* Set the colours for links */

a { color: #2c5f8c; text-decoration: none; border-bottom: 1px dotted #8facbf;}
a:hover { color: navy; }
a:active { color: #080032; }

/* @end Base Styles */

/* @group Header */

.headerTop {
}

.headerContent{
	width: 1010px;
	height:  126px;
	position: relative;
	margin-top: -5px;
}

.subheaderContent{
	width: 1010px;
	height:  30px;
	position: relative;
	margin-top: -10px;
}

.headerTitle {
	height:  90px;
	margin-left: 20px;
	padding-top: 20px;
}

.headerTitle img {
	height: 90px;
	border-style: none;
	float: left;
	margin-top: -10px;
	margin-right: 25px;
}

img#headerText {
}

.navBar {
	padding-right: 30px;
	bottom: 10px;
	text-align: right;
	margin-top: -45px;
}

.loginBar,
.logoutBar {
	padding-right: 30px;
	bottom: 10px;
	text-align: left;
	margin-top: -55px;
}

.navBar ul {
}

.loginBar ul,
.logoutBar ul {
	padding-left: 15px;
}

/*	left: 410px; */

.navBar a,
.loginBar a,
.logoutBar a {
	color: #ccc;
	border-bottom-style: none;
}
.navBar a:hover,
.loginBar a:hover,
.logoutBar a:hover { color: #fff; }

.navBarElement,
.loginBarElement,
.logoutBarElement {
	display: inline;
	padding-left: 6px;
	padding-right: 8px;
}

.loginBarElement,
.logoutBarElement {
	font-size: 13px;
}

#homeNav, #forumNav, #aboutNav, #contactNav, #searchNav {
	border-right: 1px solid #ccc;
}

#registerNav {
	border-right: 1px solid #ccc;
}

#searchLabel {
	padding-left: 10px;
	padding-right: 0px;
}

#googleSearchBox {
}

.headerBottom {
}

/* @end Header Styles */

.content {
}

/* @group Footer */

.dcTagLine {
	font: 8pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #ccc;
	width: 300px;
	padding: 1px;
	margin: auto;
}

.dcTagLine ul {
	margin-left: -25px;
}

.dcTagLine ul li {
	margin: 0 0 0 0;
}

/* My Comment */

/* The links in the copyright are not a special colour */

.dcTagLine a {
	color: #ccc;
	border-style: none;
}
.dcTagLine a:hover { color: #fff; }

.tagLine a {
	color: #ccc;
	border-style: none;
}
.tagLine a:hover { color: #fff; }

.tagLineElement {
	display: inline;
	padding-left: 6px;
	padding-right: 8px;
}

/* The copyright tag */

#copyrightNav {
	border-right: 1px solid #ccc;
}

/* The ABN */

#abnNav {
	border-right: 1px solid #ccc;
	color: #999;
}

/* @end Footer Styles */

/* @group Menu Styles */

/* Left Side Menu */

.leftSideBar {
	position: absolute;
	width: 220px;
}

/* Right Side Menu */

.rightSideBar {
	position: absolute;
	width: 200px;
	margin-left: 825px;
}

/* Set up our default list styles */

.leftSideBar ul,
.leftSideBar ul li ul {
	margin-top:  10px;;
}

.leftSideBar ul li ul,
.leftSideBar ul li ul li ul,
.leftSideBar ul li ul li ul li ul,
.leftSideBar ul li ul li ul li ul li ul{
	margin-top:  0px;;
}

.leftSideBar ul li {
	list-style-type: none;
	margin: 0px 0 0px -30px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.leftSideBar ul li ul {
	padding-left: 0px;
}

.leftSideBar ul li ul li {
	margin-left: 0px;
	padding-top: 5px;
	padding-bottom: 2px;
	border-bottom: none;
}

/* Styles for Right Sidebar content */

.rightSideBar img {
	margin: auto;
	display: block;
}

.rightSideBar a { color: #666; }
.rightSideBar a:hover { color: #aaa; }

.sideBarElement {
	margin-top: 25px;
}

.sideBarText {
	color: white;
	text-align: center;
}

/* Turn off sub-menus by default */
/* Then display the approrpiate menu items */

.MenuLink {
	display: none;
}

/* Now set the appropriate colours etc. on the individual options */
/* Maybe this should be done using some sort of breadcrumb display... */

.RootLink a { color: #999; border-bottom-style: none; }
.RootLink a:hover { color: #fff; }
.RootLink a:active { color: #333; }

/* There's a bit of stuffing around here to get things right */
/* We have to colour things down the tree to get an 'embedded' active link */
/* displayed the way we want */

/* First, highlight the branch containing the active link */

.L1Relation a,
.L2Relation a,
.L3Relation a,
.L4Relation a,
.L5Relation a { color: #ccc; font-weight: normal; border-bottom-style: none; }
.L1Relation a:hover,
.L2Relation a:hover,
.L3Relation a:hover,
.L4Relation a:hover,
.L5Relation a:hover { color: #fff; }
.L1Relation a:active,
.L2Relation a:active,
.L3Relation a:active,
.L4Relation a:active,
.L5Relation a:active { color: #333; }

/* If it's on the opposite bar, make the Parent stand out a bit */

.SideBarParent a { color: #ccc; font-weight: normal; border-bottom-style: none;}
.SideBarParent a:hover { color: #fff; }
.SideBarParent a:active { color: #333; }

/* Bold the currently active link */

.SideBarActiveLink a { color: #fff; font-weight: normal; border-bottom-style: none; }
.SideBarActiveLink a:hover { color: #ccc; }
.SideBarActiveLink a:active { color: #333; }

/* But leave its children and siblings in the highlit format */

.SideBarChild a { color: #ccc; font-weight: normal; border-bottom-style: none; }
.SideBarChild a:hover { color: #fff; }
.SideBarChild a:active { color: #333; }

.SideBarSibling a { color: #ccc; font-weight: normal; border-bottom-style: none; }
.SideBarSibling a:hover { color: #fff; }
.SideBarSibling a:active { color: #333; }

/* @end Menu Styles */

/* @group Main Bar Styles */

.mainBar {
	width: 730px;
	margin-left: 230px;
	padding-bottom: 20px;
	position: absolute;
}

.mainBarMiddle {
	background: #fff;
	border-left: 1px dotted #ccc;
	border-top: 3px solid #e0e6e0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
}

.mainBarContent {
	width: 550px;
	overflow: auto;
	margin:  auto;
	padding: 30px 30px 50px 30px;
	text-align: left;
	white-space: normal;
}

.mainBarContentExtended {
	width: 550px;
	min-height: 650px;
	overflow: auto;
	margin:  auto;
	padding: 30px 30px 50px 30px;
	text-align: justify;
}

.dropShadow {
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.mainBarContent img,
.mainBarContentExtended img {
	display:  block;
	margin-left: auto;
	margin-right: auto;
}

.mainBarContent ul,
.mainBarContentExtended ul {
	list-style-type: disc;
}

.mainBarContent ul li,
.mainBarContentExtended ul li {
	margin-top: 0;
	padding-top: 0;
}

#listSpaced5 ul {
	margin-top: -5px;
}

#listSpaced5 ul li {
	margin-top: 5px;
}

#listSpaced5 p {
	margin-top: 2px;
	margin-bottom: 0px;
}

.insetImage img {
	width: auto;
	float: right;
	padding-left: 10px;
	padding-top: 15px;
}

.imageShadow img {
	margin-bottom: 25px;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.insetImageS img {
	width: auto;
	float: right;
	padding-left: 10px;
	padding-top: 15px;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.insetImageRight img {
	width: auto;
	float: right;
	padding-left: 10px;
	padding-top: 15px;
}

.insetImageRightS img {
	width: auto;
	float: right;
	padding-left: 10px;
	padding-top: 15px;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

.insetImageLeft img {
	width: auto;
	float: left;
	padding-right: 10px;
	padding-top: 15px;
}

.insetImageLeftS img {
	width: auto;
	float: left;
	padding-right: 10px;
	padding-top: 15px;
	box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
	-moz-box-shadow: rgba(0, 0, 0, 0.796875) 0px 5px 15px;
}

#mainBarFooter {
	font: 7pt "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #888;
	text-align: right;
	margin-top: 15px;
	margin-right: 30px;
	z-index: 10;
}

/* Various special paragraph styles */

p {
	line-height: 150%;
	margin: 10px 0px 0px 0px;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

sub { 
  top: 0.4em; 
}	

.tight {
	margin-top: 4pt;
}

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

/* Style for the first character of the first paragraph on a page */

.initial:first-letter { font-size: 140%; }

/* Make the heading styles match our paragraph style */

h1 { font-size: 180%; font-weight: normal; color: #222222; text-align: left; }
h1.initial:first-letter { font-size: 200%; }

h2 { font-size: 160%; font-weight: normal; color: #2a2a2a; text-align: left; }
h2.initial:first-letter { font-size: 180%; }

h3 { font-size: 140%; font-weight: normal; color: #333333; text-align: left; margin-bottom: 2pt; }
h3.initial:first-letter { font-size: 160%; }

h4 { font-size: 120%; font-weight: normal; color: #3a3a3a; text-align: left; margin-bottom: 2pt; }
h4.initial:first-letter { font-size: 140%; }
#headerList h4 { margin-top: 6pt; }

h5 { font-size: 110%; font-weight: normal; color: #444444; text-align: left; margin-bottom: 2pt; }
h5.initial:first-letter { font-size: 125%; }

h6 { font-size: 100%; font-weight: normal; color: #4a4a4a; text-align: left; margin-bottom: 2pt; }
h6.initial:first-letter { font-size: 110%; }

h1, h2, h3, h4, h5, h6 {
	color: #2c5f8c;
}

/* And provide a bit of variety */

.eventDate {
	color: maroon;
	margin-bottom: -15px;
	margin-top: 0px;
}

.eventHeading {
	margin-bottom: -5pt;
}

/* Style for centred text */

.centredText {
	text-align: center;
	top: 50px;
	position: relative;
}

/* Style for different sized image presentation formats */

.imageContainer {
	width: 484px;
	font-size: 10pt;
	text-align: center;
}

.imageContainer a {
	line-height: 10pt;
}

.imageBox1 {
	width: 400px;
	line-height: 2;
	padding-bottom: 20px;
}

.imageBox1 img {
	width: 280px;
	margin-bottom: 10px;
}

.imageBox2 {
	width: 240px;
	display: inline-block;
	line-height: 2;
	padding-bottom: 20px;
}

.imageBox2 img {
	width: 225px;
	margin-bottom: 10px;
}

.imageBox3 {
	width: 155px;
	display: inline-block;
	line-height: 2;
	padding-bottom: 20px;	
}

.imageBox3 img {
	width: 150px;
	margin-bottom: 10px;
}

.imageBox4 {
	width: 110px;
	display: inline-block;
	margin-bottom: -10px;
}

.imageBox4 img {
	width: 105px;
	margin-bottom: 10px;
}

/* List Styles */

ul.evenSpace,
ul.evenSpaceNoMarker,
ul.tightSpace,
ul.tightSpaceNoMarker {
	margin-top: 5px;
}

ul.evenSpace li,
ul.evenSpaceNoMarker li,
ul.tightSpace li,
ul.tightSpaceNoMarker li {
	line-height: 150%;
}
	
ul.evenSpace li {
	margin-top: 5px;
}

ul.evenSpaceNoMarker li {
	margin-top: 5px;
	list-style-type: none;
}

ul.tightSpace li {
	margin-top: 0px;
}

ul.tightSpaceNoMarker li {
	margin-top: 0px;
	list-style-type: none;
}

/* @end Main Bar Styles */

/* @group File Download Table Styles */

.dlSpecification {
	margin-top: 5px;
}

.dlCaption {
	font-size: 120%;
	font-weight: normal;
	color: #3a3a3a;
	text-align: left;
	margin-bottom: 4pt;
}

.dlIcon img {
	width: auto;
	padding: 2px;
	margin-right:8px;
	margin-left:8px
}

.dlFileName {
	width: 380px;
	text-align: left;
	vertical-align: middle;
}

.dlSize {
	width: 60px;
	text-align:  right;
	vertical-align: middle;
	font-size: 80%;
}

/* @end File Download Table Styles */

/* @group FancyZoom Styles */

#ZoomCaption {
	font-size: 14px;
	font-family: Comic Sans MS;
	color: rgb(255, 255, 255);
	text-shadow: rgb(0, 0, 0) 0px 2px 4px;
	white-space: nowrap;
}

#ZoomSubcaption {
	font-weight: normal;
	color: #aaa;
}

/* @end FancyZoom Styles */

/* @group Miscellaneous Styles */

.contactTable,
.table1 {
	margin-top: -10px;
}

.contactTable tr,
.table1 tr {
	vertical-align: bottom;
	text-align: left;
}

.refCase li {
	padding-bottom: 5px;
}

.shade {
	background: #eee;
}

/* @end Miscellaneous Styles */