@charset "utf-8";
/* CSS Document */

body
{
	/*font-family:Georgia, "Times New Roman", Times, serif;*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:75%;
	background-image:url(../images/bg.jpg);
	background-position:top left;
	color:#FFFFFF;
	padding:0px;
	margin:0px;
}

html
{
	
}

.clear-both
{
	clear:both;
	font-size:1px;
	line-height:1px;
	height:1px;
}

.ie-hide
{
	_display:none;
}

.float-left
{
	float:left;
}

.float-right
{
	float:right;
}

.pad-10-right
{
	padding-right:10px;
}

a img
{
	border:none;
	outline:none;
}

p
{
	padding:0px;
	margin:0px;
	padding-bottom:8px;
}

h1,h2,h3,h4,h5
{
	margin:0px;
	padding:0px;
	font-size:100%;
}

.hide
{
	display:none;
}

.show
{
	display:block;
}

.smalltext
{
	font-size:80%;
}

#ubercontainer
{
	width:100%;
	position:relative;
}

#container
{
	width:750px;
	margin:auto;
	margin-top:50px;
}

#header
{
	width:100%;
	position:relative;
	height:50px;
}

#header img
{

}

#header .logo
{
	width:220px;
	height:46px;
	float:left;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/logo-home.png",sizingMethod="scale");
}

#header .logo a
{
	display:block;
	width:220px;
	height:46px;
	outline:none;
}

#header .strapline
{
	display:block;
	position:absolute;
	top:14px;
	left:175px;
	letter-spacing:1px;
}

#header h1.seo-strapline,
#header span.seo-strapline
{
	display:block;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:140%;
	font-weight:normal;
	letter-spacing:-1px;
	padding-left:10px;
	margin-top:20px;
}

/*navigation*/

#nav-container
{
	position:absolute;
	top:100px;
	background-color:#292929;
	height:97px;
	right:0px;
	z-index:1000;
}

#nav
{
	position:relative;
}

#nav div
{
	width:200px;
	padding:8px 0px 8px 0px;
	overflow:hidden;
}

#nav-container img
{
	position:absolute;
	top:0px;
	left:-33px;
	cursor:pointer;
}

#nav ul
{
	padding:0px;
	padding-left:8px;
	margin:0px;
	list-style-type:none;
}

#nav ul li
{
	_width:200px;
}

#nav ul li a
{
	color:#FFFFFF;
	text-decoration:none;
	font-size:140%;
	font-weight:normal;
	letter-spacing:-1px;
	padding:4px 6px;
	display:block;
	outline:none;
}

#nav ul li a:hover
{
	background-color:#363636;
}

/*end of navigation*/

#moving-boxes-container
{
	position:relative;
}

.home-box
{
	width:436px;
	margin-bottom:3px;
}

.home-box-wide
{
	width:636px;
	margin-bottom:3px;
}

#moving-boxes-container .home-box
{
	top:0px;
	
	/*the styles we want when JS is on*/
	/*position:absolute;*/
	
	/*normal when JS is off*/
	position:relative;
	
}

.home-box-top
{
	background-image:url(../images/home-box-top.png);
	background-repeat:no-repeat;
	background-position:top left;
	width:436px;
	height:15px;
	_background-image:none !important;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/home-box-top.png",sizingMethod="scale");
}

.home-box-wide .home-box-top
{
	background-image:url(../images/home-box-top-wide.png);
	width:636px;
}

.home-box-bottom
{
	background-image:url(../images/home-box-bottom.png);
	background-repeat:no-repeat;
	background-position:top left;
	width:436px;
	height:13px;
	_background-image:none !important;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/home-box-bottom.png",sizingMethod="scale");
}

.home-box-wide .home-box-bottom
{
	background-image:url(../images/home-box-bottom-wide.png);
	width:636px;
}

.home-box-content
{
	background-image:url(../images/home-box-bg.png);
	background-repeat:repeat-y;
	padding:5px 16px 2px 16px;
	line-height:1.6em;
	
	_background-image:none !important;
	_border-left:2px solid #393939;
	_border-right:2px solid #393939;
	_background-color:#000000;
}

.home-box-content ul
{
	list-style-type:none;
	padding:0px;
	margin:0px;
}

.home-box-content ul li
{
	margin:5px 0px 8px 0px;
}

.home-box-wide .home-box-content
{
	background-image:url(../images/home-box-bg-wide.png);
}

.home-box-content h1, 
.home-box-content h2
{
	font-size:130%;
	padding-bottom:6px;
	color:#FCB040;
	letter-spacing:-1px;
	font-weight:normal;
}

.home-box-content h1
{
	font-size:140%;
}

.home-box-content h2
{
	padding-top:8px;
	padding-bottom:4px;
}

h1.tutorial-title,
h2.tutorial-title
{
	
}

.home-box-content h3
{
	font-size:110%;
	padding-bottom:6px;
	color:#FCB040;
	font-family:Tahoma, Arial;
}

.home-box-content a
{
	color:#FCB040;
	text-decoration:none;
	outline:none;
}

.home-box-content a:hover
{
	color:#D67601;
	text-decoration:none;
}

.home-box.off-left
{
	margin-left:-1500px;
}

.home-item
{
	font-family:Arial, Helvetica, sans-serif;
	clear:both;
	margin-bottom:30px;
}

.home-item img
{

}

.home-item .latest-tutorial-img
{
	width:110px;
	height:110px;
	float:left;
	margin-right:20px;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/latest-tutorial.png",sizingMethod="scale");
}

.home-item .more-tutorials-img
{
	width:110px;
	height:110px;
	float:left;
	margin-right:20px;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/more-tutorials.png",sizingMethod="scale");	
}

.home-item .tag-cloud-img
{
	width:110px;
	height:110px;
	float:left;
	margin-right:20px;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/tag-cloud.png",sizingMethod="scale");
}

.home-item h2 a
{
	display:block;
	padding-top:20px;
	font-size:140%;
	letter-spacing:-1px;
	font-weight:normal;
	color:#FBC15D;
	text-decoration:none;
	outline:none;
}

.home-item h2 a:hover
{
	color:#FE9F18;
}

.home-item p
{
	display:block;
	padding-top:2px;
}

.home-item ul
{
	padding:0px;
	margin:0px;
	padding-top:20px;
	list-style-type:none;
	padding-left:130px;
}

.home-item ul li
{
	margin-bottom:3px;
}

.home-item ul li a
{
	display:block;
	font-size:130%;
	letter-spacing:-1px;
	font-weight:normal;
	color:#FBC15D;
	text-decoration:none;
}

.home-item ul li a:hover
{
	color:#FE9F18;
}

.home-item ul.tagcloud
{

}

.home-item ul.tagcloud li
{
	display:inline !important;
	margin-right:15px;
	line-height:2em;
}

.home-item ul.tagcloud li a
{
	display:inline;
}


.home-item ul.tagcloud li.cloud-10 a
{
	font-size:110%;
}

.home-item ul.tagcloud li.cloud-20 a
{
	font-size:120%;
}

.home-item ul.tagcloud li.cloud-30 a
{
	font-size:130%;
}

.home-item ul.tagcloud li.cloud-40 a
{
	font-size:140%;
}

.home-item ul.tagcloud li.cloud-50 a
{
	font-size:150%;
}

.home-item ul.tagcloud li.cloud-60 a
{
	font-size:160%;
}

.home-item ul.tagcloud li.cloud-70 a
{
	font-size:170%;
}

.home-item ul.tagcloud li.cloud-80 a
{
	font-size:180%;
}

.home-item ul.tagcloud li.cloud-90 a
{
	font-size:190%;
}

.home-item ul.tagcloud li.cloud-100 a
{
	font-size:200%;
}


/*websites list*/

a img.websites
{
	margin-right:13px;
	margin-top:6px;
	margin-bottom:6px;
}

a img.websites-last
{
	margin-right:0px;
}

/*websites box*/

#website-scroll-container
{
	position:relative;
	
	/*what I want with JS on*/
	/*margin-top:243px;*/
	
	/*what gets set with JS off*/
	margin:0px;
}

.website-box
{
	width:436px;
	margin-bottom:3px;
}

#website-scroll-container .website-box
{
	top:0px;
	right:114px;
	
	/*what I want with JS on*/
	/*position:absolute;*/
	
	/*what happens with JS off*/
	position:relative;
	left:0px;
}

.website-box-top
{
	background-image:url(../images/home-box-top.png);
	background-repeat:no-repeat;
	background-position:top left;
	width:436px;
	height:15px;
}

.website-box-bottom
{
	background-image:url(../images/home-box-bottom.png);
	background-repeat:no-repeat;
	background-position:top left;
	width:436px;
	height:13px;
}

.website-box-content
{
	background-image:url(../images/home-box-bg.png);
	background-repeat:repeat-y;
	padding:5px 16px 2px 16px;
	line-height:1.6em;
}

.website-box h2
{
	font-size:130%;
	padding-bottom:6px;
	color:#FCB040;
	font-family:Tahoma, Arial;
}

.website-box.off-left
{
	left:-1500px;
}

/************* INTERNAL STYLES *************/

.internal #moving-boxes-container .home-box
{
	position:relative !important;
	margin-top:2px;
}

.internal #moving-boxes-container .hider
{
	float:right;
	margin-top:-8px;
}

span.datetime
{
	font-size:90%;
}

#downloadbox
{
	background-image:url(../images/badge.png); 
	background-repeat:no-repeat;
	width:128px; 
	height:130px;
	position:absolute;
	top:215px;
	right:-95px;
	_background-image:none;
}

#downloadbox div
{
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/badge.png",sizingMethod="scale");
	width:128px; 
	height:130px;
}

#downloadbox a
{
	display:block;
	width:128px;
	height:130px;
	outline:none;
	position:relative; 
	z-index:1;
}

#viewdemobox
{
	background-image:url(../images/badge2.png); 
	background-repeat:no-repeat;
	width:128px; 
	height:130px;
	position:absolute;
	top:100px;
	right:-95px;
	_background-image:none;
	
}

#viewdemobox div
{
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/badge2.png",sizingMethod="scale");
	width:128px; 
	height:130px;
}

#viewdemobox a
{
	display:block;
	width:128px;
	height:130px;
	outline:none;
	position:relative; 
	z-index:1;
}

#rssbox
{
	background-image:url(../images/badge3.png); 
	background-repeat:no-repeat;
	width:128px; 
	height:130px;
	position:absolute;
	top:-14px;
	right:-95px;
	_background-image:none;
	
}

#rssbox div
{
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/badge3.png",sizingMethod="scale");
	width:128px; 
	height:130px;
}

#rssbox img
{
	width:128px; 
	height:130px;
}

#rssbox a
{
	display:block;
	width:128px;
	height:130px;
	outline:none;
	position:relative; 
	z-index:1;
}

#tutorial-content-box .home-box-content
{
	padding-right:20px;
	font-size:110%;
}

/**** tag filtering for tutorials page ***/

h2.filter-tags
{
	font-size:130%;
	padding-bottom:6px;
	color:#FCB040;
	letter-spacing:-1px;
	font-weight:normal;
	padding-top:10px;
}

ul.filter-tags
{
	padding:0px;
	margin:0px;
	list-style-type:none;
	margin-bottom:15px;
}

ul.filter-tags li
{
	display:block;
	float:left;
	margin-right:15px;
	font-size:120%;
	cursor:pointer;
	padding:5px 8px;
	background-color:#2A2829;
	border:1px solid #666666;
} 

ul.filter-tags li.on
{

}