@import url('reset.css') /* NoFollow */; 
/*
Welcome to the Garden CSS File! 6 Things you should know:

1. The reset.css file imported above breaks all elements down to a base style.

2. There is a menu.css file that is also included on the profile page. It
   defines the main dropdown menu at the top of the page. Do not edit it,
   instead add custom rules in this file.
   
3. There is a popup.css file that is also included on the profile page. It
   defines the appearance of popups (warnings, editing thumbnails, etc). Do not
   edit it, instead add custom rules in this file.

5. This css file will be included on the user profile page only.
   
6. This file is broken down into the following sections:
   + Line 30:     General Styles & Typography
   + Line 411:    Header
   + Line 474:    Main Menu
   + Line 509:    Panels / Sidebars
   + Line 570:    Activities
   + Line 765:    Profile Page
   + Line 862:    Profile Tab Menu
   + Line 919:    Thumbnail Cropper
   + Line 967:    Footer
*/
   
   
/* ============================================== General Styles & Typography */
#Body {
	font: 75%/1.7em "Helvetica Neue",Helvetica,arial,sans-serif;
	text-align: left;
   margin: 15px auto 0;
}
#Content {
   float: right;
   width: 680px;
   margin: 0 0 40px;
}
.Hidden {
   display: none;
}
.nowrap {
   white-space: nowrap;
}
.Center {
	text-align: center;
}
.Right {
	text-align: right;
}
h1, h2, h3, h4, h5, h6 {
   color: #000 /* Body Heading Font Color */;
   font-family: "Helvetica Neue",Helvetica,arial,sans-serif;
   font-weight: normal;
   margin: 0;
}
p {
   margin: 0.5em 0 0 0;
   line-height: 1.6em;
   font-family: "Helvetica Neue",Helvetica,arial,sans-serif;
}
h1, h2 {
   border-bottom:1px solid #bbb;
   font-size:140%;
   font-weight:bold;
   margin-bottom:10px;
}
h3 {
   font-size:140%;
}
h4 {
   font-size: 120%;
   color: #6C6C6C /* Body Subheading Font Color */;
}
h5 {
   font-size: 120%;
   color: #6C6C6C /* Body Subheading Font Color */;
}
a,
a:link,
a:visited,
a:active {
   text-decoration: none;
   color: #2786c2  /* Body Link Font Color */;
}
a:hover {
   text-decoration: none;
   color: #ff0084 /* Body Hover Font Color */;
}
form ul li {
   border-bottom: 1px solid #eee;
   margin-bottom: 10px;
   padding: 0px 0px 10px 3px;
   font-size: 12px;
   color: #555 /* Body Text Font Color */;
}
form ul li label {
   color: #222 /* Body Text Font Color */;
   float: left;
   display: block;
   width: 150px;
   font-size: 14px;
   padding: 6px 6px 0px 4px;
   }
body.Messages div.Popup form ul li label {
   width: 100px;
}
form ul li label.RadioLabel {
   float: none;
   display: inline;
   font-weight: normal;
}
table.Label tbody th {
   width: 140px;
}
form ul li table label {
   float: none;
   display: inline;
   width: auto;
}
body.Messages div.Popup form ul li label.CheckBoxLabel,
form ul li label.CheckBoxLabel {
   float: none;
   width: auto;
   display: block;
   font-size: 13px;
   cursor: pointer;
   margin: 0px;
   padding: 0px;
   line-height: 27px;
}
form ul li label.CheckBoxLabel input {
   margin: 7px 6px 4px 2px;
   padding: 0px;
   float: left;
}
form ul li label span {
   font-size: 11px;
   color: #999;
   padding-left: 6px;
   }
form li.RadioInput label {
   display: inline;
   }
input.SmallButton {
   cursor: pointer;
   margin: 0px 0px 0px 0px;
   font-size: 11px;
}
input.SmallInput {
   width: 80px;
}
table th,
table td {
   font-size: 13px;
   padding: 6px;
   font-weight: bold;
   color: #000;
   border-bottom: 1px solid #e2e6ef;
   line-height: 150%;
}
input.DateBox,
input.InputBox,
input.SmallInput,
textarea {
   font-family: arial;
   color: #222;
   font-size: 14px;
   padding: 3px;
   margin: 0;
   width: 250px;
   border: 1px solid #888;
}
textarea.TextBox {
   width: 500px;
   height: 100px;
   min-height: 100px;
   max-height: 500px;
}
#Popup textarea.TextBox {
   width: 465px;
}
input.SmallInput,
input.InputBox {
   font-size: 15px;
   padding: 6px 3px;
}
input.SmallInput:focus,
input.InputBox:focus,
textarea:focus {
   background: #ffe;
}
textarea {
   line-height: 128%;
}
select {
   font-family: arial;
   font-size: 14px;
   color: #222;
   margin: 0;
   padding: 3px;
   }
select.Day,
select.Year {
   margin-left: 4px;
}
.Button {
   cursor: pointer;
   margin: 0;
   font-family: Tahoma, 'Trebuchet MS', Arial, Verdana;
   padding: 4px;
   font-size: 11px;
   background: url('button_bg2.png') repeat-x center left #f8f8f8;
   color: #555;
   border: 1px solid #bbb;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   }
input.Button {
   font-weight: bold;
}
.Button:hover {
   color: #333;
   border: 1px solid #888;
}
.Loading {
   height: 100px;
   padding: 0 20px;
   background: url('progress.gif') center center no-repeat;
}
.Progress {
   padding: 10px 40px 10px 0;
   background: url('progress.gif') center center no-repeat;
}
/* Note: Messages are the yellow notices that appear at the top/center of the
  page to notify users of things like drafts being saved, etc. */
div.Messages {
   text-align: center;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 200;
   margin: 0 !important;
   padding: 0 !important;
   list-style: none !important;
   font-size: 12px;
   display: block;
   width: 100%;
}
* html div.Messages {
  position: absolute;
  width: 100%;/*IE5.5*/
  top: 0;
  left: 0;
  overflow: visible; 
  top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
div.Messages ul {
   cursor: pointer;
   width: auto !important;
   border: 0 !important;
   margin: 0 auto !important;
   padding: 4px 8px !important;
   -moz-border-radius-bottomleft: 2px;
   -moz-border-radius-bottomright: 2px;
   -webkit-border-bottom-left-radius: 2px;
   -webkit-border-bottom-right-radius: 2px;
   background: #ff9 !important;
   display:-moz-inline-stack;
   display:inline-block;
   zoom:1;
   *display:inline;
}
div.Messages ul li {
   text-align: left !important;
   border: 0 !important;
   color: #000 !important;
   padding: 0 !important;
   margin: 0 !important;
   list-style-position: outside;
}
div.Errors ul {
   background: #d50a0a !important;
}
div.Errors ul li {
   color: #fff !important;
}
/* Note: Warning, Alert & Info are simple boxes that can be used to wrap message
   strings & imply importance. */
.Warning {
   background: #ffc;
   border: 1px solid #ff9;
   color: #000;
   padding: 6px 8px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.Alert {
   background: #d00;
   border: 1px solid #b00;
   color: #fff;
   padding: 3px 6px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}
.Alert a {
   color: #fff;
}
.Alert a:hover {
   text-decoration: underline;
}
div.Info {
   font-size: 13px;
   background: #fafafa;
   border: 1px solid #eee;
   color: #888;
   -moz-border-radius: 4px;
   padding: 6px;
   margin: 0 0 10px;
}
div.EmptyInfo {
   margin: 10px 0;
}
/* Note: The MessageModule (in /applications/garden/modules) wraps all messages
  that it renders in a div with this DismissMessage class. */
div.DismissMessage {
   margin: 6px 0 10px;
}
div.DismissMessage p {
   margin: 2px 0;
}
div.DismissMessage a.Dismiss {
   float: right;
   line-height: 120%;
   color: #999;
	padding: 2px 4px;
}
div.DismissMessage a.Dismiss:hover {
   background: #fafafa;
   border: 1px solid #ccc;
   color: #333;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding: 1px 3px;
}
/* Note: The close class is used on the "close" anchor in popups. */
a.Close {
   font-weight: bold;
   font-family: tahoma;
   font-size: 10px;
   text-transform: uppercase;
   color: #bbb;
   background: #f9f9f9;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   padding: 1px 4px 2px 5px;
   margin: 0;
   line-height: 100%;
   border: 1px solid #ddd;
}
a.Close:hover {
   border: 1px solid #bbb;
   color: #999;
   background: #fff;
}
/* Note: MorePager is related to the /applications/garden/modules/MorePagerModule. */
.MorePager {
   list-style: none;
   margin: 1px 0 0;
   padding: 3px 6px;
   text-align: right;
   background: #e9f9ff;
   }
.MorePager a {
   font-size: 13px;
   font-weight: bold;
   text-align: right;
}
.MorePager a:hover {
   color: #2786c2 !important;
   text-decoration: underline;
}
#PagerLess {
   -moz-border-radius-topright: 2px;
   -moz-border-radius-topleft: 2px;
   -webkit-border-top-right-radius: 2px;
   -webkit-border-top-left-radius: 2px;
   margin-bottom: 1px;
}
tr#PagerMore td {
   border: 0;
   text-align: right;
}
#PagerMore {
   margin-bottom: 1px;
}


/* =================================================================== Header */
#Head {
	background:#d9d9d9;
	border-top:1px solid #cecece;
	position:relative;
	top:-21px;
	left:-17px;
	width:900px;
	padding: 0;
	text-align: right;
	height:35px;
}
#Head form {
	float: right;
	width: 240px;
	background: #fff;
	padding: 0;
	margin: 4px 26px 0 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-bottom:1px solid #ddd;
}
#Head form input.InputBox {
   width: 194px;
   border: 0;
   padding: 4px 2px 4px 0;
   background: #fff;
   margin: 0;
   color: #969696;
   font-size: 13px;
}
#Head form input.Button:hover {
   border: 0;
   width: 38px;
   height: 26px;
	background: #92e06a;
   background: 
	-webkit-gradient(linear, left top, left bottom, from(#5bab33), to(#92e06a));
	text-shadow:0px -1px 0px #468c23;
   color: #fff /* Panel Font Color */;
   padding: 3px 0 4px;
   margin: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius-topright: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-top-right-radius: 5px;
   -webkit-border-bottom-right-radius: 5px;
}

#Head form input.Button {
   border: 0;
   width: 38px;
   height: 26px;
	background: #5bab33;
   background: 
	-webkit-gradient(linear, left top, left bottom, from(#92e06a), to(#5bab33));
	text-shadow:0px -1px 0px #468c23;
   color: #fff /* Panel Font Color */;
   padding: 3px 0 4px;
   margin: 0;
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius-topright: 5px;
   -moz-border-radius-bottomright: 5px;
   -webkit-border-top-right-radius: 5px;
   -webkit-border-bottom-right-radius: 5px;
}


/* ================================================================ Main Menu */
div.Menu {
	text-align: right;
	margin: 0 auto;
	border-top:1px solid #f0f0f0; 
	width:900px;
	height:34px;
	border-bottom:1px solid #d7d7d7;
}
ul#Menu, ul#Menu2 {
   float: left;
   margin: 0 auto;
   padding: 6px 0 0 18px;
	text-shadow:0 1px 0 #f1f1f1;
	letter-spacing:0.3pt;
}

#Menu ul,
#Menu li.Active, #Menu2 li.Active {
   background: #cacaca;
}
#Menu a, #Menu2 a,
#Menu li.Active a, #Menu2 li.Active a {
   color: #61656d;
}
#Menu a:hover, #Menu2 a:hover {
   background: #cacaca;
}
#Menu a:hover, #Menu2 a:hover,
#Menu li.NonTab a:hover, #Menu2 li.NonTab a:hover {
    color:#2a71cc !important;
}
/* Numbers next to menu items */
#Menu a span, #Menu2 a span,
#Menu li.Active a span, #Menu2 li.Active a span,
#Menu li.Highlight a:hover span, #Menu2 li.Highlight a:hover span {
   background: #f2fcff;
   color: #299fc7;
}


/* ======================================================== Panels / Sidebars */
#Panel {
   width: 250px;
   float: right;
}
div.Box {
   -moz-border-radius: 1px;
   -webkit-border-radius: 1px;
   background: #e9f9ff  /* Panel Background Color */;
   color: #999  /* Panel Font Color */;
   padding: 6px 10px;
   margin: 0 0 10px;
}
div.Box h4 {
   font-size: 110%;
   color: #2786c2  /* Panel Font Color */;
   font-weight: bold;
   margin: 0;
   padding: 0 0 1px;
   border-bottom: 1px solid #caf0fe  /* Panel Inlay Border Color */;
}
div.Box dl {
   border-bottom: 1px solid #caf0fe  /* Panel Inlay Border Color */;
   background: #F5FCFF /* Panel Inlay Background Color */;
   padding: 3px;
   overflow: hidden;
}
div.Box dl dt {
   float: left;
   width: 80px;
   color: #2786C2 /* Panel Font Color */;
}
div.Box dl dd {
   margin-left: 80px;
}
div.Box p {
   font-size: 100%;
   padding: 0 0 4px;
   color: #555 /* Body Text Font Color */;
}
ul.PanelInfo {
	border-top: 1px solid #caf0fe;
   border-bottom: 1px solid #caf0fe;
}
ul.PanelInfo li {
   background: #f5fcff /* Panel Inlay Background Color */;
   padding: 2px 4px;
   font-size: 80%;
}
ul.PanelInfo li strong {
	font-weight: normal;
   text-align: left;
   font-size: 120%;
   margin-right: 12px;
}
ul.PanelInfo li.Active {
   background: #fff;
}


/* =============================================================== Activities */
body.Activity h1 {
   margin: 0;
}

ul.Activities {
	margin-bottom: 6px;
}
ul.Activities li {
   border-bottom: 1px solid #ddd;
   padding: 8px 0 6px;
   color: #454545;
   clear: left;
   font-size: 105%;
}
ul.Activities div span {
   padding: 0 6px 0 0;
}
ul.Activities li a.Photo {
   float: left;
}
ul.Activities li img {
   margin: 0;
   border: 0;
   height: 40px;
   width: 40px;
}
ul.Activities li.ActivityComment img {
   height: 32px;
   width: 32px;
}
ul.Activities li h3 {
   display: inline;
   padding: 0;
   font-size: 100%;
   font-weight: normal;
}
ul.Activities li h3 em {
   font-weight: normal;
   font-style: normal;
   color: #33afda;
   font-size: 10px;
   margin: 0 10px;
}
ul.Activities li h3 a.CommentOption {
   font-size: 10px;
   font-weight: normal;
}
ul.Activities li a.Delete {
   float: right;
   width: auto;
   padding: 4px;
   margin: 0 1px 0 0;
   font-family: Tahoma, 'Trebuchet MS', Arial, Verdana;
   font-size: 10px;
   font-weight: normal;
   background: url('button_bg2.png') repeat-x center left #f8f8f8;
   border: 1px solid #ddd;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   color: #888;
   cursor: pointer;
   line-height: 100%;
}
ul.Activities li a.Delete:hover {
   color: #333;
   border: 1px solid #888;
}
ul.Activities li div.Story {
   border: 1px solid #eee;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   background: #fafafa;
   margin: 4px 0;
   padding: 4px 6px;
   line-height: 130%;
   color: #2b3033;
   display: block;
}
ul.Activities li.PictureChange div.Story {
	border: 0;
   background: none;
   margin: 4px 0 0;
   padding: 0 8px;
}
ul.Activities li div.Story blockquote {
   margin: 2px 0 0;
   padding: 0;
   background: none;
	border: 0;
   color: #999;
}
ul.Activities li div.Story img {
   height: auto;
   width: auto;
   background: #fff;
   padding: 2px;
   border: 1px solid #ccc;
   float: none;
   margin: 0 4px 0 0;
}
ul.Activities ul.Comments {
   background: #fff;
   margin: 0 0 0 46px;
   padding: 1px 0 0;
   list-style: none;
   font-size: 85%;
   clear: left;
}
ul.Activities ul.Comments li {
   background: #e9f9ff /* Panel Background Color */;
   margin-bottom: 1px;
   border-bottom: 0;
   padding: 6px;
   line-height: 1;
}
ul.Activities li.HasPhoto div {
   margin-left: 46px;
}
ul.Activities li.HasPhoto ul.Comments div {
   margin: 0;
}
ul.Activities ul.Comments li.HasPhoto div {
   margin-left: 40px;
}
ul.Activities a.Name,
ul.Activities a.Photo {
   font-weight: bold;
   padding-right: 6px;
}
ul.Activities p {
   display: inline;
   margin: 0;
   line-height: 1.4;
}
ul.Activities div.Meta {
   line-height: 1;
   color: #888;
   padding: 4px 0 0 6px;
  	margin: 0 !important;
   font-size: 90%;
	display: inline;
}
ul.Activities li.AboutUpdate div.Meta,
ul.Activities li.WallComment div.Meta,
ul.Activities ul.Comments div.Meta {
   display: block;
   padding: 4px 0 4px;
}
ul.Activities div.Meta a {
   font-weight: normal;
}
ul.Activities div.Meta span {
   padding: 0 6px;
   font-size: 8px;
}
ul.Activities ul.Comments li.CommentForm {
   clear: left;
   padding: 8px;
}
ul.Activities ul.Comments li.CommentForm a.CommentLink,
ul.Activities ul.Comments li.CommentForm a.CommentLink:hover {
   cursor: text;
   background: #fff;
   color: #bbb !important;
   padding: 5px;
   text-decoration: none;
   border: 1px solid #aaa;
   display: block;
   line-height: 100%;
   font-weight: normal;
}
ul.Activities li.CommentForm textarea.TextBox {
   width: 515px;
	min-height: 40px;
   height: 40px;
   margin-bottom: 2px;
}
ul.Activities {
   margin-top: 10px;
   border-top: 1px solid #ddd;
}
div.EmptyInfo {
   margin: 10px;
}
ul.Notifications {
   margin-top: 0;
   border: 0;
}


/* ============================================================= Profile Page */
#Content {
   width: 580px;
   margin: 0 0 40px;
}
#Panel {
   float: left;
   width: 250px;
}
ul.SideMenu {
   -moz-border-radius: 0;
   -webkit-border-radius: 0;
   background: none;
   font-size:110%;
   padding: 0;
   margin: 0 0 10px;
}
ul.SideMenu li ul {
   margin: 0;
   padding: 0;
   border: 0;
   background: none;
}
ul.SideMenu li ul li {
   border-bottom: 1px solid #dbe3e6 /* Panel Inlay Border Color */;
}
ul.SideMenu li ul li a {
   padding: 0 8px;
   display: block;
}
ul.SideMenu li ul li a:hover {
   text-decoration: none;
   background: #e9f9ff /* Panel Hover Font Color */;
}
div.User {
   line-height: 150%;
}
div.User,
div.User a {
   text-decoration: none;
}
div.User h1 {
   padding: 0 0 8px;
   margin: 0;
   line-height: 100%;
   border: 0;
}
#Status {
   -moz-border-radius-topleft: 2px;
   -moz-border-radius-topright: 2px;
   -webkit-border-top-left-radius: 2px;
   -webkit-border-top-right-radius: 2px;
   background: #e9f9ff;
   margin: 0;
   padding: 8px 8px 0;
   color: #999;
   font-weight: normal;
   line-height: 100%;
}
#Status p {
   font-size: 120%;
   color: #6c6c6c;
   display: inline;
   margin: 0;
   padding: 0;
   line-height: 1;
}
#Status a {
   text-transform: lowercase;
   font-size: 11px;
   text-decoration: none;
}
#Status a:hover {
   text-decoration: underline;
}
div.User form {
   -moz-border-radius-topleft: 2px;
   -moz-border-radius-topright: 2px;
   -webkit-border-top-left-radius: 2px;
   -webkit-border-top-right-radius: 2px;
   background: #e9f9ff;
   padding: 8px 8px 0;
}
div.User form input.InputBox {
   width: 618px;
   margin-right: 2px;
}
form.Activity {
   display: block;
   padding: 10px 10px 0 10px;
}
form.Activity textarea {
   width: 567px;
   margin-bottom: 2px;
   height: 60px;
   min-height: 60px;
   max-height: 300px;
}


/* ========================================================= Profile Tab Menu */
ul.Tabs,
ul.Tabs li {
   float: none;
   display: inline;
   border-bottom: 0;
}
ul.Tabs {
   clear: left;
   display: block;
   border-bottom: 1px solid #caf0fe /* Panel Inlay Border Color */;
   padding: 10px 0 0 10px;
   margin: 0;
   background: #e9f9ff /* Panel Background Color */;
}
ul.Tabs li {
   padding: 5px 0;
   margin: 0;
   line-height: 24px;
   -moz-border-radius-topleft: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-left-radius: 3px;
   -webkit-border-top-right-radius: 3px;
}
ul.Tabs li.Active {
   border: 1px solid #caf0fe /* Panel Inlay Border Color */;
   border-bottom: 0;
   background: #fff /* Panel Selected Background Color */;
}
ul.Tabs li a,
ul.Tabs li a:link,
ul.Tabs li a:hover,
ul.Tabs li a:active,
ul.Tabs li a:visited {
   -moz-border-radius-topleft: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-left-radius: 3px;
   -webkit-border-top-right-radius: 3px;
   display: inline;
   background: #daf4fd /* Panel Inlay Background Color */;
   font-weight: bold;
   color: #2786C2 /* Panel Inlay Font Color */ !important;
   text-decoration: none;
   padding: 5px 10px 4px 10px;
   margin: 1px 0 0;
}
ul.Tabs li a:hover {
   background: #f3fcff /* Panel Inlay Background Color */;
}
ul.Tabs li.Active a {
   background: #fff /* Panel Selected Background Color */ !important;
   color: #454545 /* Panel Selected Font Color */ !important;
   text-decoration: none;
   padding: 5px 10px 4px 10px;
}
ul.Tabs li a span {
   line-height: 1;
   font-size: 80%;
   padding: 0 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   font-weight: normal;
   background: #2786C2;
   color: #eaf4fd;
   margin: 0 0 0 4px;
}


/* ======================================================== Thumbnail Cropper */
form.Thumbnail table {
   width: 100%;
}
form.Thumbnail table td {
   width: 50%;
}
form.Thumbnail table tr td {
   vertical-align: top;
}
.jcropper-holder {
   border: 1px black solid;
}
.jcrop-holder {
   text-align: left;
}
.jcrop-vline, .jcrop-hline {
   font-size: 0;
   position: absolute;
   background: white url('jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
   font-size: 1px;
   width: 7px !important;
   height: 7px !important;
   border: 1px #eee solid;
   background-color: #333;
   *width: 9px;
   *height: 9px;
}
.jcrop-tracker {
   *background-color: gray;
   width: 100%; height: 100%;
}
.custom .jcrop-vline,
.custom .jcrop-hline {
   background: yellow;
}
.custom .jcrop-handle {
   border-color: black;
   background-color: #C7BB00;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
}


/* =================================================================== Footer */
#Foot {
   clear: both;
   text-align: center;
   margin: 2px 0;
   font-family: 'lucida grande','helvetica neue',helvetica,arial,sans-serif;
   padding: 4px 9px;
   font-size: 13px;
   color: #ddd;
   line-height: 1;
}
#Foot a {
   color: #ccc;
}
#Foot a:hover {
   color: #aaa;
}