@charset "utf-8";
@import url("../css/forms.css");
@import url("../css/widgets.css");
/* **************************************************
Author: Andres Vidal
Description: basic Styles
************************************************** */
html {height:100%;}
body {color:#666; background:#F3F4F4 url(../images/page-gradient-10260908.png) repeat-x;}
#doc1{position:relative;}
#tHeader {position:relative;height:115px;}
#tContent {position:relative; border:1px solid #c7c4b3; padding:18px 18px 18px 18px; background:#fff; -moz-border-radius:3px;}
#tFooter {position:relative; color:#000; background:#c7c4b3; margin:1.5em 0 2em 0; -moz-border-radius:3px;}

#outHeader {height:10px; background:#c7c4b3; float:left; clear:both; width:100%;}
#outFooter {width:100%; clear:both; background:#EEEBD9; position:fixed; padding:0.50em; left:0; bottom:0px; }
/* **************************************************
Description: Header Section
************************************************** */
#logo {float:left;}
#logo a {display:block; background:url(../images/share-personas-small.png) left center no-repeat; width:384px; height:94px;}
#logo a span {width:1px; height:1px; display:block; overflow:hidden;}

#login {width:50%; position:absolute; right:0; top:15px;}
#login ul {float:right; clear:both;}
#login ul li {float:left;}

#login a {color: #666; padding:0 10px; white-space:nowrap;}
#login a:hover {color:#000; text-decoration:underline;}
#login .welcome a {}
#login .login a {}
#login .logout a {}
#login .register a {}
#login .myaccount a {}

#login .menu2 a {display:block; background:#666; padding:2px 6px; margin:10px 5px 0; color:#FFF; text-decoration:none; -moz-border-radius:3px;}
#ManagePersonas .menu2 .manage a {background:#000;}
#Browse .menu2 .browse a {background:#000;}
#login .faqs a {}

#createPersonaTabs {position:absolute; top:-32px; right:10px;}
#createPersonaTabs ul {float:right;}
#createPersonaTabs ul li {float:left; padding:0 0 0 2px;}
#createPersonaTabs ul li a {display:block; text-decoration:none; color:#53524a; background:#c7c4b3; border:1px solid #c7c4b3; border-bottom:none; padding:0.5em 0.75em;  font-weight:bold; -moz-border-radius:5px 5px 0 0; outline:0;}
#createPersonaTabs ul li a:hover {background:#53524a; color:#fff;}
#createPersonaTabs .thePreview a {color:#990000;}
/* SELECTED - this allows for background image use */
#thePhoto li.thePhoto a, #thePhoto li.thePhoto a:hover {background:#fff; color:#000; border-bottom:2px solid #fff;}
#theProfile li.theProfile a, #theProfile li.theProfile a:hover {background:#fff; color:#000; border-bottom:2px solid #fff;}
#tagsAndGroups li.tagsAndGroups a, #tagsAndGroups li.tagsAndGroups a:hover {background:#fff; color:#000; border-bottom:2px solid #fff;}
#thePreview li.thePreview a, #thePreview li.thePreview a:hover {background:#fff; color:#990000; border-bottom:2px solid #fff;}
/* **************************************************
Description: Footer Section
************************************************** */
#tFooter {padding:1.5em 2em;}
#tFooter ul.supportLinks li {display:inline;}
#tFooter ul.supportLinks li a {margin-right:0.5em; color:#0A7BA1; font-weight:bold; text-decoration:none;}
#tFooter ul.supportLinks li a:hover { text-decoration:underline; color:#000}

p.copyright {margin:0; font-size:0.833em;}
p.copyright a {color:#000066;}
#outFooter .feedbackTab {position:absolute; right:20px; bottom:18px;  }
#outFooter .feedbackTab a {display:block; padding:10px; color:#fff; text-decoration:none; background: #000; -moz-border-radius:5px;}
#outFooter .feedbackTab a:hover {text-decoration:underline;} 

#feedback {width:400px; background:#fff; -moz-border-radius:15px; position:fixed; left:50%; margin-left:-200px; top:50%; margin-top:-165px; border:3px solid #000;}
#feedback h2 {font-size:1em; color:#990000}
#feedback a.close {float:right; display:block; width:13px; height:13px; overflow:hidden; background:transparent url(../images/x_close.png) top left no-repeat; position:relative; top:10px; right:10px;}
#feedback a.close:hover {background:transparent url(../images/x_close.png) bottom left no-repeat;}
/* **************************************************
Description: HOME Page
************************************************** */
#Home {background:#F3F4F4 url("../images/page-gradient-10260908.png") repeat-x;}
#Home #tContent {background:#fff url(../images/intro.png) no-repeat center; height:370px;}
#Home .email.basic {position:absolute; top:270px; left:100px;}
#Home .email.basic h2 {color:#033647;}
#Home .email.basic #email {margin-right:10px;}

#Home img.creatingPersonas {position:absolute; top:250px;}
/* **************************************************
Description: FAQs Page
************************************************** */
#faqs div#addFAQ {background:#eee; padding:3em auto; margin-bottom:1.5em; float:left; width:100%;}
#faqs .faqs dl {margin:3em auto;}
#faqs .faqs dl dd {margin-bottom:3em;}
/* **************************************************
Description: EDIT Persona Pages
************************************************** */
#publicPhotos .photos li {display:inline;}
#publicPhotos .photos li.buttons {display:block; clear:both;}
/* form accordian handles */
#profileForms {min-height:600px;}
#profileForms a.ui-accordion-link {display:block; overflow:hidden; text-decoration:none; color:#666; background: #C7C4B3; border-bottom:1px solid #555; padding:1em; outline:0;}

#profileForms a.ui-accordion-link:hover{display:block; background:#eee; color:#000;}
#profileForms .open a.ui-accordion-link {display:block; background:#53525D; color:#fff;}
#profileForms a.ui-accordion-link h2 {font-size:2em; float:left; margin:0;}

/* edit link */
#profileForms a.ui-accordion-link span {float:right;display:block; overflow:hidden; color:#666; padding-left:30px; background:transparent url(../images/edit_item.png) no-repeat left;}
#profileForms a.ui-accordion-link:hover span {color:#000;}
#profileForms .open a.ui-accordion-link span {color:#000; display:none}

.tagsList {text-align:justify;}
.tagsList a {display:inline; padding-left:18px; color:#777; font-size:90%; text-decoration:none; white-space:nowrap;}
.tagsList a:hover {color:#FF0000;background:transparent url(../images/delete_item.png) left center no-repeat;}
/* **************************************************
Description: Browse Personas
************************************************** */
#personas {}
.persona {position:relative; border:1px solid #ccc; -moz-border-radius:5px; width:445px; height:200px; margin-top:3em; padding-top:1.5em;}
.persona.odd {float:left;}
.persona.even {float:right;}
.left{width:115px; float:left; padding-left:20px;}
.right{width:290px; float:right; padding-right:20px; padding-top:8px;}

.right h3 {margin:0; color:#CD0033;}
.right p strong {color:#000;}
.right p,
.right a {margin:0; color:#209292;}

.right .name {}
.right .quote {font-style:italic; color:#666; font-size:0.916em;}
.right .age {}
.right .tags {text-align:justify;}

.left .photo {background:transparent url("../images/browse-photo-bg.png")no-repeat;  height:100px;}
.left .photo {background-position:-10px center;}
.left .photo img {position:relative; top:10px; left:10px;}
.left .photo img:hover {top:8px; left:8px; border:2px solid black;}
.left .rating {}
.left .completeness {}
.left .viewFullPersona {}

.actions {position:absolute; padding:1em 0 1em;  background:transparent; top:5px; right:5px; text-align:right;}
.actions div {height:1.5em;}
.actions:hover {width:150px; background:#eee; -moz-border-radius:5px 0px 0px 5px;}
.actions div a {display:none;}
.actions:hover a {display:block;}
.addToFavorites {padding-right:20px; background:transparent url("../images/add_to_favorites.png") right no-repeat;}
.addToFavorites a {text-decoration:none; color:#000;}
.addToFavorites a:hover {text-decoration:underline; color:red;}

.viewPersona {padding-right:20px; background:transparent url("../images/note.png") right no-repeat;}
.viewPersona a {text-decoration:none; color:#000;}
.viewPersona a:hover {text-decoration:underline; color:red;}

.editPersona {padding-right:20px; background:transparent url("../images/note.png") right no-repeat;}
.editPersona a {text-decoration:none; color:#000;}
.editPersona a:hover {text-decoration:underline; color:red;}
/*END .persona Blocks*/

#SortSection ul {display:block; float:left; width:100%;}
#SortSection ul li {display:block; float:left;}
#SortSection a.button {display:block; float:left; margin:auto 5px; padding-left:15px; padding-right:15px; color:#C7C4B3; text-decoration:none; font-weight:bold;}
#SortSection a.button:hover {-moz-border-radius:3px; background:#666; color:#FFF; text-decoration:none;}
.allPublic a.button.allPublic,
.myFavorites a.button.myFavorites,
.myGroups a.button.myGroups  {-moz-border-radius:2px; background:#000; color:#FFF; text-decoration:none;}
#SortSection ul li.showing {font-weight:bold; color:#000; margin-left:50px;}
#SortSection ul li.last {float:right; padding-right:20px;}
li.showing .tags {color:#006666;}

/* Toggle Changes */
#Browse img.square, #Browse .toggle img.small, #Browse .toggle .extended {display:block;}
#Browse img.small, #Browse .toggle img.square, #Browse .extended {display:none;}

/* Buttons Background */
a.infoButton, a.fullViewButton, a.favButton, a.midButton {display:block; background:transparent url("../images/icon-sheet.png") no-repeat; width:40px; height:40px; outline:0;}
/* Hover/Selected States */
a.infoButton {background-position:left -240px;}
	.toggle a.infoButton {background-position:right -240px;}
a.fullViewButton {background-position:left -120px;}
	/*.toggle a.fullViewButton {background-position:right -120px;}*/
a.favButton {background-position:left -180px;}
	.isFav a.favButton {background-position:right -180px;}
a.midButton {background-position:left -60px;}
	.toggle a.midButton {background-position:right -60px;}		
/* **************************************************
Description: Manage Personas
************************************************** */
table.personas {border-collapse:collapse; width:100%;}
table.personas tr {} /* border not visible in IE6 7 */
table.personas tr td {border:2px solid #666; vertical-align:top;} /*BG images in ie only */
td img {}
/* **************************************************
Description: Persona View
************************************************** */
.profile dl {clear:both; margin-bottom:1.5em}
.profile dl dt {width:190px; clear:left; float:left;}
.profile dl dd {width:340px; float:left; padding-left:10px; padding-bottom:1.5em}
/* **************************************************
Description: Admin Sections
************************************************** */
table.strip tr.odd {background:#eee;}