/* 

This stylesheet was created by sofamade.com
exclusively for the osnapz.com web interface.
Copyright (c) Osnapz. All rights reserved.

*/

/* @group CSS Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1.22em;
	font-family: inherit;
	vertical-align: baseline;
}

a img, :link img, :visited img {
	border: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ol, ul {
	list-style: none;
}

q:before, q:after, blockquote:before, blockquote:after {
	content: "";
}

/* @end */

/* @group Self Clearing Floats */

#photos, #show-images, #more-images, #members, .member-clear, .form, #comment-list, .comment-odd, .comment-even {
	display: inline-block;
}

#photos, #show-images, #more-images, #members, .member-clear, .form, #comment-list, .comment-odd, .comment-even {
	display: block;
}

#photos:after, #show-images:after, #more-images:after, #members:after, .member-clear:after, .form:after, #comment-list:after, .comment-odd:after, .comment-even:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* @end */

/* @group Structure */

body {
	text-align: center;
	background-color: #444340;
}

.container {
	text-align: left;
	width: 900px;
	margin: 0 auto;
	display: inline-block;
}

.container {
	display: block;
}

.container:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* @end */

/* @group Header */

#header {
	color: #fff;
	font: 81.25% "Lucida Grande", Verdana, sans-serif;
	background: #42413f url(../images/header.png) repeat-x 0 top;
	/* border-bottom: 7px solid #6db5c9; Tuyen: removed header bottom blue border*/
}

#logo {
	width: 160px;
	height: 45px;
	float : left;
}

#login {
	text-align: right;
	width: 600px;
	padding-top: 15px;
	float: right;
}

#login input
{
    float: right;
}

#login .TwitterLogin { margin-right: 10px; }
#login .FacebookLogin { margin-right: 10px; margin-top: 1px; width: 120px; float: right; }
#login .YouTubeLogin { margin-right: 10px; width: 23px; margin-top: 1px; }
#login .FoursquareLogin { margin-right: 10px; margin-top: 1px; }
#login .LinkedInLogin { margin-right: 10px; margin-top: 1px; }
#login .FlickrLogin { margin-right: 10px; margin-top: 1px; }



/* @end */

/* @group Navigation */

/* Tuyen: use this navigation from stylesheet.css to get the tabs */
#navigation {
	color: #fff;
	font: 87.5% "Lucida Grande", Verdana, sans-serif;
	background: #6db5c9 url(../images/navigation.png) repeat center top;
	height: 31px;
	padding-top: 15px;
}

#navigation ul {
	margin: 0;
	padding: 0;
}

#navigation ul li {
	text-align: center;
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}

#navigation ul li a:link, #navigation ul li a:visited {
	color: #fff;
	line-height: 1.15em;
	text-decoration: none;
	text-align: center;
	background: #407b8b url(../images/tab.png) repeat-x center top;
	margin-right: 8px;
	padding: 8px 24px 7px;
	float: left;
}

#navigation ul li a:link.current, #navigation ul li a:visited.current {
	color: #333;
	font-weight: bold;
	text-decoration: none;
	background: #ecebeb url(../images/tabbed.png) repeat-x center top;
}

#navigation ul li a:hover {
	background-color: #3e8ea2;
	background-image: none;
}


/*
#navigation {
	width: 500px;
	padding-top: 17px;
	float: right;
}
#navigation ul {
	margin: 0;
	padding: 0;
}

#navigation ul li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}

#navigation ul li a:link, #navigation ul li a:visited {
	color: #fff;
	line-height: 1.15em;
	text-decoration: none;
	margin-left: 23px;
	float: right;
}

#navigation ul li a:link.current, #navigation ul li a:visited.current {
	color: #eca827;
	font-weight: bold;
	text-decoration: none;
}

#navigation ul li a:hover {
	color: #ccc;
	text-decoration: none;
}
*/

/* @end */

/* @group Structure */

#layout {
	background-color: #FFFFFF; /* #ecebeb; */
	padding: 40px 0;
}

#column-left {
	width: 300px;
	float: left;
}

#column-right {
	width: 565px;
	float: right;
}

/*

 @end */

/* @group Hyperlinks */

.right a:link, .right a:visited, #links a:link, #links a:visited, #interview p a:link, #interview p a:visited, .comment-right p a:link, .comment-right p a:visited {
	color: #41b1d0;
	font-family: "Lucida Grande", Verdana, sans-serif;
	text-decoration: underline;
}

.right a:hover, #links a:hover, #interview p a:hover, .comment-right p a:hover {
	color: #eca827;
	font-family: "Lucida Grande", Verdana, sans-serif;
	text-decoration: underline;
}

h5 a:link, h5 a:visited {
	color: #3e7a8a;
	text-decoration: none;
}

h5 a:hover, h6 a:link, h6 a:visited, .comment-right .title a:link, .comment-right .title a:visited {
	color: #eca827;
	text-decoration: none;
}

h6 a:hover, .comment-right .title a:hover {
	color: #3e7a8a;
	text-decoration: none;
}

.mark-link a:link, .mark-link a:visited {
	color: #666;
	font: 68.75% "Lucida Grande", Verdana, sans-serif;
	text-decoration: none;
}

.mark-link a:hover {
	color: #41b1d0;
	text-decoration: none;
}

/* @end */

/* @group Global */

h1 {
	color: #3e7a8a;
	font: bold 137.5% "Lucida Grande", Verdana, sans-serif;
}

h2 {
	color: #d59625;
	font: bold 112.5% "Lucida Grande", Verdana, sans-serif;
	margin-bottom: 20px;
	padding: 5px 0;
	border-bottom: 1px solid #a9a9a9;
}

h3 {
	color: #d59625;
	font: bold 81.25% "Lucida Grande", Verdana, sans-serif;
	margin-bottom: 7px;
}

h4 {
	color: #333;
	font: bold 75% "Lucida Grande", Verdana, sans-serif;
	margin-bottom: 7px;
}

h5 {
	color: #3e7a8a;
	font: bold 81.25% "Lucida Grande", Verdana, sans-serif;
	margin-bottom: 8px;
}

.right {
	color: #666;
	font: 68.75% "Lucida Grande", Verdana, sans-serif;
	margin-top: 10px;
	float: right;
}

hr {
	padding-bottom: 20px;
	border-top: 1px solid #a9a9a9;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

strong {
	font-weight: bold;
}

.clear {
	clear: both;
}

/* @end */

/* @group Column Left */

#column-left #avatar {
	margin-bottom: 30px;
}

#column-left #avatar img {
	background-color: #bcbcbc;
	padding: 5px;
}

#column-left #avatar img:hover {
	background-color: #adadad;
}

#about {
	padding-bottom: 20px;
}

#more-about ul, #links ul {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #a9a9a9;
}

#more-about ul {
	padding-top: 20px;
	border-top: 1px solid #a9a9a9;
}

#about ul li, #more-about ul li, #links ul li {
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	line-height: 1.52em;
	padding-bottom: 5px;
}

#about ul li strong, #more-about ul li strong {
	color: #3e7a8a;
	margin-right: 3px;
}

#facts {
}

#facts p {
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	line-height: 1.52em;
	cursor: pointer;
	margin-top: 5px;
}

#essential p {
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	padding-bottom: 7px;
}

/* @end */

/* @group Column Right */

#column-right p.since {
	color: #666;
	font: 68.75% "Lucida Grande", Verdana, sans-serif;
	padding-bottom: 5px;
}

#column-right p.details {
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	line-height: 1.52em;
	padding-bottom: 20px;
}

#buttons {
	padding-bottom: 20px;
}

.button {
	margin-right: 3px;
}

#membercaption {
	color: #333;
	font: italic bold 75% "Lucida Grande", Verdana, sans-serif;
	line-height: 1.52em;
	padding-bottom: 30px;
}

#interview {
	padding-bottom: 20px;
}

#interview p {
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	line-height: 1.52em;
	padding-bottom: 15px;
}

#photos {
	padding-bottom: 10px;
}

#column-right .avatar {
	margin-right: 10px;
	float: left;
}

.images {
	margin: 0 35px 25px 0;
	float: left;
}

.images img, .avatar img {
	background-color: #bcbcbc;
	padding: 5px;
}

.images img:hover, #column-right .avatar img:hover {
	background-color: #adadad;
}

#friends {
	padding-bottom: 10px;
}

.member {
	width: 270px;
	padding: 0 10px 20px 0;
	float: left;
}

.member h6 {
	font: bold 81.25% "Lucida Grande", Verdana, sans-serif;
	padding-bottom: 3px;
}

.member p {
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	padding-bottom: 10px;
}

.mark {
	margin-right: 6px;
	float: left;
}

.mark-link {
	float: left;
}

.form-left {
	color: #333;
	font: bold 81.25% "Lucida Grande", Verdana, sans-serif;
	text-align: right;
	width: 150px;
	float: left;
}

.form-right {
	color: #666;
	font: 68.75% "Lucida Grande", Verdana, sans-serif;
	width: 400px;
	float: right;
}

.form-right textarea {
	color: #333;
	font: 12px "Lucida Grande", Verdana, sans-serif;
	width: 370px;
	height: 150px;
	margin-bottom: 5px;
	padding: 2px;
	border-top: 2px solid #888;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.form-right .form-submitter {
	text-align: right;
	padding: 20px 30px 0 0;
}

.form-right .form-submit {
	padding: 20px 0;
}

#comments h6 {
	color: #d59625;
	font: bold 112.5% "Lucida Grande", Verdana, sans-serif;
	margin-bottom: 5px;
	padding: 5px 0;
	border-bottom: 1px solid #a9a9a9;
}

#comment-list {
	padding-bottom: 20px;
}

.comment-odd {
	padding: 15px 10px 5px;
}

.comment-even {
	background-color: #d8d8d8;
	padding: 15px 10px 5px;
}

.comment-left {
	width: 100px;
	float: left;
}

.comment-right {
	width: 430px;
	float: right;
}

.comment-avatar {
	margin-bottom: 15px;
}

.comment-avatar img {
	background-color: #bcbcbc;
	padding: 5px;
}

.comment-avatar img:hover {
	background-color: #adadad;
}

.comment-right .title {
	font: bold 81.25% "Lucida Grande", Verdana, sans-serif;
}

.comment-right .date {
	color: #666;
	font: 68.75% "Lucida Grande", Verdana, sans-serif;
}

.comment-right p {
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	line-height: 1.52em;
	padding: 5px 0 10px;
}

/* @end */

/* @group Slimbox */
/*
#lbOverlay {
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	left: 50%;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(../images/loading.gif) no-repeat center;
}

#lbImage {
	border: 10px solid #fff;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(../images/prevlabel.gif) no-repeat 0% 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(../images/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: "Lucida Grande", Verdana, sans-serif;
	font-size: 75%;
	color: #333;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(../images/closelabel.gif) no-repeat center;
	margin: 5px 0;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}
*/
/* @end */

/* @group Footer */

#footer {
	color: #fff;
	font: 68.75% Verdana;
	padding: 20px 0 80px;
	border-top: 7px solid #6db5c9;
}

#footer-right {
	float: right;
}

#footer-right a:link, #footer-right a:visited {
	color: #eca827;
	text-decoration: none;
}

#footer-right a:hover {
	color: #41b1d0;
	text-decoration: none;
}

/* @end */

/* @group Tooltip */

.tool-tip {
	color: #fff;
	width: 200px;
	z-index: 13000;
}
 
.tool-title {
	color: #eca827;
	font: bold 11px "Lucida Grande", Verdana, sans-serif;
	background: url(../images/bubble.png) no-repeat left top;
	margin: 0;
	padding: 10px 10px 4px;
	text-align:center;
}

.tool-title-empty { /* Use when there is no title text */
	background: url(../images/bubble.png) no-repeat left top;
	padding: 2px 0px 4px;
}
 
.tool-text {
	font: 11px "Lucida Grande", Verdana, sans-serif;
	background: url(../images/bubble.png) no-repeat right bottom;
	padding: 5px 10px 10px;
	text-align:center;
}

/* @end */

/* @group Sub-Navigation */

#navigator ul {
	padding-bottom: 35px;
}

#navigator ul li a:link, #navigator ul li a:visited {
	color: #333;
	font: 110% "Lucida Grande", Verdana, sans-serif;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	display: block;
}

#navigator ul li a:link.active, #navigator ul li a:visited.active {
	font-weight: bold;
	text-decoration: none;
	font-size: 110%;
	/* background: url(../images/active.png) no-repeat left top; */
}

#navigator ul li a:hover {
	font-weight: bold;
	text-decoration: none;
	/* background: url(../images/active.png) no-repeat -265px top; */
}

/* @end */



/* Misc, added by Tuyen */
#ctl00_lnkDashboard /* keep in sync with stylesheet.css */
{
	text-decoration: none;
	color: #d59625;
	margin-left: 10px;
	margin-right: 10px;
}

#ctl00_lblLoginViewText /* keep in sync with stylesheet.css */
{
	margin-right: 10px;
}

#comments p.para, #friends p.para, #photos p.para{
	color: #333;
	font: 75% "Lucida Grande", Verdana, sans-serif;
	padding-top: 5px;
	padding-bottom: 15px;
}

#widgets 
{
    margin-top: 20px;
}
.sublink
{
    font-size: .75em; color: Silver; padding-left: 20px; font-weight: normal;
}

.avataritem 
{
    width: 70px;
    float: left;
}

#show-images
{
    width: 100%;
}

#show-images .websitedetail
{
    float: left; width: 420px
}

#show-images .websitedetailfull
{
    margin-bottom: 10px;
}

#show-images .badgelist
{
    margin-top: 20px;
    float: left; width: 480px;
}

#show-images .badge
{
    float: left; text-align: center; font: 75% verdana; height: 200px; width: 150px; margin-right: 10px;
}
#show-images .badge img
{
    width: 150px;
}

#show-images .membersiteavatar
{
    float: left; max-width: 73px;    
}

#bodycontent
{
    clear: both; font-family: verdana; padding-top: 20px;    
}

#bodycontent #navigator
{
    width: 100%;   
}

#bodycontent #navigator li
{
    float: left;
}

#bodycontent #badgecontent
{
    width: 100%;
    clear: both;
}
#bodycontent #badgecontent2
{
    float: left; width: 900px;    
}
#badgecontent .websiteicon
{
    float: left; padding-right: 10px;    
}

#profilecontent
{
    float: left; padding-left: 15px; font: 75% verdana; padding-bottom: 20px;    
}
.sitecontent
{
    font-size: 75%;
}
.sitecontent .contentitem
{
    border-bottom: 1px dotted #666666;
    padding: 10px 0px;
    width: 95%;
}
.sitecontent .contentitem2
{
    color: Gray;
    font-size: 11px;
}
.sitecontent .contentitemleft
{
    float: left;
    padding: 10px 0px;
    margin-right: 10px;
}
.sitecontent .contentitemright
{
    float: left;
    padding: 10px 0px;
}
.sitecontent .contentitemseparator
{
    clear: both;
    border-bottom: 1px dotted #666666;
}

.addthis_button_compact { float: left; font: 75% "Lucida Grande", Verdana, sans-serif; text-decoration: none; color: #3E7A8A; }
#badge-desc { clear: both; font: 14px verdana; padding-top: 20px; }
#badge-desc ul { margin-left: 30px; }

.summary-block {
	line-height: 1em;
	background: url(../images/profile-link.png) no-repeat left top;
	padding: 10px 50px 19px 15px;
	color: #fff;
	font: bold 190% "Lucida Grande", Verdana, sans-serif;
	float: left;
}

.summary-block-left
{
    width: 120px;
    float: left;
    text-align: left;
}
.summary-block-right
{
    width: 115px;
    float: right;
    text-align: right;
}
/* End of Stylesheet */