/* Primary stylesheet for screen based browsing */

/***** import reset css *****/
@import url(meyer-reset.css);

/***** site generics *****/
	html {font-size: 100.01%; background: #e6e6e6 url(stripedBknd.gif) repeat;}
	body { font: .7em arial, helvetica, verdana, sans-serif; background: url(headerBknd.gif) repeat-x; color: #27292c; padding: 0 15px; }
	a, a:visited { color: #437aa2; font-weight: bold; text-decoration: none; }
	a:hover {background-color: #437aa2; color: #fff; border:none;}
	a img, a:visited img, a:hover img { border: none; }
	p { margin: 0 0 1em 1em; }
	a.imgLink {border: none; background:none;}
	em { font-weight: bold; font-style: italic;}	
	strong { font-weight: bold;}
	legend {display: none;}
	
	/* forms generics */
		form {display: inline;}
		input, textarea, select {border: 1px solid #c3c4c5;	font: 11px arial, helvetica, verdana, sans-serif; color: #27292c;}		
		input.text { padding-left: 2px; }
		input.radio, input.checkbox {border: none;}	
		input.button {background-color: #27292c; border-color: #27292c; color: #fff; font-weight: bold;}
		input.button:hover { background-color: #42454a;}

/***** layout by section*****/
	#container {width: 900px; margin: 0 auto; padding-top: 10px;}
	
	/* header */
	#header {position: relative; margin-bottom: 30px;}
	#header h1 a {background: url(free-screencast-logo-beta.gif) no-repeat; text-indent: -9999px; 
		display: block; width: 298px; height: 67px; 
	}
	
	/* sc nav */
	#scNav {}
		#scNav ol {position: absolute; right: 0px; top: -10px; background: url(navSeparator.gif) right no-repeat;}
		#scNav li {float: left; background: url(navSeparator.gif) left no-repeat;}
			#scNav a.tab {color: #fff; font-weight: bold; font-size: 1.4em; height: 73px; width: 6em; display: block; border: none; padding: 15px 6px 0;}
			#scNav a.tab:hover {padding: 13px 6px 2px; background: #4e5154 url(scNavActiveBknd.gif) repeat-x;}
			#scNav a.tab span {display: block; font-weight: normal; color: #777; font-size: .7em; line-height:1.2em;}
	
	/* main content */
	#castContent {font-size: 1.1em; background: #fff; border: 1px solid #ccc; line-height: 1.3em;
		width: 870px; min-height: 300px; float: right; padding: 10px 7px; margin-bottom: 15px;
	}

	#content {font-size: 1.1em; background: #fff; border: 1px solid #ccc; line-height: 1.3em;
		width: 640px; min-height: 300px; float: right; padding: 10px 7px; margin-bottom: 15px; 
	}
		/* screencast listing*/
		.scList {margin: 0 3px; color: #5F5F5F;}			
			.scList li { clear: left; padding: 10px 0; border-bottom: 1px solid #ccc; overflow: auto;}	
			.scList .thumbBlock {width:142px; float: left;}
				/*.thumbBlock a:hover {background-color: none;}*/
			.scList .contentBlock {width: 492px; float: left;}
			.scList .contentBlock .scTitle {overflow: hidden; height: 1em;}
			/*.scList li.alternate {background: #fff;}*/
			.scList h3 {padding: 4px 0 1px;}
			.scList a img { margin: 0 10px; border: 1px solid #ccc;}
			.scList a:hover img {border: 1px dotted #ccc;}
			.scList .scDescription { display: block; padding: 5px 0; color: #241F13; }
			
		/* content forms */
		#content form li {clear: left; padding: 3px 0;}
		#content form fieldset {margin: 10px 0;}
		#content form label {float: left; display: block; width: 100px; padding-right: 10px;}
		#content form input.text {float: left; display: block;}
		
		#resultCount {text-align: right; margin: -35px 0 20px;}
		#pagination {color: #5F5F5F; text-align: center; font-size: 1.2em; margin-top: 20px; font-weight: bold;	}
		#pagination em {font-style: normal; padding: 1px 5px; margin: 0 2px;}
		#pagination a { padding: 1px 5px; margin: 0 2px;}
			#pagination a:hover {background-color: #437aa2; color: #fff;}


	/* feature list */
    .featureList { list-style: circle; list-style-position: outside; margin-left: 2em; margin-bottom: 1em;}
    .featureList li { margin-top: .2em; margin-bottom: .2em; }


	/* sidebar */
	#sideBar {width: 230px; float: left; margin-bottom: 15px;}
		#sideBar div { background-color: #eee; border: 1px solid #ccc;
			padding: 10px 5px; margin-bottom: 15px; line-height: 1.2em;}
		
		#sideBar div#search { text-align: center;}
			#search input.text { width: 150px; }
			
		#sideBar div#sideNav a { font-size: 1.2em; line-height: 1.5em; border: none; margin-left: 10px;}
			div#sideNav a.sideNavActive {color: #27292c; padding-left: 10px; background: url(arrow-bullet-active.gif) no-repeat left center;}
			div#sideNav a.sideNavInactive {}
			div#sideNav a.sideNavInactive:hover {}
			
		#sideBar div#overview { padding: 10px; font-size: 1.2em; background: #ffe380 url(adBknd.gif) repeat-x; border: 1px solid #ffe380;}
			#overview span#getStartedSpacer {float: left; display: block; position: relative; height: 40px; width: 45px;}
			#overview a#getStarted {background: url(get-started-now.gif) no-repeat; text-indent: -9999px; display: block; height: 60px; width: 60px;
				position: absolute;	left: -20px; top: -20px; border: none;
			}

		#sideBar div#beta { padding: 10px; font-size: 1.2em;}
			#beta span#makeUsBetterSpacer {float: left; display: block; position: relative; height: 40px; width: 45px;}
			#beta a#makeUsBetter {background: url(make-us-better.gif) no-repeat; text-indent: -9999px; display: block; height: 60px; width: 60px;
				position: absolute;	left: -20px; top: -20px; border: none;
			}
            #beta div#makeUsBetterDiv { border: none; margin: 0 0 0 0; margin-bottom: 0; }

			#beta form {display: block; margin: 5px 0; text-align: right;}
				#beta input {margin: 0 0 3px;}
				#beta textarea {width: 100%; height: 200px;}
				#beta input.text {width: 100%;}
				#beta label {display: block; text-align: left; font-size: .9em; padding: 2px 0 0;}
	/* footer */
	#footer {clear: both; text-align: right; padding: 0 0 30px; font-weight: bold; }
		ol#siteNav, #siteNav li {display: inline;}
		#siteNav li { border-right: 1px solid #ccc; padding-right: 10px; margin-right: 10px;}


/***** specific styles *****/
h1 a, h1 a:visited, h1 a:hover { border: none; }
h2 {font-size: 1.5em; font-weight: bold; padding: 8px; margin: -10px -7px 10px; background: #eee;}
h3 {font-size: 1.3em; font-weight: bold; padding: 4px;}