/* ############################################################### */
/* ### UNITYLABS.NET CSS PRIMARY DOCUMENT                      ### */
/* ### Copyright 2009 Unity Labs [ http://www.unitylabs.net ]  ### */
/* ############################################################### */


/* #################### MAIN LAYOUT CLASSES ###################### */
body
{
   background-color: #32373d;
   background-image: url('background.jpg');
   background-repeat: repeat-x;
   margin: 0px;
   border: 0px;
   padding: 0px;
}

#header
{
   /*width: 430px;*/
   width: 970px;
   height: 92px;
   margin-right: auto;
}

#menu
{
   width: 100%;
   height: 39px;
}

#menu-left
{
   width: 156px;
   height: 39px;
   float: left;
}

#menu-right
{
   width: 800px;
   float: left;
   height: 39px;
}

#footer
{
   width: 100%;
   float: left;
}

#footer-copyright
{
   height: 50px;
   float: left;
   width: 500px;
   background-image: url('footer-logo.jpg');
   background-repeat: no-repeat;
   background-position: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #f7f7f7;
}

#footer-copyright p
{
   padding-top: 24px;
   padding-left: 98px;
   margin: 0px;
}

#footer-links
{
   float: right;
   width: 400px;
   text-align: right;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #f7f7f7;
   padding-top: 10px;
}

#footer-links a
{
   color: #f7f7f7;
   text-decoration: none;
}

#footer-links a:hover
{
   color: #ffffff;
   text-decoration: underline;
}

#footer-copyright a
{
   color: #f7f7f7;
   text-decoration: none;
}

#footer-copyright a:hover
{
   color: #ffffff;
   text-decoration: underline;
}


/* ####################### Menu Hover Classes ################### */
#menu-right ul
{
   margin: 0px;
   padding: 0px;
}

#menu-right li ul 
{
    position: absolute;
	display: none;
	left: 0;
	top:39px;
    padding:1px 0 0;
}

#menu-right ul ul li a {
	text-decoration: none;
	text-align: left;
	color: #8e7758;
    width: 100%;
	height: 39px;
	margin: 0 0px;
	background-color: #f8f4e9;
	background-image: url('drop-bg.jpg');
}


#menu-right ul ul li a:hover {
	text-decoration: none;
	color: #97626a;
    width: 100%;
	height: 39px;
	margin: 0 0px;
	background-color: #f8f4e9;
	background-image: url('drop-bg-over.jpg');
}


#menu-right li:hover ul, li.over ul 
{ 
   display: block; 
   background-color: #000000;
}


#menu-right li ul li {
    width:100%;
}

#menu-right a {
    display: block;
}

#menu-right li {
    list-style:none;
    /*display:inline;*/
	float: left;
	margin: 0px;
}
#menu-right a {
    color:#000000;
    text-decoration:none;
	height: 39px;
	float: left;
}
#menu-right a:hover { 
    background-position:0 -39px;
}
#menu-right a:active {
    background-position:0 0px;
}
#navbar 
{
    height:39px;
}


#taba {
   background:url('nav-articles.jpg') no-repeat;
   width: 111px;
}
#tabb {
   background:url('nav-tutorials.jpg') no-repeat;
   width: 116px;
}
#tabc {
   background:url('nav-reference.jpg') no-repeat;
   width: 135px;
}
#tabd {
   background:url('nav-books.jpg') no-repeat;
   width: 95px;
}
#tabe {
   background:url('nav-library.jpg') no-repeat;
   width: 104px;
}
#tabf {
   background:url('nav-forums.jpg') no-repeat;
   width: 106px;
}
#tabg {
   background:url('nav-contact.jpg') no-repeat;
   width: 115px;
}

.displace 
{
   position: absolute;
   left: -5000px;
}



/* ####################### Content Layout Classes ################### */
#topbar
{
   width: 100%;
   float: left;
   height: 49px;
   background-image: url('top.png');
}

#top-left
{
   height: 49px;
   width: 185px;
   background-image: url('left-top.png');
   background-repeat: repeat-x;
   float: left;
}

#top-left-inner
{
   height: 49px;
   width: 2px;
   background-image: url('left-top-inner.png');
   background-repeat: no-repeat;
   float: left;
}

#left-bar
{
   width: 187px;
   float: left;
   height: 600px; /* temp height for small categories */
}

#content-window
{
   background-color: #eff2f3;
   background-image: url('left-bar-bg.png');
   background-repeat: repeat-y;
   width: 100%;
   float: left;
}

#content-area
{
   float: left;
   /* width: 70px; */
   width: 630px;
}

#right-bar
{
	float: left;
	width: 160px;
}

#bottombar
{
   width: 100%;
   float: left;
   height: 44px;
   background-image: url('bottom.png');
}

#bottom-left
{
   height: 44px;
   width: 185px;
   background-image: url('left-bottom.png');
   background-repeat: repeat-x;
   float: left;
}

#bottom-left-inner
{
   height: 44px;
   width: 2px;
   background-image: url('left-bottom-inner.png');
   background-repeat: no-repeat;
   float: left;
}


/* ####################### Memberbox Component Classes ################### */
#memberbox
{
   width: 180px; 
   margin-left: auto;
   margin-right: auto;
}

#memberbox-top
{
   width: 180px; 
   height: 26px; 
   float: left;
}
#memberbox-bg
{
   width: 180px; 
   background-image: url('components/lab-members-bg.jpg');
   background-repeat: repeat-y;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #f7f7f7;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 10px;
   padding-bottom: 6px;
}

#memberbox-signin
{
   width: 180px; 
   height: 22px; 
   float: left;
}

#memberbox-link-area
{
   width: 180px; 
   float: left;
}

#memberbox-link-area ul
{
   margin: 0px;
   padding: 0px;
}

#memberbox-link-area li ul 
{
    position: absolute;
	display: none;
	left: 0;
	top:22px;
    padding:1px 0 0;
}

#memberbox-link-area li:hover ul, li.over ul 
{ 
   display: block; 
   background-color: #000000;
}


#memberbox-link-area a {
    display: block;
}

#memberbox-link-area li {
    list-style:none;
    /*display:inline;*/
	float: left;
	margin: 0px;
}
#memberbox-link-area a {
    color:#000000;
    text-decoration:none;
	height: 22px;
	float: left;
}
#memberbox-link-area a:hover { 
    background-position:0 -22px;
}
#memberbox-link-area a:active {
    background-position:0 0px;
}
#memberbox-links
{
    height:23px;
}


#tab-signout {
   background:url('components/lab-members-signout.jpg') no-repeat;
   width: 180px;
}
#tab-signin {
   background:url('components/lab-members-signin.jpg') no-repeat;
   width: 180px;
}
#tab-usercp {
   background:url('components/lab-members-account.jpg') no-repeat;
   width: 180px;
}
#tab-messages {
   background:url('components/lab-members-messages.jpg') no-repeat;
   width: 180px;
}
#tab-purchases {
   background:url('components/lab-members-purchases.jpg') no-repeat;
   width: 180px;
}
#tab-cart {
   background:url('components/lab-members-cart.jpg') no-repeat;
   width: 180px;
}
#tab-signup {
   background:url('components/lab-members-signup.jpg') no-repeat;
   width: 180px;
}



.memberbox-displace 
{
   position: absolute;
   left: -5000px;
}

#memberbox-signup
{
   width: 180px; 
   height: 30px; 
   float: left;
}


/* ####################### CatMenu Component Classes ################### */
#catmenu
{
   width: 186px;
   float: left;
   margin-top: 25px;
}

#catmenu ul
{
   width: 186px;
   height: 28px;
   float: left;
   margin: 0px;
   padding: 0px;
}


#catmenu li ul 
{
    position: absolute;
	display: none;
	left: 0;
	top: 28px;
    padding:1px 0 0;
}


#catmenu li:hover ul, li.over ul 
{ 
   display: block; 
   background-color: #000000;
}


#catmenu li ul li {
    width:100%;
}

#catmenu a {
    display: block;
}

#catmenu li {
    list-style:none;
	float: left;
	margin: 0px;
}
#catmenu a {
    color: #ffffff;
    text-decoration:none;
	height: 22px;
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 6px;
	padding-left: 6px;
	text-shadow: 0px 1px 1px #000000;
}
#catmenu a:hover { 
    background-position:0 -28px;
}
#catmenu a:active {
    background-position:0 0px;
}

#catnav {
   background:url('components/catnav-bg.jpg') no-repeat;
   width: 186px;
}


/* ####################### Article Row Component Classes ################### */
#article-row
{
   float: left;
   width: 600px;
   padding-left: 15px;
}

#article-top
{
   width: 600px;
   float: left;
   height: 61px;
   background-image: url('components/article-top-bg.jpg');
   background-repeat: repeat-x;
}

#article-tl
{
   /*width: 779px;*/
   width: 589px;
   height: 61px;
   float: left;
   background-image: url('components/article-top-left.jpg');
   background-repeat: no-repeat;
   background-position: left;
}

#article-tl h1
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #37436e;
   margin-top: 15px;
   margin-left: 10px;
   margin-bottom: 0px;
}

#article-tl a
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #37436e;
   text-decoration: underline;
}

#article-tl a:hover
{
   color: #626ca1;
   text-decoration: underline;
}

#article-tl p
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   color: #818e9f;
   margin-top: 5px;
   margin-left: 10px;
}

#article-tr
{
   width: 11px;
   height: 61px;
   float: left;
   background-image: url('components/article-top-right.jpg');
   background-repeat: no-repeat;
}

#article-content
{
   width: 600px;
   float: left;
   background-image: url('components/article-content-bg.jpg');
   background-repeat: repeat-y;
}

#article-content td
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #343a49;
   padding-left: 10px;
}

#article-content p
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #343a49;
   padding-left: 10px;
   padding-right: 20px;
   margin-top: 2px;
   margin-bottom: 5px;
}

#article-content p li
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #343a49;
}

#article-content li
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #343a49;
}

#article-content ul
{
   margin-top: 0px;
   margin-bottom: 0px;
}

#article-bottom
{
   width: 600px;
   float: left;
   height: 42px;
   background-image: url('components/article-bottom-bg.jpg');
   background-repeat: repeat-x;
}

#article-br
{
   width: 12px;
   height: 42px;
   float: left;
   background-image: url('components/article-bottom-right.jpg');
   background-repeat: no-repeat;
}

#article-bl
{
   width: 588px;
   height: 42px;
   float: left;
   background-image: url('components/article-bottom-left.jpg');
   background-repeat: no-repeat;
   background-position: left;
}



/* ####################### Tutorial Row Component Classes ################### */
#tutorial-row
{
   float: left;
   width: 600px;
   padding-left: 15px;
}

#tutorial-top
{
   width: 600px;
   float: left;
   height: 61px;
   background-image: url('components/article-top-bg.jpg');
   background-repeat: repeat-x;
}

#tutorial-tl
{
   width: 589px;
   height: 61px;
   float: left;
   background-image: url('components/article-top-left.jpg');
   background-repeat: no-repeat;
   background-position: left;
}

#tutorial-tl h1
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #37436e;
   margin-top: 15px;
   margin-left: 10px;
   margin-bottom: 0px;
}

#tutorial-tl a
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #37436e;
   text-decoration: underline;
}

#tutorial-tl a:hover
{
   color: #626ca1;
   text-decoration: underline;
}

#tutorial-tl p
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   color: #818e9f;
   margin-top: 5px;
   margin-left: 10px;
}

#tutorial-tr
{
   width: 11px;
   height: 61px;
   float: left;
   background-image: url('components/article-top-right.jpg');
   background-repeat: no-repeat;
}

#tutorial-content
{
   width: 100%;
   float: left;
   background-image: url('components/article-content-bg.jpg');
   background-repeat: repeat-y;
}

#tutorial-content p
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #343a49;
   padding-left: 10px;
   padding-right: 20px;
}

#tutorial-bottom
{
   width: 600px;
   float: left;
   height: 42px;
   background-image: url('components/article-bottom-bg.jpg');
   background-repeat: repeat-x;
}

#tutorial-br
{
   width: 12px;
   height: 42px;
   float: left;
   background-image: url('components/article-bottom-right.jpg');
   background-repeat: no-repeat;
}

#tutorial-bl
{
   width: 588px;
   height: 42px;
   float: left;
   background-image: url('components/article-bottom-left.jpg');
   background-repeat: no-repeat;
   background-position: left;
}

#tutorial-bl p
{
   color: #000000;
   text-decoration:none;
   float: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
   padding-left: 10px;
}


/* ####################### Pagenav and Comments Component Classes ################### */
#pagenav
{
   width: 800px;
   height: 44px;
   float: left;
}

#pagenav_single
{
   width: 26px;
   height: 26px;
   float: right;
   background-image: url('components/pagenav/singlepage.jpg');
   background-repeat: no-repeat;
   margin-top: 10px;
}

#comments
{
   padding-top: 9px;
   padding-left: 15px;
   width: 60px;
   color: #000000;
   text-decoration:none;
   float: left;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
}

#comments a
{
   color: #000000;
   text-decoration:none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
}

#comments a:hover
{
   color: #000000;
   text-decoration:none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
}

#additional
{
   width: 200px;
   float: left;
   padding-top: 8px;
   padding-left: 25px;
   color: #000000;
   text-decoration: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
}

#additional a
{
   color: #000000;
   text-decoration: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
}

#additional a:hover
{
   color: #575d66;
   text-decoration: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
}

#pages
{
   width: 200px;
   float: left;
   text-align: right;
   padding-top: 8px;
}

#pages a
{
   color: #000000;
   text-decoration:none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #ffffff;
}

#pages a:hover
{
   color: #292c32;
   text-decoration:none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   text-shadow: 0px 1px 1px #dedfdf;
}

#tutorial-content h1
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: bold;
   color: #37436e;
   padding-left: 12px;
}

#tutorial-content li
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #343a49;
}

#tutorial-content ul
{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #343a49;
}



/* #################### LIBRARY CLASSES ###################### */
.tborder
{
	background: #D1D1E1;
	color: #000000;
	border: 1px solid #2d3238;
}
.tcat
{
	background: #a6abb1 url('http://www.unitylabs.net/community/ul_image/catstripbg.jpg') repeat-x top left;
	color: #e3e3e5;
	font: bold 12px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	padding-left: 20px;
	padding-top: 3px;
	height: 36px;
	text-shadow: 0px 1px 1px #000000;
}
.tcat a:link, .tcat_alink
{
	color: #e3e3e5;
	text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
	color: #e3e3e5;
	text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
	color: #ffffff;
	text-decoration: none;
}
.thead
{
	background: #ffffff url('http://www.unitylabs.net/community/ul_image/headstripbg.jpg') repeat-x top left;
	color: #565656;
	font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	height: 26px;
	text-shadow: 0px 1px 1px #ffffff;
}
.thead a:link, .thead_alink
{
	color: #565656;
	text-decoration: none;
}
.thead a:visited, .thead_avisited
{
	color: #565656;
	text-decoration: none;
}
.thead a:hover, .thead a:active, .thead_ahover
{
	color: #3b3b3b;
	text-decoration: none;
}

#alt1, #alt1Active
{
	background: #e8e8e8 url('http://www.unitylabs.net/community/images/maclite/alt1.jpg') repeat-x top left;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin-bottom: 5px;
}

#alt1Active a
{
   color: #487eaf;
}

#alt1Active a:hover
{
   color: #666666;
}

#alt1Active h1
{
   color: #487eaf;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
}

.alt2, .alt2Active
{
	background: #e8e8e8 url('http://www.unitylabs.net/community/images/maclite/alt1.jpg') repeat-x top left;
	color: #000000;
}
.smallfont
{
	font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}