/* CSS Document */

/* Author Ashoor Namrood, Syrox */

body {
	margin:0px; padding:0px; font-family:"Arial Narrow", Arial, Helvetica, sans-serif; background:url(../Images/layout/bg.jpg) 0px 0px repeat-x; /* Always define 0px margin and padding, never use the Body tag to specify spaces. Body tags should only be used to specify backgrounds, font-family's (i.e. Arial, Verdana etc), a container class (i.e. line 39, .container) should be used to specify spaces. */
}

h1 {
	margin:0px 0px 10px 0px; padding:0px; font-size:24px; font-weight:100; color:#666666; /* Always define font-size, 0px margin and padding to begin with on heading tags. You can then modify these as you continue building a site. */
}

h2 {
	margin:0px; padding:0px; font-size:20px; /* */
}

h3 {
	margin:0px; padding:0px; font-size:18px; font-weight:100; color:#666666;/* */
}

h4 {
	margin:0px; padding:0px; font-size:16px; /* */
}

h5 {
	margin:0px; padding:0px; font-size:14px; /* */
}

h6 {
	margin:0px; padding:0px; font-size:12px; /* */
}

a {
	margin:0px; padding:0px; color:#666666; /* Rule: when specifying font-size, line-height should always be roughly 3px more, so, i.e. 11px font-size = 14px line-height. */
}

a:hover {
	color:#cccccc;
}

a img {
	border:0px; /* This defines that any images placed inside a <a href> tag or a .NET 2.2 Hyperlink have no default "blue" border that Internet Explorer adds by default */
}

p {
	margin:0px; padding:0px; font-size:12px; line-height:14px; color:#666666; /* Rule: when specifying font-size, line-height should always be roughly 3px more, so, i.e. 11px font-size = 14px line-height. */
}

div.clear {
	clear:both; line-height:0pt; font-size:0px; height:0px; /* When a CSS class has an auto height (i.e. line 39, .container), it means that it'll grow in height according to the elements inside it. However, due to cross-browser differences, some browsers will not comply with this rule as they dont take into account floated elements so the DIV is 0px in height effectively. 'div.clear' is an "invisible" DIV which enforces this rule. */
}

.container {
	/*width:959px;*/ height:100%; margin:auto; position:relative;
}

.header {
	position:relative; width:899px; height:76px; margin:auto; display:block; border-bottom:1px solid #cccccc; /* For detailed information on, CSS Positioning go to: http://webdesign.about.com/od/advancedcss/a/aa061307.htm */
}

.header a.logo {
	position:absolute; top:26px; left:40px;
}

.header img.logo {
	/*position:absolute; top:26px; left:40px;*/
}

.header p.call {
	position:absolute; top:8px; right:35px; font-size:16px;
}

.header p.nav {
	position:absolute; top:46px; right:35px; font-size:16px;
}

.header p.nav a {
	text-decoration:none;
}

.header p.nav a:hover {
	color:#000000;
}

.header img {
	position:absolute; top:0px; left:0px; /* For detailed information on, CSS Positioning go to: http://webdesign.about.com/od/advancedcss/a/aa061307.htm */
}

.below-header {
	width:959px; min-height:340px; height:auto !important; height:340px; margin:auto; background:url(../Images/layout/panel.jpg) 0px 62px no-repeat; /* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content {
	/* width:959px; min-height:500px; height:auto !important; height:500px; margin:auto; I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content {
	/* width:899px; min-height:400px; height:auto !important; height:400px; margin:auto; padding:0px 30px 0px 30px; I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}


.content .headerarea {
	position:relative; width:899px; height:77px; border-bottom:1px solid #cccccc; /* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content .headerarea#oneline {
	height:57px;
}

.content .headerarea h1 {
	position:absolute; top:15px; left:30px;
}

.content .headerarea h3 {
	position:absolute; top:41px; left:30px;
}

.scrollable-layer {
	width:899px; height:322px; overflow:hidden; overflow-y:scroll;
}

.content .central-column {
	width:839px; height:auto; padding:24px 30px 20px 30px; float:left; border-bottom:1px solid #cccccc; /* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content .central-column p {
	font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px 0px 0px 0px;
}

.content .central-column .flash-holder {
	width:839px; height:205px; background:url(../Images/layout/arrow-right.gif) no-repeat 416px 105px;
}

.content .left-column {
	width:489px; height:auto; padding:24px 30px 20px 30px; float:left;/* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content .left-column h2 {
	color:#666666; font-size:18px; font-weight:bold; margin:0px 0px 15px 0px;
}

.content .left-column p {
	font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px 0px 15px 0px;
}

.content .right-column {
	width:300px; height:auto; padding:24px 0px 20px 12px; float:left;/* I have given the .content DIV a min-height of 500px. This means that the container-alternative DIV which I had given a min-height of 500px will now rise to 650px high when taking into account the heights of the header (100px) and the footer (50px). */
}

.content .right-column h2 {
	color:#666666; font-size:18px; font-weight:bold; margin:0px 0px 15px 0px;
}

.content .right-column p {
	font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px 0px 15px 0px;
}

.content a.readmore {
	font-size:14px; font-weight:bold; float:right; text-decoration:none;
}




.footer {
	width:899px; height:50px; margin:auto; border-top:1px solid #cccccc; /* */
}











.lightbox-homemade {
	position:absolute; top:0px; left:0px; width:100%; z-index:100000; overflow:hidden;  display:none; margin:0px;
}

.lightbox-homemade .bg-opacity 
{
	/* filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;*/
	background-color:#000000; position:absolute; top:0px; left:0px; height:100%; width:100%; display:none; z-index:-1;
}

.lightbox-homemade .lightbox-container {
	width:304px; min-height:304px; height:auto !important; height:304px; border:10px solid #000000; background-color:#FFFFFF; /*border:10px solid #333333; background:#191919;*/ display:none; position:absolute; margin:0px;
}

.lightbox-homemade .lightbox-container .right-pane {
	width:600px; min-height:380px; height:auto !important; height:380px; border-left:10px solid #333333; float:right;
}

.lightbox-homemade .lightbox-container .right-pane img {
}

.lightbox-homemade .lightbox-container .left-pane {
	width:269px; min-height:340px; height:auto !important; height:340px; float:left; padding:17px 19px 21px 19px;
}

.lightbox-homemade .lightbox-container .left-pane .info-box {
	width:269px; height:auto; margin:auto;
}

.lightbox-homemade .lightbox-container .left-pane .info-box .lightbox-panel {
	width:269px; height:auto; float:left; display:block; padding:0px 0px 0px 0px; position:relative;
}

.lightbox-homemade .lightbox-container .left-pane .info-box .lightbox-panel h1 {
	font-size:11px; font-weight:100; line-height:14px; color:#f78f1e; padding:3px 0px 1px 0px; width:269px; height:auto; display:block; border-bottom:1px solid #333333;
}

.lightbox-homemade .lightbox-container .left-pane .info-box .lightbox-panel p {
	font-size:11px; font-weight:100; line-height:14px; color:#ffffff; margin:0px; padding:4px 0px 4px 0px; width:269px; height:auto; display:block; 
}

.lightbox-homemade .lightbox-container .left-pane .info-box .lightbox-panel .footer-link {
	width:269px; height:18px;  border-top:1px solid #333333; background:url(../Images/layout/plus.gif) 0px 2px no-repeat;
}

.lightbox-homemade .lightbox-container .left-pane .info-box .lightbox-panel .footer-link#minus {
	background:url(../Images/layout/minus.gif) 0px 2px no-repeat;
}

.lightbox-homemade .lightbox-container .left-pane .info-box .lightbox-panel .footer-link a {
	font-size:11px; font-weight:100; line-height:14px; color:#ffffff; margin:0px; padding:2px 7px 1px 20px; width:242px; height:auto; display:block; 
}

.lightbox-homemade .lightbox-container .left-pane .info-box .lightbox-panel .footer-link a:hover {
	color:#999999; 
}

	
		html {
			overflow:hidden; overflow-y:auto;
		}
		
		* { margin: 0; padding: 0 }
		/* I've used a hard CSS reset above, but you should consider a more sophisticated reset, such as this one: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
		
		body {
		}
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			width: 100%;
			position: relative;
			margin: 0px;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 50px; height: 20px; background: #fff; overflow: hidden;}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			/* border: 5px solid #39c; this is the border. should have the same value for the links */
			margin: auto;
			/* width: 700px; Also specified in  .stripViewer .panelContainer .panel  below */
			height: 400px;
			clear: both;
}
		
		.stripViewer#higher { /* This is the viewing window */
			height:auto !important;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 1000% !important;
			list-style-type: none;
			-moz-user-select: none; /* Stops the panels from highlighting/selecting, which I found problematic in Firefox. Also stops the CSS from validating though. Oh well. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left; height:100%; width:10%;
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding:0px; width:899px; margin:auto;
		}
		
		.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
			margin: auto;
		}
		
		.stripNav ul { /* The auto-generated set of links */
			list-style: none;
		}
		
		.stripNav ul li {
			float: left;
			margin-right: 2px; /* If you change this, be sure to adjust the initial value of navWidth in slideviewer.js */
		}
		
		.stripNav a { /* The nav links */
			font-size: 10px;
			font-weight: bold;
			text-align: center;
			line-height: 32px;
			background: #c6e3ff;
			color: #000;
			text-decoration: none;
			display: block;
			padding: 0 15px;
		}
		
		.stripNav a:hover {
			background: #9cf;
		}
		
		.stripNav a.current {
			background: #39c;
			color: #fff;
		}
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 40px;
			width: 40px;
		}
		
		.stripNavL {
			left: 0;
		}
		
		.stripNavR {
			right: 0;
		}
		
		.stripNavL {
			background: url("images/arrow-left.gif") no-repeat center;
		}
		
		.stripNavR {
			background: url("images/arrow-right.gif") no-repeat center;
		}