/* 
Title:     profile styles for screen media
Author:    steve@divinemass.com
Updated:   September 2nd 2008

Index:
(Y) 1. profile snippet styles
(N) 2. profile view styles
(N) 3. profile photo styles
(N) 4. ajax popup styles
*/

/* 1. member search
---------------------------------------------------------- */

#member-search {
 display: block;
 width: 510px;
 height: 164px;
 margin: 0 0 10px 0;
 padding: 16px 0 0 172px;
 background: url(../images/dashboard/search-bg.jpg) no-repeat 0 0;
 color: #000; }

#member-search-form {
 display: block;
 width: 466px;
 min-height: 134px;
 padding: 6px 6px 2px 6px;
 background: #eee url(../images/dashboard/search-form-bg.jpg) no-repeat 0 0;
 border: 1px solid #fff; }

#member-search-form fieldset {
 margin: 0;
 padding: 5px 3px 1px 3px;
 border: none; }

#member-search-form legend {
 margin: 0;
 padding: 0 0 7px 18px;
 font-weight: bold;
 color: #666;
 background: url(../images/common/search-icon.gif) no-repeat 0 30%; }

#member-search-form p {
 margin: 0 0 6px 0;
 padding: 0; }

#member-search-form .label-gender, #member-search-form .label-county {
 margin: 0;
 padding: 0;
 width: 58px; }

#search-results-header {
 display: block;
 width: 682px;
 height: 7px;
 background: url(../images/common/grey-container-top.gif) 0 0 no-repeat; }

#search-options {
 display: block;
 width: 648px;
 height: 3em;
 padding: 0 10px 5px 10px;
 line-height: 3em;
 background: #eee url(../images/common/silver-fade.gif) 0 50% no-repeat; }

#search-options p {
 margin: 0;
 padding: 0; }

#search-options .left {
 float: left; }

#search-options .right {
 float: right; }

#search-results {
 float: left;
 padding: 0;
 color: #333; }

#search-tools {
 display: block;
 padding: 5px 10px 2px 10px;
 background: url(../images/common/silver-fade.gif) 0 50% no-repeat;
 float: left; }

#search-tools label {
 display: inline;
 font-weight: bold;
 padding: 0 0 0 18px;
 background: url(../images/common/save-icon.gif) no-repeat 0 50%; }

#search-tools form {
 display: inline; }

/* 1. profile snippet styles
---------------------------------------------------------- */

#member-snippets {
 display: block; }

#member-snippets dl, #member-snippets dt, #member-snippets dd {
 margin: 0;
 padding: 0;
 border: 0 none; }

#member-snippets .row {
 float: left;
 width: 668px;
 margin: 0 0 2px 0;
 background: #333 url(../images/common/member-snippet-classic-bg.gif) 0 0; }

#member-snippets dl.classic-view {
 display: block;
 width: 658px;
 margin: 0;
 padding: 7px 5px 5px 5px;
 background: #333 url(../images/common/member-snippet-classic-bg.gif) 0 0;
 border-bottom: 2px solid #666;
 color: #eee;
 float: left; }

#member-snippets dl.gallery-view {
 float: left; 						
 width: 324px;
 margin: 0;
 padding: 7px 5px 5px 5px;
 color: #eee; }

#member-snippets dt {
 float: left; 
 width: 114px;
 margin: 0 10px 0 5px;
 padding: 5px 0 10px 0;
 background-color: #f7f7f7;
 text-align: center;
 max-height: 140px;
 overflow: hidden;
 border-bottom: 3px solid #111;
 border-right: 3px solid #111; }

#member-snippets .photo-container {
 margin: 0;
 padding: 0;
 max-height: 130px;
 overflow: hidden; }

#member-snippets dt img {
 border: 1px solid #888;
 margin: 0 auto 0 auto; }

#member-snippets dd {
 padding-top: 5px;
 border-bottom: 0 none;
 color: #fff; }

#member-snippets dd p {
 margin: 0 0 0.3em 0;
 padding: 0; }

#member-snippets .classic-details {
 float: left;
 width: 182px; }

#member-snippets .gallery-details {
 float: left;
 width: 188px; }

#member-snippets .heading {
 padding-bottom: 1.3em;
 font-weight: bold; }

#member-snippets .green {
 color: #66ff00; }

#member-snippets .amber {
 color: #ffcc00; }

#member-snippets .red {
 color: #ff3300; }

#member-snippets .tools {
 margin: 0;
 padding: 1.3em 0 5px 0; }

#member-snippets .tools li {
 margin: 0 2px 0 0;
 padding: 0;
 display: inline;
 list-style: none;
 background: none; }

#member-snippets a:link, #member-snippets a:visited, #member-snippets a:hover {
 text-decoration: underline;
 color: #77BBEE; }

#member-snippets .intro {
 float: left;
 width: 338px; }

#member-snippets .matchscore-green {
 float: right;
 width: 55px;
 height: 55px;
 margin: 0 0 0 5px;
 padding: 20px 0 0 20px;
 font-size: 18px;
 font-weight: bold;
 background: url(../images/search/matchscore-green-light.png) no-repeat top center; }

#member-snippets .matchscore-amber {
 float: right;
 width: 55px;
 height: 55px;
 margin: 0 0 0 5px;
 padding: 20px 0 0 20px;
 font-size: 18px;
 font-weight: bold;
 background: url(../images/search/matchscore-amber-light.png) no-repeat top center; }

#member-snippets .matchscore-red {
 float: right;
 width: 55px;
 height: 55px;
 margin: 0 0 0 5px;
 padding: 20px 0 0 20px;
 font-size: 18px;
 font-weight: bold;
 background: url(../images/search/matchscore-red-light.png) no-repeat top center; }

#member-snippets .matchscore-dimmed {
 float: right;
 width: 55px;
 height: 55px;
 margin: 0 0 0 5px;
 padding: 20px 0 0 20px;
 background: url(../images/search/matchscore-dimmed-light.png) no-repeat top center; }

#member-snippets .matchscore-text {
 display: none; }

#member-snippets .videolink {
 clear: right;
 float: right;
 width: 75px;
 margin: 0 0 0 5px;
 text-align: center; }

#member-snippets .hidelink {
 float: right;
 width: 16px;
 height: 16px; }

/* 2. profile view styles
---------------------------------------------------------- */

#member-snippets #viewmedia {
 display: block;
 margin: 1px 0 0 0; }

#member-snippets #viewmedia li {
 display: block;
 margin: 0 0 3px 0;
 padding: 0;
 background: none; }

#member-snippets #basics {
 display: block;
 margin: 1px 0 0 0;
 padding: 0; }

#member-snippets #basics li {
 display: block;
 margin: 0 0 2px 0;
 padding: 0;
 background: none; }

#profile-view {
 clear: left;
 float: left;
 padding: 0; }

#profile-view table {
 width: 668px;
 margin: 0; }

#profile-view h3 {
 margin: 0; }

#profile-introduction {
 display: block;
 margin: 0 0 1em 0;
 font-size: 120%;
 line-height: 1.4em; }

#profile-introduction h4 {
 margin: 0;
 padding: 0 10px 8px 10px;
 font-size: 13px; }

#profile-introduction p {
 padding: 0 10px 6px 10px; }

#profile-view .question {
 width: 213px;
 font-weight: bold;
 text-align: right; }

#profile-view .answer { }

#profile-view h4 {
 display: block;
 margin: 0;
 padding: 8px 0 8px 30px;
 font-size: 95%;
 color: #eee;
 background: #666 url(../images/common/h4-bg.gif) no-repeat 0 50%; }

/* 3. profile photo styles
---------------------------------------------------------- */

#profile-photos {
 display: block;
 width: 646px;
 float: left; }

#profile-photos .row {
 display: block;
 float: left;
 margin: 0;
 padding: 0; }

#profile-photos .photo {
 float: left; 
 width: 110px;
 margin: 0 10px 0 0;
 padding: 5px 0 10px 0;
 background-color: #fff;
 text-align: center;
 border-bottom: 1px solid #000;
 border-right: 1px solid #000; }

#profile-photos img {
 width: 100px;
 border: 1px solid #888;
 margin: 0 auto 0 auto; }

/* 4. ajax popup styles
---------------------------------------------------------- */

#popup-window {
 padding: 5px;
 background: #fff;
 border: 1px solid #666; }

#popup-title {
 display: block;
 height: 1em;
 margin: 0 0 2px 0;
 padding: 5px 10px 5px 10px;
 background: #333; }

#popup-title h1 {
 float: left;
 display: inline;
 margin: 0;
 padding: 0;
 font-size: 85%;
 line-height: 1em;
 color: #fff; }

#popup-title p {
 float: right;
 display: inline;
 margin: 0;
 padding: 0;
 font-size: 10px;
 font-weight: bold;
 line-height: 1em;
 color: #fff; }

#popup-title a:link, #popup-title a:visited {
 color: #fff;
 font-weight: bold;
 text-decoration: none; }

#popup-title a:hover {
 color: #fff;
 font-weight: bold;
 text-decoration: underline; }

#popup-header {
 display: block;
 margin: 0 1px 2px 1px;
 padding: 10px;
 background: #FFFFCC;
 border: 1px solid #ccc; }

#popup-body {
 display: block;
 margin: 0 1px 2px 1px;
 padding: 10px;
 background: #eee;
 border: 1px solid #ccc; }

#popup-body ul {
 margin: 0 0 10px 0;
 padding: 0 0 10px 0;
 border-bottom: 1px solid #ccc; }

#popup-body ul li {
 display: inline;
 list-style: none;
 background-image: none; }

#popup-body ol {
 margin: 0 0 1em 20px;
 padding: 0; }

#popup-body o1 li {
 display: block;
 line-height: 1.3em; }

#popup-body label {
 display: block;
 padding: 0 0 3px 0; }

#popup-body input, #popup-body textarea {
 font-size: 105%; }

#popup-body .tick {
 padding: 0 0 0 18px;
 background: url(../../assets/images/common/tick-icon.gif) no-repeat 0 0; }

#popup-body .cross {
 padding: 0 0 0 18px;
 background: url(../../assets/images/common/cross-icon.gif) no-repeat 0 50%; }

#popup-footer {
 display: block;
 margin: 0 1px 2px 1px;
 padding: 10px;
 font-size: 85%;
 background-color: #FFFFCC;
 border: 1px solid #ccc; }

#popup-footer p {
 margin: 0;
 padding: 0; }

#popup-footer .important {
 padding: 0 0 0 18px;
 background: url(../../assets/images/common/alert-icon.gif) no-repeat 0 50%; }

/* 3. mailbox styles
---------------------------------------------------------- */

#mailbox dl {
 margin: 0;
 border-top: 0 none;
 min-height: 110px;
 border-bottom: 1px solid #ddd; }

#mailbox dl.light {
 background: #ffffdd; }

#mailbox dl.dark {
 background: #ffffcc; }

#mailbox dt {
 float: left; 
 width: 50px;
 margin: 0;
 padding: 10px 0 0 0;
 text-align: center;
 border: 0 none; }

#mailbox dd {
 border: 0 none; }

#mailbox dd.photo {
 float: left; 
 width: 85px;
 margin: 10px 20px 0 0;
 padding: 5px 0 10px 0;
 background-color: #fff;
 text-align: center;
 border-bottom: 1px solid #000;
 border-right: 1px solid #000; }

#mailbox dd.photo img {
 width: 75px;
 border: 1px solid #888;
 margin: 0 auto 0 auto; }

#mailbox dd.message {
 padding-left: 157px;
 min-height: 110px; }

#mailbox dd p {
 padding-bottom: 5px;
 line-height: 1.4em; }