/* Page Specific  Styles
	aStahl *12.Aug 2008 for Web Associates
	global.css: all major tags and commonly used classes
	content.css: general form, table and list styles
	text.css: headers w/ backgrounds
	
	page_specific.css:	styles that are only used on specific blocks 
				- Login
				- Register 
				- Dashboard 
				- general
				- splash
				- video (flash player area - not same as My Videos)
				- My Stuff
				- My Conversations
				- Community
				- My Videos (not 'video' which is the flash player area)
				
				- Dashboard page / Homepage - let's move these eventually.
				
	
-------------------- */




/* Dashboard - general
------------------------------ */

#dashboard #conversation-detail-spacer {
	height: 165px; 
	padding: 0px; 
	margin: 0px;
}

div#dashboard {
	margin: 10px;
	overflow: hidden;
	position:relative;
	width: 929px; 
} /* dashboard color is set in global! */

div#dashboard.padded { 
	padding: 28px; 
	width: 873px; 
}

div#dashboard.snug { padding:10px; width: 909px;}
#dashboard.logged-out .boxcontainer { margin: 50px; }

#dashboard div.spacer {
	position: relative;
	float: left;
	width: 5px;
	height: 100%;
	background: #c5c5c5 url(../images/bg_dashboard_border.png) repeat-x left top;
}
.box {
	position: relative;
	width: auto;
}
form.sign-in { margin-bottom:15px; }
#homepage-actions { overflow: hidden; }

/* Dashboard - Home */
#homepage div#dashboard {
	background: #this.scroll_elements.getChildren('li')this.scroll_elements.getChildren('li') url(../images/bg_dashboard_groups.png) repeat-x left top;
	color: #888;
}

/* Dashboard - Splash */
div.boxcontainer.two div.box#intro {
	width:325px;
	text-align: left;
	background-image: none;
	margin-top: 22px;
	margin-left: 22px;
	border-style: none;
	color: #ccc;
}
body#homepage.logged-out div#dashboard { background: #597583 }

.buttons {
	overflow:hidden;
	margin-top: 25px;
	margin-left: 10px;
}
#watch-demo {
	background: url(../images/buttons/btn_demo.gif) no-repeat;
	height: 31px;
	width: 125px;
	display: block;
	margin-right: 10px;
	float: left;
	margin-top: 6px;
}
#sign-up {
	background: url(../images/buttons/btn_signup.png);
	height: 43px;
	width: 141px;
	display: block;
	float: left;
}
/* Dashboard - Video */


#video-container img { border:2px solid #333333; }


h2#video-title { font-size:18px; }
body.video-playing #dashboard {/* this is the main  full width box */ }

#dashboard #my-stuff, 
#dashboard #welcome-screen {
	border-bottom: 1px solid #aeaeae;
}

/* Dashboard - My Stuff 
other pages use the same styles but overwrite widths. look for page styles. e.g. groups, community, etc.. */
#my-stuff {
	position: relative;
	float: left;
	width: 310px;
	height: auto;
	padding: 0;
	overflow: hidden;
	background-color: #dedede;
	color: #888;
}
#my-stuff h2.accordion {
	position: relative;
	font-size: 16px;
	margin: 0;
	min-height: 38px;
	overflow: hidden;
}
#my-stuff h2.accordion a {
	display: block;
	width: 100%;
	color: #888;
}
#my-stuff h2.accordion a:hover {color:#fff;text-decoration:none}

#my-stuff div.accordion {
	position: relative;
	overflow: hidden;
}

#my-stuff ul {
	margin: 0;
	overflow: hidden;
}
#my-stuff ul li a { color:#337096; }
#dashboard div.scrolling-list ul li {
	height:30px;
	padding: 15px 10px;
	background: #31485d url(../images/bg_listItem_divider.gif) repeat-x;
	margin: 0px;
	vertical-align:middle;
	color: #999;
}
#dashboard div.scrolling-list .selected ul li {
	height:30px;
	padding: 15px 10px;
	background: #1f2f3f url(../images/bg_listItemSelected_divider.gif) repeat-x;
	margin: 0px;
}
#my-inbox,
#my-groups, 
#my-conversations {
	position:relative;
	background: #d5d5d5 url(../images/bg_accordion.png) repeat-x left top;
	border-top: 1px solid #f8f8f8;
	color: #337096;
}
#dashboard .scrolling-list ul li span.latest-post {
	font-size: 11px;
	float: right;
	margin-right: 150px;
	margin-top: 5px;
}
#dashboard .scrolling-list ul li span.latest-post a {
	position: absolute;
	float: left;
	margin-left: 2px;
}
#my-conversations h2.accordion a {
	width:200px;
	padding-top: 7px;
}
#my-conversations h2.accordion a.selected {
	padding-top:5px;
	width:auto;
}
#my-conversation li { padding: 18px 0 35px !important; }
#my-conversation li a { text-decoration: none; }
#my-conversation li a:hover { text-decoration: underline; }
#dashboard .conversation-icon {
	display: block;
	position: relative;
	float: left;
	width: 40px;
	height: 30px;
	margin: 0;
	margin-right: 14px;
	text-decoration: none;
}
#dashboard a.conversation-icon:hover { text-decoration: none; }
#dashboard a.conversation-icon span.members {
	background: url(../images/bubbles/blue_bubble_sm.png) no-repeat;
	text-decoration: none;
}

/* My Stuff - numbered dots / spans */
/* #my-inbox span.sort-asc { background: url(../images/buttons/bg_selectedTALL_right.gif); }  no longer used after design change */
#my-stuff span {
	font-weight: normal;
	position: absolute;
	padding: 0 20px 0 0;
	text-align: center;
}
#my-stuff span.sort  {right:0; top:5px;}
#my-stuff span.sort  a {
	background: url(../images/buttons/btn_sort.gif) no-repeat;
	height: 31px;
	width: 50px;
	display: block;
}
#my-stuff span.sort a:hover {background-position:0 -31px;}
#my-groups ul li { position:relative; }
#my-stuff h2 a {	min-height: 30px;}
#my-groups .selected span.group-members { background: url(../images/buttons/bg_group_members_selected.gif) no-repeat right; }

/* Dashboard - Welcome Screen (as opposed to My Stuff)  
other pages use the same styles but overwrite widths. look for page styles. e.g. groups, community, etc.. */

#dashboard #welcome-screen .selected span { background: url(../images/buttons/bg_group_members_selected.gif) no-repeat right; }

#dashboard .hot-video {
	margin-top: 15px;
	position: absolute;
	bottom: 10px;
	width: 200px;
}
#dashboard .hot-video img { margin-right:10px; }
.title, .author {
	font-weight:bold;
}
#video-container {
	position: absolute;
	top: 21px; 
	left: 562px;   
	height: 374px;
	overflow: hidden;
	width: 364px;
	border: 2px solid #989898;
	float: right;
	z-index: 100;
}

#video-container #flashcontent {
	height: 274px;
	border-bottom:2px solid #989898;
}

/* #video-container #flashcontent img { border: 0 none; } */

#dashboard .hot-video {
	margin-top: 15px;
	color: #999;
	position: absolute;
	bottom: 10px;
	width: 200px;
}
#dashboard .hot-video h3 {
	margin: 0 0 5px;
	font-size: 14px;
	color: #7b7b77;
}
#dashboard .hot-video img { margin-right:10px; }
#dashboard .hot-video div.left {
	position: relative;
}
#dashboard .hot-video span.hot {
	top: -9px;
	right: 7px;
	width: 12px;
	height: 24px;
	background: url(../images/icons/hot.png) no-repeat;
}
/* My community  - this are all going to be replaced 
#my-community {
	width: 290px;
	padding:0;
	margin: 0;
	height: 610px;
}*/
/* setting My Community to an absolute height because the columns have internal scrollbars 
#dashboard #my-community .container { height: 480px; }
#dashboard #my-community ul, #dashboard #create-group ul, #dashboard #invite-members-list {
	height:auto;
	overflow:hidden;
	position: relative;
}*/

 /*#dashboard #invite-members-list { height:418px; } the internal uls should generally be this fixed height. in cases where there are more than one ul inside this colum, we can set height specifically. these will have internal scrollbars.
#my-community #my-community-container {
	width:auto;
	margin-right: 20px;
	padding: 10px 0 0;
	height: 600px;
	background: url(../images/bullets/hr.gif) repeat-x 0 560px;
}
#my-community #my-community-container div.container {
	padding:0;
	margin:0;
}
#my-community #my-community-container span.edit {
	height: 20px;
	width: 20px;
	margin: 0;
	padding: 0;
	right: 35px;
	text-indent: -9999px;
}
#my-community #my-community-container span.add { background: url(../images/buttons/add.gif) no-repeat 0 0; }
#my-community #my-community-container span.remove { background: url(../images/buttons/remove.gif) no-repeat 0 0; }
#my-community span.groups a, #my-community span.people a {
	padding-top:4px;
	display: block;
}
#my-community span.groups, #my-community span.people {
	position: static;
	margin-left: 8px;
	height: 25px;
	width: 75px;
	display: block;
	float: left;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 15px;
	padding:0;
	background: none;
	font-weight: bold;
}
#my-community span.selected { background: url(../images/buttons/bg_selected_sm_left.gif) no-repeat; }
#my-community span.selected a {
	background: url(../images/buttons/bg_selected_sm_right.gif) right top;
	display: block;
	margin-left: 8px;
	height: 21px;
	text-indent: -9px;
}
#my-community #my-groupsList, #my-community #my-peopleList {
	display:block;
	clear: both;
	height: 418px;
	position: relative;
	overflow: hidden;
}
body#community.welcome #create-group { text-align:center; }
#create-group {
	width: 620px;
	margin: 0;
	padding: 0;
}
#create-group #group-container {
	width: 600px;
	padding-top: 10px;
	background: url(../images/bullets/hr.gif) repeat-x 0 560px;
	height: 600px;
} 
 */
/* this was used to create the bottom border  - this is no longer used
#create-group .welcome { padding: 70px 0; }
.do-what {
	width: 340px;
	height: 150px;
	display: table;
	margin-right: auto;
	margin-left: auto;
}
.do-what p { text-align:left; }
.do-what span {
	background: url(../images/buttons/bg_selected_sm_left.gif) no-repeat;
	display: block;
	padding-left: 8px;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
.do-what span a {
	background: url(../images/buttons/bg_selected_sm_right.gif) no-repeat right;
	display: block;
	padding-top: 4px;
	padding-right: 8px;
	height: 22px;
	clear: right;
}
.new-group, .send-message { width: 160px; }*/


/* Create and Edit a Group 
 .new-group { margin-right:20px; }
#create-group h2 { margin-left: 0; }
#invite-members {
	background: #4d4d4d;
	padding: 10px;
	position: relative;
	height: 450px;
}
#invite-members ul { position:relative; }
#invite-members ul li {
	border-bottom:1px solid #999999;
	padding-bottom: 5px;
	position: relative;
	height: 20px;
	padding-top: 5px;
	vertical-align: middle;
	width: 525px;
	margin-right:20px;
}
#invite-members ul li.restore { color:#666; }
#invite-members ul li img.restore {
	-moz-opacity: 0.8;
	opacity: 0.8;
}
#invite-members ul li.invite-group { height:auto; }
#invite-members ul li.invite-group a {
	background: url(../images/bullets/arrow_right_gr.gif) no-repeat 0 2px;
	padding-left: 18px;
}
#invite-members li.invite-group li {
	height:22px;
	border:none;
	background: none;
	line-height: 18px;
	padding-top: 5px;
	padding-bottom: 0;
	width: 200px;
}
#invite-members li.invite-group li a img { top:5px; }
#invite-members .invite-group .expanded li a { background-image: none; }
#invite-members ul li.invite-group a.selected { background: url(../images/bullets/arrow_down_wh.gif) no-repeat 0 4px; }
#invite-members ul li img.icon {
	margin-right: 15px;
	margin-bottom: -10px;
	margin-left: 0;
	float: left;
}
#invite-members ul li a {
	display: inline;
	padding: 0;
}
#invite-members ul li img.remove {
	position: absolute;
	right: 5px;
}
#invite-members ul li.invite-group ul.expanded { width:200px; }
#invite-members ul li.invite-group ul.collapsed { display:none; }
#actions { margin-top:22px; }
*/

/* Dashboard - Small Video Scroller */
#sm-video-scroller {
	position: relative;
	width: auto;
	height: 97px;
	padding: 3px 4px;
	overflow: hidden;
	background-color: #567489;
	border: 1px solid;
	border-color: #7a92a3 #4d697d #2e4456;
	border-left: 0 none;
}
#sm-video-scroller h2 {
	position: relative;
	margin: 1px;
	font-size: 10px !important;
	color: #ccc !important;
	font-weight: normal;
}
#sm-video-scroller h2 span {
	position: absolute;
	right: 0;
}
#sm-video-scroller div.scroller {
	overflow: hidden;
	background-color: #34424d;
	border: 1px solid;
	border-color: #32414b transparent #47545f;
}
#sm-video-scroller div.scroller div.pad {
	position: relative;
	height: 65px;
	margin: 0 8px;
	overflow: hidden;
}
#sm-video-scroller ul {
	position: absolute;
	width: 200%;
	margin: 0;
	padding: 7px 0 0;
	overflow: hidden;
}
#sm-video-scroller .scrollbar.horizontal {
	position: relative;
	width: 354px;
}
li.video-thumb {
	position: relative;
	display: inline-block;
	float: left;
	height: auto !important;
	margin: 0 !important;
	padding-left: 0 !important;
	overflow: visible !important;
	background-image: none !important;
}
li.video-thumb a {
	position: relative;
	display: block;
	margin-right: 6px;
}
li.video-thumb img {
	border: 1px solid #222;
}
li.video-thumb img.viewed {
	opacity: 0.5;
	-moz-opacity: 0.5;
}

/* Icons
----------------------------------------*/
span.marker {
	position: absolute;
	display: inline;
	top: -6px;
	right: -6px;
	left: auto;
	bottom: auto !important;
	width: 18px !important;
	height: 18px !important;
	padding: 3px 0 0 1px !important;
	overflow: hidden;
	color: #fff;
	font-size: 9px;
	text-align: center;
}
span.flag {
	background: transparent url(../images/icons/flag.png) no-repeat;
	height: 12px;
	width: 12px;
	padding: 0;
	text-indent: -999em;
	right: 25px;
}
span.flag a {
	text-indent: -9999em;
	display: block;
	height: 18px;
}
span.flagged {
	background: url(../images/icons/flag.png) no-repeat;
	height: 12px;
	width: 12px;
	padding: 0;
	text-indent: -999em;
	margin-top: -3px;
	top: 50%;
	right: 25px;
}
span.star {
	top: -3px !important;
	right: -3px !important;
	background: transparent url(../images/icons/star.png) no-repeat !important;
}
span.stats, 
span.video-stats {
	position: absolute;
	top: -6px;
	height: 22px;
	width: 22px;
	margin-left: -27px;
	padding: 6px 0 0;
	background: url(../images/bubbles/blue_bubble_mini.png) no-repeat right;
	color: #fff;
	font-size: 11px;
	text-align: center;
	text-decoration: none;
}



/* Advanced Search page
----------------------------------------*/

#advancedSearch .adv {
	float: none;
}

#advancedSearch .fmonth {
	75px;
	margin-right: 5px;
}

#advancedSearch .fday {
	width: 40px;
	margin-right: 5px;
}

#advancedSearch .fyear{
	width: 40px;
}

#advancedSearch #fterms {
	width: 446px;
}

#advancedSearch #flterms {
	text-align: left;
}

#advancedSearch #fsearch {
	border: none;
	width: 24px;
	cursor: pointer;
	height:22px;
}

#advancedSearch .col {
	float: left;
	width: 260px;
}

#advancedSearch .fcheckboxes {
	float: left;
	width: 30%;
	border: none !important;
}

#advancedSearch .fcheckboxes input {
	width: 17px;
	height: 17px;
	margin-right: 8px;
}

#advancedSearch .legend {
	display: block;
	float: left !important;
	margin: 12px 8px 0 0;
}

#advancedSearch .legend#cat {
	margin-top: 8px;
}

#advancedSearch label{
	width: auto;
	margin: 4px 0 3px 0;
}

#advancedSearch p{
	margin: 0;
}

#advancedSearch {
	font-size: 11px;
	height: 360px; /* Minimum height for dashboard area is 400 (inc padding)*/
	width: 848px;
	padding: 20px 0 20px 20px;
}

#advancedSearch #range {
	margin-top: 20px;
}

#btn-back-to-basic-search {
	background: url(../images/buttons/btn-back-to-basic-search.gif) no-repeat;
	display: block;
	float: right;
	height: 31px;
	width: 125px;
	margin-bottom: 18px;
}

h1#txt-advanced_search {
	display: block;
	float: left;
	width: 80%;
}

form#advanced-search-form input {
	background-color:none;
	border:none;
	height:14px;
	padding:4;
}
form#advanced-search-form select {background-color:none; border:none; height:20px; padding:2px 0 0 0 ;}