/*
Theme Name: Clean Living Room
Theme URL: http://ultralimedesign.com/portfolio/
Description: An open, relaxed, and elegant theme for BitWisdom
Version: .9
Author: Diogenes Brito
Author URI: http://ultralimedesign.com/
*/

/* Color Key
-------------------------
Tealish - #3f968d
Dark Teal/Darker green blue - #34423f
Light brown/tan - #8c7958
Dark Brown - #59433a
White - #fff
Grey - #f1f1f1
*/

/* Font Stacks (used in this theme)
-------------------------
For Bigger, heading type text (serif, 16px font and above)
font-family: Georgia, Garamond, Hoefler Text, Times, Times New Roman, serif;

For smaller, paragraph type text (serif, 14px font and below)
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;

For places where san-serif is used (navigation, footer, etc.)
font-family: Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif;
*/


/* Diogenes' Framework CSS + Other External Imports */
@import url("framework/framework.css");


/* IMPORTANT NOTE **************************************************
all "/abitofwisdom/img/" should be replaced by "/img/" when uploaded 
to live server
*/

/* START THEME CSS */


/* !Basic Elements and Background */
/* --------------------------------------------- */
html {
	font-family:	Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif; /* Main font stack here */
	width:			100%;
	min-height:		100%;
	height:			100%;
	text-align:		center;
}

body {
	background: 	#fff url('/img/bg.png') repeat-x;
	height:			100%
}

#page_wrapper {
	width:			960px;
	margin:			0 auto;	
}

/* !Website-wide elements */
/* --------------------------------------------- */
#header {
	background:		url('/img/topshadow.png') no-repeat scroll center bottom;
	margin-top:		20px;
	width:			100%;
	padding-bottom:	20px;
	font-family: 	Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif;
}

h1#logo { /* only the h1 tag on the home page is a logo image */
	width:			203px;
	height:			37px;
	text-indent:	-9999em;
	background:		transparent url('/img/logo.png') no-repeat;
	float:			left;
	margin:			10px 0 0 0;
}

img#logo { /* Non-home pages should just use a linked image as the logo */
	margin:			10px 0 0 0;
}

#main_navigation {
	list-style:		none;
	font-size:		16px;
	float:			right;
	margin-top:		10px;
	font-family:	Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif;
}

#main_navigation li {
	display:		inline;
	margin:			0 5px;
}

#main_navigation a,
#main_navigation a:link, 
#main_navigation a:visited {
	text-decoration:none;
	color:			#59433a;
}

#main_navigation a:hover, 
#main_navigation a:focus {
	text-decoration:underline;
}

#main_content {
	clear:			both;
}

#footer {
	background:		url('/img/bottomshadow.png') no-repeat  scroll center top;
	clear:			both;
	margin:			20px auto 0 auto;
	font-size:		14px;
	color:			#59433a;
}

ul#footer_navigation {
	margin:			0 auto;
	padding:		25px 0;
	width:			600px; /*!*/
	list-style:		none;
}

#footer_navigation li {
	display:		inline;
	margin:			0 5px;
}

#footer_navigation a,
#footer_navigation a:link, 
#footer_navigation a:visited {
	text-decoration:none;
	color:			#59433a;
}

#footer_navigation a:hover, 
#footer_navigation a:focus {
	text-decoration:underline;
}

input.button {
	padding:		5px 8px;
	background:		#f1f1f1;
	border:			1px solid #3f968d;
	color:			#3f968d;
	font-size:		19px;
	cursor:			pointer;
}

/* !General/Websitewide Typography */
/* --------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family:	Georgia, Garamond, Hoefler Text, Times, Times New Roman, serif;
	color:			#59433a;
}

h2 {
	margin:			0;
	line-height:	30px;
}

h3 {
	line-height:	24px;
}

p, ol, ul, form legend {
	color:			#34423f;
	font-family:	Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	font-size:		16px;
	line-height:	22px;
	font-weight:	normal;
}

p a,
p a:link {
	color:			#3f968d;
	font-size:		16px;
}

p a:visited,
p a:hover,
p a:focus,
p a:active {
	color:			#8c7958;
	font-size:		16px;
}

#instructions p a,
#instructions .home_page p a:link,
#instructions .home_page p a:visited {
	color:			#34423f;
}

#instructions p a:hover,
#instructions p a:focus,
#instructions p a:active {
	color:			#3f968d;
	font-size:		16px;
}

p.limit {
	float:			right;
	color:			#8c7958;
	font-size:		12px;
	margin:			15px 0 0 0;
}

span.limit_feedback {
	font-size:		16px;
}

strong {
	font-weight:	bold;
}

#instructions {
	font-family:	Georgia, Garamond, Hoefler Text, Times, Times New Roman, serif;
	font-size:		28px;
}

#main_content {
	margin:			10px 0 25px 0;
}

.message {
	border:			solid 1px #8c7958;
	background:		#59433a;
	font-family:	Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif;
	font-size:		16px;
	text-align:		center;
	width:			600px;
	padding:		15px;
	margin:			15px auto 0 auto; 
	color:			#f1f1f1;
}

/* !Static Pages */
.static_page {
	width:			500px;
	float:			right;
}

/* !Forms */
form label {
	color:			#3f968d;
	font-size:		20px;
	margin-top:		5px;
	width:			200px;
}

form textarea,
form input {
	padding:		5px 0 0 10px;
	font-family:	Georgia, Garamond, Hoefler Text, Times, Times New Roman, serif;
	background:		#f1f1f1 url('/img/inputbg.png') repeat-x;
	border:			1px solid #59433a;
	font-size:		28px;
	color:			#59433a;
}

img.page_img {
	float:			left;
	margin:			60px 0 0 50px;
}

img.page_img#team_of_owls {
	margin-left:	150px;
}

img.page_img#owl_diogenes{
	clear:			left;
	margin-left:	280px;
}

img.page_img#owl_jaki {
	clear:			left;
	margin-left:	280px;
	margin-top:		100px;
}

img.page_img#owl_erika {
	clear:			left;
	margin-left:	280px;
	margin-top:		170px;
}

/* !Home+User Home Page Specific */
/* --------------------------------------------- */
div.bit_options {
	width:		auto;
	float:		right;
	margin-top:	15px;
	margin-right:15px;
}

div.binary_option {

}

div.binary_option label {
	padding:	0;
	margin:		0;
	font-size:	16px;
	line-height:20px;
}

.home_page form {
	float:			left;
}
.home_page form label,
.user_page#home form label {
	width:			auto !important;
}

.home_page form fieldset,
.user_page#home form fieldset {
	border:			none;
	margin:			0;
	padding:		0;
}

.home_page form legend,
.user_page#home form legend {
	display:		none;
}

.home_page form textarea,
.user_page#home form textarea {
	display:		block;
	width:			490px;
}

.home_page #instructions {
	width:			360px;
	float:			left;
	margin:			40px 0 0 90px;
}

.home_page #instructions ol {
	width:			360px;
	margin:			0;
	padding:		0;
	font-family:	Georgia, Garamond, Hoefler Text, Times, Times New Roman, serif;
	font-size:		28px;
	line-height:	32px;
	color:			#34423f;
}

.home_page #instructions ol li {
	 margin:		10px 0 0;
}

.home_page #instructions p{
	margin-top:		25px;
	font-size:		22px;
	margin-left:	100px
}

.home_page #instructions p a,
.home_page #instructions p a:link{
	font-size:		22px;
}

.home_page .button {
	float:			right;
	margin:			15px 0 0;
}

.home_page p#invitation {
	width:			410px;
	float:			left;
	line-height:	25px;
	margin:			8px 0 0 10px;
	font-family:	Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif;
	font-size:		16px;
}

/*
	Note: Because of the way the templating is set up,
	in pages that have a sidebar, the sidebar is #sidebar
	and the main content/big bar is #main
*/
/* !Specific User Home Stuff */
.user_page#home #main {
	width:			500px;
	float:			left;
	margin-left:	15px;
}

.user_page#home #sidebar{
	width:			365px;
	float:			left;
	margin-left:	75px;
}

.user_page#home #sidebar #accordion h2 {
	background-color:#f1f1f1;
	border:			1px solid #59433a;
	padding:		5px 15px 5px 15px;
}

.user_page#home form fieldset {
	width:			500px;
}

.user_page#home .firehose {
	width:			auto;
	float:			none;
	margin-bottom:	15px;
}

.user_page#home .firehose .bit {
	padding:		10px 10px;
}

.user_page#home .firehose .bit .learned {
	margin-top:		5px;
}

.user_page#home .button {
	margin:			15px 0 5px 0;
	float:			right;
}

/* !Browse Bits */
/* ---------------------------------------------*/
.user_page#home ul.tabs {
	list-style:		none;
}

.user_page#home ul.tabs li {
	display:		inline;
	margin:			0 5px;
	color:			#3f968d;
	font-size:		19px;
	line-height:	45px;
}

.user_page#home ul.tabs li a,
.user_page#home ul.tabs li a:hover,
.user_page#home ul.tabs li a:link,
.user_page#home ul.tabs li a:visited,
.user_page#home ul.tabs li a:focus,
.user_page#home ul.tabs li a:active {
	color:			#3f968d;
	font-size:		19px;
	text-decoration:none;
	padding:		5px 8px;
	background:		#f1f1f1;
	border:			1px solid #3f968d;
	cursor:			pointer;
}

#browse_bits #main {
	width:			730px;
	float:			left;
}

#browse_bits #sidebar {
	width:			180px;
	padding:		10px;
	float:			left;
	margin-left:	25px;
	background:		#f1f1f1;
	border:			1px solid #8c7958;
}

#browse_bits #sidebar p {
	color:			#59433a;
	margin-top:		5px;
}

.firehose {
	margin:			0 auto;
}

.firehose .bit{
	border-bottom:	solid 1px #8c7958;
	padding:		15px 10px;
}

.firehose .bit p {
	margin:			0;
	padding:		0;
	font-size:		16px;
	line-height:	20px;
	color:			#34423f;
}

.firehose .bit p.bit_info {
	float: 			left;
	width:			auto;
	margin:			15px 0 0 5px;
	font-size:		14px;
	color:			#8c7958;
}

.user_page#home .firehose .bit p.bit_info {
	margin-top:		8px;
}

.firehose .bit p.bit_info span.owner_label {
	margin-left:	5px;
	color:			#fff;
	font-family:	Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif;
	font-size:		12px;
	line-height:	14px;
	background:		#3f968d;
	padding:		0px 2px 0px 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

.firehose .bit .learned {
	margin-top:		15px;
}

.firehose .bit .finished {
	margin-right:	15px;
}

.firehose .bit .finished p {
	color:			#3f968d;
	margin-bottom:	10px;
}

p#page_numbers {
	margin:			20px auto;
	width:			auto;
}

/* !Login/Register Pages */
/* ---------------------------------------------*/
.form#register label {
	line-height:	25px;
}

.form#register h2 {
	margin-bottom:	20px;
}

.form#register p {
	width:			450px;
	margin:			5px 0 15px 0;
}

.form#register,
fieldset.main {
	display:		block;
	/* width:			620px; */
	float:			left;
}

.form#register legend{
	display:		none;
}

.form#register fieldset{
	border:			none;
}

#facebook_connect,
fieldset.sidebar {
	display:		block;
	float:			right;
	width:			280px;
	padding:		15px 10px;
	background:		#f1f1f1;
	border:			1px solid #8c7958;
	margin:			0 0 0 15px;
}

#facebook_connect h2 {
	margin-bottom:	20px;
}

.fb_login_image {
	margin-top:		25px;
}

/* !Bit Controls */
/* ---------------------------------------------*/
ul.bit_controls {
	float:			right;
	margin:			10px 0 0 0px;
}

ul.bit_controls li {
	display:		inline;
	margin-right:	5px;
}

button {
	border:			none;
}

button.favorite_button {
	height:			16px;
	width:			16px;
	cursor: 		pointer;
	background: 	url('/img/hearts.png') no-repeat 0 0;
}

button.favorite_button.on {
	background-position: 0 -16px;
}

button.favorite_button.off {
	background-position: 0 0;
}

button.favorite_button.on:hover {
	background-position: 0 -48px;
}

button.favorite_button.off:hover {
	background-position: 0 -32px;
}

button.bit_options {
	height:			24px;
	width:			36px;
	cursor: 		pointer;
	background: 	url('/img/bit_control.png') no-repeat 0 0;
}

button.bit_options:hover {
	background-position: 0 -24px;
}

ul.bit_controls li.bit_options {
	position:		absolute;
	display:		none; /*Needed to hide as default*/
	z-index:		1000;
}

ul.bit_controls li.bit_options ul{
	display:		block;
	background:		#59433a;
	padding-bottom:	10px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
}

ul.bit_controls li.bit_options ul li{
	display:		block;
	padding:		10px 15px 0px 15px;
}

ul.bit_controls li.bit_options ul,
ul.bit_controls li.bit_options ul a:visited,
ul.bit_controls li.bit_options ul a:link {
	color:			#fff;
	font-family:	Lucida Grande, Lucida Sans, Lucida Sans Unicode, sans-serif;
	text-decoration:none;
}


/* !Generic Classes and Misc. */
/* ---------------------------------------------*/
.small_icon {
	display:		inline;
	position:		relative;
	top:			3px;
	margin:			0;
	padding:		0;
}

/* !Maintenance Page Formatting */
/* ---------------------------------------------*/
.maintenance #page_wrapper,
.maintenance img {
	margin:			0 auto;
}

.maintenance img {
	margin:			50px 0 50px 320px;
}

/* END CSS */