/* 
-----------------------------------------------
	Global CSS
	Version: 1.0
----------------------------------------------- */



/* Base, Headers
----------------------------------------------- */
* {margin:0; padding:0;}  /* remove default padding/margins */

body {
	background-color: #3c3c3c;
	margin: 0;
	padding: 0;
	text-align:center;
	font-family: 'Lucida Sans Unicode', Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font: #ccc;
	line-height: 1.4em;
	background-image: url(../images/bkgd.gif);
	background-repeat: repeat-y;
	background-position: center;
} 
	
	
h2 {
 font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: white;
	margin: 28px 0 11px 0;
}	
a:focus { outline:none;}

/* Structure - Base
----------------------------------------------- */
#bodycontainer {
	margin:0 auto;
	padding: 0;
	width: 859px;
	text-align: left;
	background-color: #222222;
	background-image: url(../images/bkgd_content.gif);
	background-repeat: no-repeat;
}

#content {
	position: relative;
	width: 641px;
	float: right;
	text-align: left;
	margin: 0px 20px 40px 0;
	padding: 0;
	color: #ccc;
	z-index: 0;
}

#content p {
 margin: 14px 0 6px 0; 
}

/* margin hack for IE6 		*/
* html #content { margin: 144px 10px 40px 0; height: 480px }	

/* Content - Titles
----------------------------------------------- */
.title_home{
 display:block;  
	width:402px; 
	height:21px; 
	background:url(../images/title_home.gif) no-repeat; 
	padding: 0;
	margin: 0; 
}

.title_why{
 display:block;  
	width:133px; 
	height:21px; 
	background:url(../images/title_why.gif) no-repeat; 
	padding: 0;
	margin: 0; 
}

.title_features{
 display:block;  
	width:133px; 
	height:21px; 
	background:url(../images/title_features.gif) no-repeat; 
	padding: 0;
	margin: 0; 
}

.title_faq{
 display:block;  
	width:64px; 
	height:21px; 
	background:url(../images/title_faq.gif) no-repeat; 
	padding: 0;
	margin: 0; 
}

.title_screenshots{
	display:block;
	width:118px;
	height:21px;
	padding: 0;
	margin: 0;
	background: url(../images/title_screenshots.gif) no-repeat; 
	background-repeat: no-repeat;
}

.title_contact{
	display:block;
	width:113px;
	height:21px;
	padding: 0;
	margin: 0;
	background: url(../images/title_contact.gif) no-repeat; 
	background-repeat: no-repeat;
}

.title_credits{
	display:block;
	width:113px;
	height:21px;
	padding: 0;
	margin: 0;
	background: url(../images/title_credits.gif) no-repeat; 
	background-repeat: no-repeat;
}

.title_pageNotFound{
	display:block;
	width:153px;
	height:21px;
	padding: 0;
	margin: 0;
	background: url(../images/title_pageNotFound.gif) no-repeat; 
	background-repeat: no-repeat;
}

.title_systemError{
	display:block;
	width:153px;
	height:21px;
	padding: 0;
	margin: 0;
	background: url(../images/title_systemError.gif) no-repeat; 
	background-repeat: no-repeat;
}

/* Content - Screenshots
----------------------------------------------- */

.screenshots {
 width: 273px; 
	float: left;
	margin: 12px 0;
	background: #2f2d30;	
	padding: 3px;
}

.extraPad {
 margin-left: 25px; 
}

.screenshotsOutline { border: 1px solid #585858; margin: 0; padding: 0 }  

.screenshotsText {
 margin: 6px;
}	

.screenshotsText img {
 float: right;
	padding: 0 3px 0 4px;
}
	
/* Structure - Sidebar
----------------------------------------------- */
#sidebar {
	float: left;
	width: 185px;
	margin: -1px 0 0 0;
	padding: 0;
}

.sideTitle_contact {
	display:block;
	width:185px;
	height:17px;
	background:url(../images/sidebar_contact.gif);
	padding: 0;
	margin: 0;
}

.sideTitle_testimonials {
	display:block;
	width:185px;
	height:17px;
	background:url(../images/sidebar_testimonials.gif);
	padding: 0;
	margin: 0;
}

.sideBox {
	background: #2c2a2c;
	width:195px;
	margin: 10px 0 20px 0;
	padding: 0;
}

.sideBox p {
 padding: 2px 17px;
	margin: 10px 0;
	font-size: 11px;
	color: #999;
}

.sideBox img {
 padding: 0px 17px;
	margin: 4px 0 10px 0;
	font-size: 11px;
	color: #999;
}

.sideBoxBottom { /* rounded edge box bottom */
	margin: -2px 0 0 0;
 padding: 0;
	background: #222 url(../images/sidebarBox_bottom.gif) no-repeat;
}

#logo {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 200px;
	height: 154px;
	background-image: url(../images/zowie_logo.gif);
}

#logo a { display:block; width:215px; height:154px; }

/* Structure - Footer, Credits
----------------------------------------------- */
#footer {
 height: 144px;
	background-image: url(../images/bkgd_footer.gif);
	background-repeat: no-repeat;
	padding: 15px 12px 0 12px;
	margin: 0;
	color: #999;
	font-size: 11px;
}

#footer p {
 margin: 0; padding: 0;
}

.footerTitle_what {
 display:block;  
	width:268px; 
	height:16px; 
	background:url(../images/footer_what.gif); 
	padding: 0;
	margin: 0 0 10px 0; 
}

.footerTitle_ngx {
 display:block;  
	width:102px; 
	height:16px; 
	background:url(../images/footer_ngx.gif); 
	padding: 0;
	margin: 0 0 10px 0; 
}

/* three footer columns */
.column1 {
 float: left;
	width: 200px;
	padding: 0 0 0 3px;
	margin: 0;
	border-right: 1px solid #464646;
}

.column2 {
 float: left;
	width: 381px;
	padding: 0 10px 0 20px;
 height: 112px;	
}

.column2 p {
	width: 376px;
}

.column3 {
 float: left;
	border-left: 1px solid #464646;
	width: 185px;
	padding: 0 10px 0 20px;
 height: 112px;		
}

#footlinks ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
	line-height: 1.4em;
	}

#footlinks li { margin: 0; padding: 0;}

#footlinks a {
 display: block;
 padding: 0 0 0 20px;
 width: 180px;
 background-image: url(../images/arrow_bkgd.gif);
 margin: 0;
 height: 16px;
 
}

#footlinks a:link, #navlist a:visited {
 color: #EEE;
 text-decoration: none;
}

#footlinks a:hover {

 background-image: url(../images/arrow_bkgd_down.gif);
 width: 180px;
 color: #fff;
 padding: 0 0 0 20px;
 margin: 0;
}

#credit {
 font-size: 10px;
	float: left;
	padding: 4px 0 25px 0;
	margin: 0 20px 0 0;
	color: #666;
}

/* Citrus / NGX logos */

ul#footer_icons { padding: 0; margin: 0; list-style: none; margin-top: 0px; float: right;  }
	ul#footer_icons li { float: left; position: relative; overflow: visible; }
	 li.icons { height: 45px; font-family: Arial, Helvetica, San-serif; overflow: visible; }
		li.icons span { position: absolute; left: -9999px; font-size: small; }
		li.icons a { display: block; height: 45px; border: 0; background: url(../images/footer_icons.gif) no-repeat; }
 	li.icons ul	{ display: none; position: absolute; border: solid 1px #bcbcbc; margin: 0; padding: 0px; width: 130px; height: auto; top: 50px; left: 1px; background: #b5c2cd; list-style: none; } /* second-level lists */
	 li.icons>ul	{ top: 50px; left: 1px; } /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
 	li.icons ul li { display: block; float: none; position: relative;	border-bottom: solid 1px #728899; padding: 0; width: 100%; }
	 li.icons ul li a { background-image: none; background-color: transparent; display: block; float: none; padding: 4px 7px; margin: 0; height: auto;	text-decoration: none; text-align: left; }
		li.icons ul li a:link		{  }
		li.icons ul li a:visited	{  }
		li.icons ul li a:hover	{ background-color: #8c9193; color: #fff;}
		li.icons ul li a:active	{  }
 	li:hover ul, li.over ul { display: block; }

	 li#citrus	 { width: 73px; }
	 li#ngx { width: 50px; }

	li#citrus a:link, li#citrus a:visited	{ background-position: -0px 0px; }
	li#ngx a:link, li#ngx a:visited	{ background-position: -73px 0px; }

	li#citrus a:hover, li#citrus a:active	{ background-position: -0px -45px }
	li#ngx a:hover, li#ngx a:active	{ background-position: -73px -45px }


.logoSml { 
 margin: 0 0 -12px 0px;
	border: none;
} 

/* Navigation
----------------------------------------------- */
#navbar {
 position:relative;
	top: 67px;
	left:0px;
	float:left;
	display:block;
	width:618px;
	padding:0;
	margin: 0;
	border:solid 0px; 
	z-index: 0;
}

#nav { }
	#nav li {list-style: none; margin: 0; padding: 0; display: inline;}
	#nav li a:link, #nav li a:visited {display: block; position: absolute; top: 0; height: 34px;}
	#nav li a:hover {background: transparent;}
	#nav li a#home-nav {left: 0; width: 82px; }
	#nav li a#why-nav {left: 82px; width: 106px;}
	#nav li a#features-nav {left: 207px; width: 106px;}
	#nav li a#faq-nav {left: 313px; width: 74px;}
	#nav li a#screenshots-nav {left: 387px; width: 129px;}
	#nav li a#contact-nav {left: 516px; width: 130px;}

	#nav li a:link span, #nav li a:visited span  {
	display: block; 
	position: absolute; 
	top: 0px;  	
	background: url(../images/nav.gif); 
	background-repeat: no-repeat; 
	overflow: hidden; 
	font-size: 1px; 
	line-height: 1px; 
	color: #222; 
	height: 0; 
	padding: 34px 0 0 0; 
	cursor: hand 
}
	
	#nav li a#home-nav span {background-position: 0 0; width: 82px; }
	#nav li a#why-nav span {background-position: -82px 0; width: 125px; }
	#nav li a#features-nav span {background-position: -207px 0; width: 106px; }
	#nav li a#faq-nav span {background-position: -313px 0; width: 74px; }
	#nav li a#screenshots-nav span {background-position: -387px 0; width: 129px; }
	#nav li a#contact-nav span {background-position: -516px 0; width: 130px; }

	#nav li a#home-nav:hover span {background-position: 0 -34px; }
	#nav li a#why-nav:hover span {background-position: -82px -34px; }
	#nav li a#features-nav:hover span {background-position: -207px -34px; }
	#nav li a#faq-nav:hover span {background-position: -313px -34px; }
	#nav li a#screenshots-nav:hover span {background-position: -387px -34px; }
	#nav li a#contact-nav:hover span {background-position: -516px -34px; }		

	#nav li a#home-nav.active span {background-position: 0px -34px; }
	#nav li a#why-nav.active span {background-position: -82px -34px; }
	#nav li a#features-nav.active span {background-position: -207px -34px; }
	#nav li a#faq-nav.active span {background-position: -313px -34px; }
	#nav li a#screenshots-nav.active span {background-position: -387px -34px; }
	#nav li a#contact-nav.active span {background-position: -516px -34px; }


/* Links
----------------------------------------------- */

	.column1 a:link   { text-decoration: none; color: #dfdfdf; }
	.column1 a:visited { text-decoration: none; color: #dfdfdf; }
	.column1 a:active  { text-decoration: none; color: #dfdfdf; }
	.column1 a:hover  { text-decoration: none; color: #fff;}

	.column2 a:link, .column3 a:link     { text-decoration: none; color: #999; border-bottom: 1px solid #999; }
	.column2 a:visited, .column3 a:visited{ text-decoration: none; color: #999; border-bottom: 1px solid #999; }
	.column2 a:active, .column3 a:active  { text-decoration: none; color: #999; border-bottom: 1px solid #999;}
	.column2 a:hover, .column3 a:hover  { text-decoration: none; color: #fff; border-bottom: 1px solid #FFB400;  }
	
	#credit a:link     { text-decoration: none; color: #666; border-bottom: 1px solid #666; }
 #credit a:visited { text-decoration: none; color: #666; border-bottom: 1px solid #666; }
 #credit a:active  { text-decoration: none; color: #666; border-bottom: 1px solid #666;}
 #credit a:hover   { text-decoration: none; color: #fff; border-bottom: 1px solid #FFB400;  }

	#sidebar p a:link     { text-decoration: none; color: #999; border-bottom: 1px solid #999; }
	#sidebar p a:visited{ text-decoration: none; color: #999; border-bottom: 1px solid #999;  }
	#sidebar p a:active  { text-decoration: none; color: #999; border-bottom: 1px solid #999;  }
	#sidebar p a:hover   { text-decoration: none; color: #fff; border-bottom: 1px solid #FFB400; } 
	
	#content a:link    { text-decoration: none; color: #ccc; border-bottom: 1px solid #ccc; }
	#content a:visited { text-decoration: none; color: #ccc; border-bottom: 1px solid #ccc;  }
	#content a:active  { text-decoration: none; color: #ccc; border-bottom: 1px solid #ccc;  }
	#content a:hover   { text-decoration: none; color: #fff; border-bottom: 1px solid #FFB400;  }
	
 a img {border:none;}
	
	
/* Forms
----------------------------------------------- */
#contactForm { 
 float: right;
	font-size: 11px;
	margin-top: -2px;

	
}

.formfield { 
 background-color:#222; 
	border:0; width:182px; 
	height:18px; 
	color: #ccc; 
	font-family: 'Lucida Sans Unicode', Arial, Verdana, Helvetica, sans-serif; 
	font-size: 11px;
}

textarea { 	font-family: 'Lucida Sans Unicode', Arial, Verdana, Helvetica, sans-serif; font-size: 11px; color: #ccc; width: 182px;}

.comments {height:75px; border: 0; background: #222 } 
.required { color:#59b400; padding-right: 5px;}
.formlabel { width: 100px; }

.requiredNotice { font-size: 10px; color: #999 }

/* Lists
----------------------------------------------- */

#content ul  { 
 padding-top: 10px; 
	margin: 10px 0 0px 20px;
}

#content ul li { 
 list-style:url(../images/bullet_arrowOrange.gif);
	margin: 0;
}

#content ul li ul { 
	font-size: 11px;
	padding: 0; margin: 5px 0 20px 40px;
}

#content ul li ul li { 
 list-style:url(../images/bullet_arrowGreen.gif);
}


/* Standard 
----------------------------------------------- */
.linkedImage  {
 margin: 0; padding: 0; border: 0; 
}

.hide { display: none }

hr { display: none }

img { border: 0 }



img
{
	border: none;
}



/* Light Box */
#ImageBoxOverlay
{
	background-color: #000;
	
}
#ImageBoxCaption
{
	
background-color: transparent;
	
	padding-top:5px;
	color: #fff;
	border-left:solid 5 #FC0;
	height:100px;
}
#ImageBoxContainer
{
	width: 250px;
	height: 250px;
	background-color: #FFF;
	border-bottom:solid 2px #fc0;


	
}
#ImageBoxCaptionText
{
	font-weight: bold;
	padding-bottom: 5px;
	font-size: 13px;
	color: #fff;
	width:350px;
	
	
}
#ImageBoxCaptionImages
{
	margin: 0;
	
}
#ImageBoxNextImage
{
    width:30px;
	background-image: url(../images/spacer.gif);
	background-color: transparent;
	padding-left:1px;
}
#ImageBoxPrevImage
{
	background-image: url(../images/spacer.gif);
	background-color: transparent;
}
#ImageBoxNextImage:hover
{
	background-image: url(../images/next_green.gif);
	background-repeat:	no-repeat;
	background-position: right top;
}
#ImageBoxPrevImage:hover
{
	background-image: url(../images/prev_green.gif);
	background-repeat:	no-repeat;
	background-position: left top;
}

    /** Site credit table **/
    #content .creditTable
    {
        border:0;
    }		

    #content .creditTable td
    {
        vertical-align:middle;
    }
    
    #content .creditTable td a , #content .creditTable td a:link , #content .creditTable td a:hover ,
    #content .creditTable td a:visited 
    {
        border:0;
        background:none;
    }
				
img, div {
} /* png fix */