/* 

SELF PUBLICITY CSS 
v 1.0

*/


/* Common Stuff
 *________________________________ */
* { }
body { background-color: #fff; margin:10px 40px 40px; font-family: Lucida Grande, Verdana, Sans-serif; font-size: 14px; color: #4F5155; text-align:left; color:#666;  line-height:19px; }
#main-container { position:relative; width:960px; margin:0 auto; }
#content { position:relative; float:left; width:640px; margin-right:20px; }
#sidebar { position:relative; float:left; width:300px; } 
#footer { position:relative; margin-top:30px; font-size:11px; border-top:1px solid #e0e0e0; padding:5px 0; }
a { color:#00a0c6; background-color:trasparent; text-decoration:none; }
a.join-link { padding:2px 10px; background-color:#00a0c6; color:#fff;  }
a.button, a.big-button, a.big-button-orange { padding:2px 10px; background-color:#00a0c6; color:#fff; }
a.button-grey { background-color:#ccc; color:#000; padding: 3px 10px; font-size:.9em; }
a.big-button-orange { background-color:#f15625; font-size:17px; }
a.plus-button { background-color:#00a0c6; padding:2px 5px; font-weight:bold; color:#fff; font-size:20px; margin-right:10px; }
a img { border:none; }
div.section { border-top:1px solid #e0e0e0; margin-top:20px; }

h1 { color:#333; background-color: transparent; font-size: 16px; font-weight: bold; margin: 24px 0 2px 0; padding: 5px 0 0px 0; }
h2 { font-weight:lighter; font-size:18px; color:#333;  }
h3 { margin-top:0; padding-top:0; color:#333; }
.text { border:1px solid #c0c0c0; padding:3px 8px; font-size: 12px; }
textarea { font-family: Lucida Grande, Verdana, Sans-serif; font-size: 12px; } 
input.button { background-color:#00a0c6; color:#fff; font-size:14px; border:1px solid #00a0c6; border-top:0; border-left:0; padding:3px 8px 2px 8px; }
input.delete-button { background-color:#FF9999; color:#fff; font-size:14px; border:1px solid #FF9999; border-top:0; border-left:0; padding:3px 8px 2px 8px; }
hr { border:2px solid #e0e0e0; margin:20px 0; }
hr.thin { border:0; border-top:1px solid #e0e0e0; margin:20px 0;  }

small { color:#666; }
.delete-link { font-size:11px; }
.delete-link a, .cancel-button { color:#999999; }
.delete-link a:hover { color:#555; }
.warning-box { background-color:#FFFFCC; padding:20px; margin:10px 0; }
.error-messages { margin-bottom:5px; color:#FF3333; font-size:12px; }
.float-left, .fl { position:relative; float:left; display:inline; }
.float-right, fr { position:relative; float:right; display:inline; }
.mr10 { margin-right:10px; }
.ml10 { margin-left:10px; }
.ok-message { color:#999900 !important; }
.hide { display:none; }
.extra-info { color:#999; }
ul { list-style-type:none; }
ul.blank-list li { margin-bottom:10px;  }
.al_right, .al-right { text-align:right; }
.al_center, .al-center { text-align:center; }
ol { margin:0; padding-left:20px; }

/* Buttons 
 *______________________ */
.action-button, .active-button a { border-color:#C5E3F6; background-color:#00a0c6; color:#fff; padding:4px 10px; }
.disabled-button, .disabled-button a { border-color:#e0e0e0; background-color:#f0f0f0; color:#999; padding:4px 10px; }
a#cemail-button { border:2px solid #00a0c6; }

/* Tables
 *______________________ */
table tr th, table tr td { vertical-align:top;  }
table tr th { text-align:right; padding-right:10px; }

/* Pager
 *_______________________ */
ul.pager { list-style-type:none; }
ul.pager li { position:relative; float:left; }
ul.pager li a { padding:1px 5px; margin-left:2px; color:#666666; }
ul.pager li a:hover { background-color:#e0e0e0; }
ul.pager li a.active { background-color:#444; color:#fff; }


/* Header
 *________________________________ */
#header { position:relative; margin-bottom:10px; }
#header h1 { padding:0; margin:0; }
#header h1 a { position:relative; display:block; width:960px; height:82px; background-image:url(images/banner.gif); background-repeat:no-repeat; background-position:bottom center; }
#header h1 a span { display:none; }
#menu-section { background-color:#e0e0e0; padding:3px 20px; }
#menu-section a { color:#000; margin-right:10px; font-size:13px; }
#search-area { position:relative; display:block; width:590px; border:5px #e0e0e0 solid; padding:20px; margin-bottom:20px; }
#search-area th { text-align:left; }
#search-area td { padding-right:10px; }
#search-box form { position:relative; width:200px; margin:0 auto; }
#search-box form input { width:180px; height:23px; }
#search-box form input.button { width:120px; }
#search-box form input.submit-button { background-image:url(images/search-button.jpg); }

/* Header - SLIM version
 *________________________________ */
#header-slim #header-top { margin-bottom:20px; }
#header-slim h1 { padding:0; margin:0; }
#header-slim h1 { padding:0; margin:0; }
#header-slim h1 a { position:relative; display:block; float:left; width:307px; height:82px; background-image:url(images/selfpublicity-logo-82.jpg); background-repeat:no-repeat; background-position:bottom center; }
#header-slim h1 a span { display:none; }
#header-slim #search-form { border:1px solid #e0e0e0; position:relative; float:right; padding:10px; color:#000; font-weight:bold; margin-top:30px; }
#header-slim form input.button { width:30px; background-color:#00a0c6; text-align:center; color:#fff; border:none; padding:4px 0;  }
#header-slim form input.input-text { border:1px solid #e0e0e0; padding:5px 8px; color:#aaa; }
.menu-slim { margin-bottom:10px !important; padding:10px 10px !important; background-color:#f0f0f0 !important; border:1px solid #e0e0e0; }

/* Header
 *________________________________ */
#header-chunky { position:relative; margin-bottom:10px; }
#header-chunky h1 { padding:0; margin:0; }
#header-chunky h1 a { position:relative; display:block; width:960px; height:82px; background-image:url(images/banner.gif); background-repeat:no-repeat; background-position:bottom center; }
#header-chunky h1 a span { display:none; }
#header-chunky #search-form { float:right; font-weight:bold; padding:0;  }
#header-chunky form input.button { width:30px; background-color:#00a0c6; text-align:center; color:#fff; border:none;  }
#header-chunky form input.input-text { border:1px solid #e0e0e0; padding:5px 8px; color:#aaa; margin:0 !important; }
#header-chunky #menu-section { background-color:#f0f0f0; padding:3px 20px; }





/* Footer
 *________________________________ */
#footer a { margin-left:10px; }

/* Index
 *________________________________ */
div.headline { font-size:1.1em; margin-bottom:20px; border-bottom:1px solid #e0e0e0; padding:10px 0; }
div.headline h2 { padding-top:0; margin-top:0; }

/* User Details
 *________________________________ */
#user-details { margin:20px 0; }
.thumb-220 { position:relative; float:left; width:220px; margin-right:20px; }
#info { position:relative; width:400px; float:left; font-size:12px; overflow:hidden;  }
#info h2 { margin:0; }
#info .business { color:#666; }
.not-logged-in-box { padding:20px; background-color:#FFFFCC; margin-bottom:20px; font-size:15px; }
.report-box { width:300px; font-size:12px; }
ul.gallery {  list-style-type:none; }
ul.gallery li { position:relative; width:150px; margin-right:40px; float:left; }
ul.gallery li a img { border:none; }
#user-content h2 { font-size:18px; margin-top:40px; border-top:1px dotted #e0e0e0; padding-top:20px; }
#user-page h2.main { margin-bottom:0; padding-bottom:3px; border:none; font-size:1.7em; }
#user-page h3 { color:#000; }
/*.recommend-link { padding:5px 10px; background-color:#CC6600; color:#fff; }
.recommend-link-disabled { padding:5px 10px; background-color:#999999; color:#fff;  } */
#recommendation-request { background-color:#DAF0F6; padding:20px; margin-bottom:10px; }
#recommendation-request textarea { border:1px solid #e0e0e0; padding:10px; }
#recommendation-request h2 { margin-top:0; }
.user-list h4 { margin:0; color:#000; }
#recommend-me-button, #recommend-me-button-disabled { display:block; margin-bottom:5px; width:180px; padding:2px 10px;   }
#ask-recommend-request, #ask-recommend-request-disabled { display:block; margin-bottom:5px; width:180px; padding:2px 10px; }
#add-to-contacts-button, #add-to-contacts-button-disabled { display:block; width:180px;  padding:2px 10px; }
.share-section { padding:10px 0 5px 10px; font-size:12px; background-color:#f5f5f5; margin-top:10px; }


/* Logged in Home Page 
 *________________________________ */
#contact-box { position:relative; float:left; }
#recommended-box { position:relative; float:left; margin-left:20px; width:290px; }
#content .box { width:610px; font-size:14px; }
#content .box .title { font-weight:bold; font-size:18px; color:#000; }
.welcome-page .section img { margin-right:15px; }
ul.todo-list li { border:1px solid #e0e0e0; margin-bottom:10px; padding:10px; background-color:#f9f9f9; }
ul.todo-list li p { font-size:12px; } 
ul.todo-list li img { margin-right:10px; }

/* Edit Profile
 *________________________________ */
#editprofile-page h3 { margin-top:20px; }
#editprofile-page .photo-text { position:relative; float:left; width:300px; color:#666; margin-left:10px; font-size:11px; line-height:13px; }
#editprofile-page #content table, #account-page #content table { border:1px solid #e0e0e0; width:640px; padding-bottom:30px; margin-bottom:10px; background-color:#f9f9f9; }
#editprofile-page #content table tr th, #account-page #content table tr th  { width:160px; }
#editprofile-page #content table tr td, #account-page #content table tr th  { vertical-align:top; }
#editprofile-page #content table.no-borders, #account-page #content table.no-borders  { border:none; padding:0; background-color:#fff; }
#account-page #content table { border:1px solid #e0e0e0; width:640px; padding:30px 20px; margin-bottom:10px; background-color:#f9f9f9; }

/* Tools Page
 *_________________________________ */
#tools-page h3 { margin:20px 0 0 0; }
#tools-page .coming-soon { color:#666; }
#import-services { margin-top:10px; }

/* Gallery Edit
 *_________________________________ */
ul.gallery-edit { list-style-type:none; padding:0; margin:0; }
ul.gallery-edit li { border-bottom:1px solid #e0e0e0; padding:10px 0; }
ul.gallery-edit li .options { font-size:11px; color:666; line-height:13px; }
ul.gallery-edit li a img { border:none; }


/* Sidebar
 *________________________________ */
.box { position:relative; width:270px; padding:10px; border:5px solid #e0e0e0; font-size:12px; margin-bottom:10px; }
.box h2 { margin-top:0; font-weight:lighter;  }
#sidebar .section, .box .section { border-top:1px solid #e0e0e0; padding-top:10px; margin-top:10px; }
#sidebar .join { font-size:20px; text-align:center; padding:20px 10px !important; }
#sidebar .join a.big-join { padding:5px 10px; background-color:#00a0c6; color:#fff; margin-left:10px;  }
#sidebar #invite-box a.button, a.big-button { font-size:1.2em; padding:3px 20px; }
#sidebar .other-people a img { width:90px; height:90px; border:none; margin:0 3px 3px 0; }
.profile-details { position:relative; float:left; margin-left:10px; }
#sidebar h4 { margin-bottom:0; }

/* LIST
 *________________________________ */
ul { padding:0; margin:0; }
ul.user-list li {  position:relative; border-bottom:1px solid #f0f0f0; padding:20px 0; }
ul.user-list li:last-child { border:0; }
ul.user-list li h3 { margin:0; padding:0; }
ul.user-list li .thumb-list { position:relative; float:left; width:90px; margin-right:20px; }
ul.user-list li .thumb-list small { font-size:11px; }
ul.user-list li .details { position:relative; float:left; width:530px; }
ul.user-list li .details .comment-details { position:relative; background-color:#f7f7f7; padding:15px; font-size:12px; margin-top:10px; }
ul.user-list li .options { position:relative; font-size:11px; }
ul.user-list li a img { border:none; }
ul.small-user-list li { padding:5px 0px; }
.recommendation-box ul.user-list li { position:relative; }
.recommendation-box ul.user-list li .details { position:relative; float:left; width:400px; }
.recommend-text { font-size:11px; color:#888; }
.border-top { margin-top:20px; border-top:1px solid #f0f0f0; }

/* Contacts Page
 *________________________________ */
.small-user-list .thumb { position:relative; width:30px; margin-right:10px; float:left; }
.small-user-list .email-address { position:relative; float:left; width:200px; overflow:hidden; font-size:13px; }
.small-user-list .actions-list { position:relative; float:right; text-align:right; }
.small-user-list .actions-list span { margin-left:5px; color:#999999; float:left; }
.small-user-list .actions-list .button-grey { margin-left:10px; }
.recommend-button { display:block; position:relative; border:1px solid #f0f0f0; width:180px; font-size:12px; padding:3px 0; margin-bottom:5px; }
.ask-request-button { display:block; position:relative; border:1px solid #f0f0f0; width:180px; font-size:12px; padding:3px 0; float:left; margin-right:5px; }
.remove-button { border:1px solid #f0f0f0; text-align:center; font-size:12px; width:20px; padding:3px 0; float:left; background-color:#f0f0f0; color:#666666 !important;  }
.active-button { border-color:#C5E3F6; background-color:#00a0c6; color:#fff; }

/* Popup Modal
 *________________________________ */
.popup-box h4 { font-size:14px; margin-top:0; }
#simplemodal-overlay { background-color:#000;}
#simplemodal-container { background-color:#fff; border:8px solid #444; padding:12px;}
#simplemodal-container a.modalCloseImg {
	background:url(images/x.png) no-repeat; /* adjust url as required */
	width:25px;
	height:29px;
	display:inline;
	z-index:3200;
	position:absolute;
	top:-15px;
	right:-18px;
	cursor:pointer;
}
#publish-popup { text-align:center; }
#login-popup table { position:relative; float:left; padding-right:20px; border-right:2px solid #000; margin-right:20px; }
#login-popup .join-section { }

/* Tool tips
 *________________________________ */
.bt-content { font-size: small; color: #000; line-height: normal; }

/* styling for active target elements - usually for background hilighting */
.bt-active {  }


/* Hacks
 *______________________ */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */