/* structure */
html,body{height: 100%}
body{color:#111;font:15px/18px "Calibri", "Futura", Helvetica, fantasy, arial, sans-serif;margin: 0;padding: 0;}
body.print{background: #fff}
#page{min-height: 100%;overflow: hidden; }
#wrap{width: 960px;padding:6px 26px 260px;margin: 0 auto}
/* header */
#header *{margin: 0;padding: 0}
#header .l{position: relative;background: url(../images/bg/header.jpg) no-repeat 0 0;height: 139px;}
#header .logo{width: 235px;height: 102px;position: absolute;left: 17px;top: 3px }
#header .right-part {position: absolute;right: 26px;top: 25px; font-size: 18px; width: 260px;text-align: right }
#header .right-part a{color: #fff;font-weight: bold }
#header .right-part .donate {margin: 5px 0 0 10px;float: right}
#header .right-part .donate a{display: block;width: 95px;height: 35px;line-height: 32px;text-align: center;background: url(../images/bg/btn/red.png) no-repeat 0 0;text-transform: uppercase}
#header .right-part .donate a:hover{background-position: 0 100%}
#header .right-part .user-link {padding-top: 14px}
#header .right-part .user-link a{color: #5f5f5f;text-decoration: underline}
#header .b-lang{position: absolute;top:2px;right: 28px;}
#header .b-lang select{padding: 0;font-size: 11px}
/* main menu */
#main-menu { float: right; margin: 78px 28px 0 0; padding: 6px 0 0;
background:#8f8b35 url(../images/bg/menu-gradient.png) repeat-x 0 -110px;
line-height: 100%; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); box-shadow: 0 1px 3px rgba(0,0,0, .4);}
#main-menu li { margin: 0 15px; padding: 0 0 6px; float: left; position: relative; list-style: none;}
/* main level link */
#main-menu > li a{text-transform: uppercase}
#main-menu a { font: bold 16px/18px arial, sans-serif; color: #fff; text-decoration: none; display: block; padding: 7px 10px; margin: 0;
-webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; text-shadow: 0 1px 1px rgba(0,0,0, .3);}
#main-menu a:hover { background: #000; color: #fff;}
/* main level link hover */
#main-menu .current a, #main-menu li:hover > a { background: #666 url(../images/bg/menu-gradient.png) repeat-x 0 -40px;
color: #444; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 #fff}
/* sub levels link hover */
#main-menu ul li:hover a, #main-menu li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none;
-moz-box-shadow: none;box-shadow: none;}
#main-menu ul a:hover { background: #0078ff url(../images/bg/menu-gradient.png) repeat-x 0 -100px !important; color: #fff !important;
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
/* dropdown */
#main-menu li:hover > ul { display: block;}
/* level 2 list */
#main-menu ul { display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 37px; left: 0;z-index: 10;
background: #ddd url(../images/bg/menu-gradient.png) repeat-x 0 0; border: solid 1px #b4b4b4;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#main-menu ul li { float: none; margin: 0; padding: 0;}
#main-menu ul a { font:14px/16px arial, sans-serif; text-shadow: 0 1px 0 #fff;}
/* level 3+ list */
#main-menu ul ul { left: 181px; top: -3px;}
/* rounded corners of first and last link */
#main-menu ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px;
border-top-left-radius: 9px;border-top-right-radius: 9px;}
#main-menu ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px;
border-bottom-left-radius: 9px;border-bottom-right-radius: 9px;}
/* sidebar */
#sidebar{float: right;width: 165px;padding-top: 14px}
ul.recent-hugs{margin: 0;padding: 5px;list-style: none}
.b-content, .user-profile-left{margin-right: 181px}
#footer {height: 210px;color: #fff;clear: both;width: 1000px;margin: 0px auto 0}
#footer .inner{background: url(../images/bg/footer.jpg) no-repeat 27px 0;min-height: 139px;position: relative;margin-bottom: 25px}
#footer .inner .logo{position: absolute;width: 190px;height: 90px;top:25px;left: 47px;background: url(../images/logo.png) no-repeat 0 0}
#footer .inner *{margin: 0;padding: 0}
#footer .inner li{list-style: none}
#footer .menu {padding: 12px 0 0 260px;}
#footer .menu > li{float: left;width: 170px}
#footer .menu > li > a{font-weight: bold;font-size: 16px}
#footer .menu a{color: #fff}
#footer .menu a:hover{text-decoration: underline}
#footer p{text-align: center; color: #707583;margin:0 0 5px}
#footer p a{color: blue;text-decoration: underline}
#footer a{font-weight:normal}
/* common classes */
.noborder{border: 0px}
.left{float: left}
.right{float: right}
.bold{font-weight: bold}
.clear{clear: both}
.full{width: 100%}
.wrap{overflow: hidden}
.corners-5{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
div.l{width: 1000px;margin: 0 auto!important}
/* links */
a {color:#3B5998;text-decoration:none; font-weight:bold;}
a:hover {text-decoration: underline}
/* headings */
h1, h2{font:bold 28px/32px lucida grande, lucida sans, helvetica, arial, sans-serif;color: #30450A;margin: 0 0 0.5em}
h1, h2{text-shadow: #e7e7e7 0px 1px 1px;}
h2{font-size: 18px}
h2{line-height: 24px}
label{color:#000;font:bold 11px/14px tahoma, sans-serif;}
h1 span {font-size: 16px; color:#cc0000}
h1 strong {color:#cc0000; text-decoration:underline}
/* inputs */
input[type=text],input[type=password],textarea,select{padding: 2px;border: 1px solid #ccc;
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
input[type=text]:hover,input[type=password]:hover,textarea:hover,select:hover{border-color:#9eb9c7;}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:#6aa8c8;outline: none;-moz-box-shadow:0 0 5px #6aa8c8;-webkit-box-shadow:0 0 5px #6aa8c8;box-shadow:0 0 5px #6aa8c8;}
input[type=submit],button{border: 1px solid #017098;background: #cc0000;color: white;font-size: 16px;padding:10px;cursor: pointer;overflow: visible}
input.searchbutton[type=submit],button{border: 1px solid #017098;background: #3B5998;color: white;font-size: 12px;padding:3px;cursor: pointer;overflow: visible}
/* forms */
.form label{display: block;padding-bottom: 3px}
.form input,.form textarea{margin-bottom: 15px}
.contactus-form input[type=text],.contactus-form textarea{width: 300px}
.contactus-form p,.user-form p{margin: 0}
.user-form sup{color: #fc0000;font: 20px/20px Georgia,serif}
.user-form input,.user-form select {margin:3px 0 15px;display: block;width: 290px}
.user-form input[type=checkbox] {margin:3px 0 15px;display: block;width: 10px}
.user-form select {width: 295px}
.user-form h2{margin-top: 20px}
.user-form p{overflow: hidden;margin-bottom: 10px;border-bottom: 1px solid #eee}
.user-form p label{width: 120px;float: left}
.user-form p input, .user-form p select{margin-left: 150px}
.user-form p textarea{margin-left: 30px}
.user-form p.sup label{width: auto;}
.user-form p.sup sup{float: left}
.user-form p.user_birth_date select{margin-left: 0}
.user-form p.user_birth_date select#user_birth_date_year{margin-left: 30px}
.b-box{display: block;width: 260px;height: 79px;padding: 35px 30px;background: url(../images/bg/box.png) no-repeat 0 0}
.b-box_h{background-image:url(../images/bg/box-h.png);height: 127px }
.b-box input[type=text]{width: 266px}
.l-box{background: #f2ecd9;border: 1px solid #b1b1b1;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding: 16px}
.l-box p.data{margin-top: 0}
/* hugs table */
.hugs-table{width: 100%;border-collapse: collapse}
.hugs-table th{text-align: left;padding: 5px 2px;color: #5E3823}
.hugs-table td{padding:4px 2px;font-size: 14px;color: #121212}
.hugs-table td a{color: #3B5998;text-decoration: none}
.hugs-table td a:hover{text-decoration: underline}
.hugs-table tr:hover td{background: #fff}
/* statistics */
.b-statistics h2{margin: 10px 0 0}
/* login form */
.login-form{width: 240px;margin: 50px auto 0;border: 1px solid #C92127;background: #ffdd99;padding: 15px}
.login-form .w{overflow: hidden;padding-bottom: 10px;clear: both}
.login-form .w input{width: 143px}
.login-form .w label{float: left;width: 90px;padding-top: 4px}
.login-form .b,.login-form .s,.login-form .r {text-align: center}
.login-form .s {margin-bottom: 7px}
.login-form .r {margin-top: 7px}
.login-form .r a{font-size: 10px;color: #777}
.login-form .input {margin-right: 7px}
/* errors */
.error_list {padding: 0;margin: 0 0 5px}
.error_list li{list-style: none;color: #fc0000;font-size: 10px;}
/* lists */
.b-list h2{margin-bottom: 2px}
.b-list ul{margin-top: 0;list-style: none;padding-left: 25px}
/* print cards */
.print-cards {border-collapse: collapse}
.print-cards td{vertical-align: middle;border: 1px dashed #ccc;text-align: center}
.print-cards td img{width: 290px;}
/* scores */
.b-score{width:140px;height: 255px;background: url(../images/score/bg.png) no-repeat 0 0;color: #333;margin: 20px 0 0;padding-top: 49px;position: relative;font: 10px Arial,sans-serif}
.b-score .t-line,.b-score .b-line{position: absolute;left: 28px;width: 106px}
.b-score .t-line{top:30px}
.b-score .b-line{bottom:46px}
.b-score .t-line .e,.b-score .b-line .e{position: absolute;right: 0}
.b-score .b-line .e{right: 20px}
.b-score .rate {margin:0 0 0 15px}
.b-score .rate div{position: relative;z-index: 9}
.b-score .rate .part div{top:-16px}
.b-score .rate td{height: 193px;vertical-align: bottom}
.b-score .rate td.b-rate{padding: 0 5px}
.b-score .rate .b{width: 7px;background:url(../images/score/b.png) repeat-y 0 0 }
.b-score .rate span{background: #fff;padding: 1px;white-space: nowrap;font-size: 11px;font-weight: bold;color: #000;}
/* elements */
#locations_list{margin: 20px 0}
#user_hug_comment_comment{width: 494px}
#map_canvas{border: 1px solid #ccc}
select.date { width: 95px; display: inline;}
.radio_list { padding: 0; margin: 0;}
.radio_list > li { display: inline; list-style-type: none;}
input.radio { width: 5px; display: inline;}
a.mainlink {font-size:24px;margin-bottom:50px;}
/* search-form */
.b-search-form {position: absolute;right: 112px;top:2px}
.b-search-form input[type=text]{width:130px;}
table.row td{vertical-align: top;padding-bottom: 20px}
/* print cards */
.print-cards {float: left; padding:5px 10px 5px 10px; margin-bottom: 15px; border-bottom:2px solid #111111 ; border-top: 2px solid #111111; background: #DDDDDD}
.print-cards a{color: #cc0000;font: bold 22px/30px arial, sans-serif}
.print-cards a:hover{text-decoration: underline}
.print-cards span a {font: 16px/24px arial, sans-serif}
/* user profile */
.user-profile-right{width: 165px}
.user-profile-right .user-photo{display: block;max-width: 165px;margin: 10px auto}
.user-profile-right .click-to-upload{display: block;color: #8d8d8d;font: bold 13px arial, sans-serif;text-align: center;position: relative;z-index: 2;
width: 120px;margin:10px auto -45px}
.user-profile-right .change-profile, .user-profile-right .s-info{color: #5a5a5a;font-size: 14px}
.user-profile-right .s-info{margin-bottom: 10px}
.user-profile-boxes .i, #footer .i{border: 1px solid #a6a6a6;margin-bottom: 10px;overflow: none;
-moz-border-radius-topright:5px; -moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px; -webkit-border-top-left-radius:5px; border-top-right-radius:5px; border-top-left-radius:5px;}
.user-profile-boxes .i .info{color: #000;font-weight: bold;padding: 5px}
.user-profile-boxes .i h5, #footer .i h5{color: #fff;padding: 3px 5px;margin: 0;font-size: 12px;background: #2fa4d5;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px; border-top-right-radius:4px;}
.user-profile-boxes .stat h5{background: #6377a1;font-size: 18px;-moz-border-radius-topleft:4px;-webkit-border-top-left-radius:4px;
border-top-left-radius:4px;}
.user-profile-boxes .i .data{margin-left: 32px}
.user-profile-boxes .i img.left{height:52px;
max-width:32px;-moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px;}
.user-profile-boxes .hug-map img, .user-profile-boxes .hug-sponsor img,
#footer div.i img{width: 100%}
.user-profile-boxes .hug-map h5{background: #8f63a1}
.user-profile-boxes .hug-feed h5{background: #69a387}
.user-profile-boxes .hug-feed a{color: #000;}
.user-profile-boxes .hug-feed a:hover{text-decoration: underline;}
.user-profile-boxes .hug-sponsor h5, #footer .hug-sponsor h5{background: #c4a163}
#footer .hug-sponsor h5{font-size: 18px}
.user-profile-boxes .hug-sponsor p, #footer .hug-sponsor p{color: #000;margin: 2px 5px;}
#footer div.i{width: 163px;margin-right: 26px}
.hug-feed
{
height: 180px;
max-height:180px;
overflow; none;
}
.hugNextLinks{padding-top: 25px}
/* profile-stat-row */
.profile-stat-row {margin-top: 15px;border-spacing: 0;border-collapse: collapse;color: #5E3823}
.profile-stat-row td h2{margin-bottom: 0;font-size: 22px}
.profile-stat-row td.t{width: 48%}
.profile-stat-row td.s{width: 2%}
/* b-left */
.b-left{float: left;width: 182px;}
/* homepage */
.b-home-center{margin-left: 200px}
.b-home-center p{color: #000;margin: 11px 0}
.b-home-center p span{color: #2aa4ad;font-weight: bold}
.b-hug-it{height: 327px;background: url(../images/bg/homepage/hug-it-forward.jpg) no-repeat 0 0}
.b-hug-it h3{font:bold 13px/16px arial, sans-serif;color: #f2f1f1;text-align: center;padding: 9px 0 7px;margin: 0}
.b-hug-it .inner{width: 154px;margin: 0 auto}
.b-hug-it input[type=text]{margin-bottom: 5px}
.b-hug-it .btn, .havent-hugged .btn{text-align: right;padding-right: 2px }
.b-hug-it .btn input, .havent-hugged .btn button{border: 0; font:bold 11px/13px tahoma, sans-serif;color: #fff;text-shadow:1px 1px 1px #8f8f8f;
background: url(../images/bg/btn/grey.png) no-repeat 0 0;width: 112px;padding:4px 0 }
.havent-hugged h3{font:bold 21px/24px arial, sans-serif;color: #4b4b4b;text-align: center;margin: 5px 0}
.havent-hugged h4{font:bold 15px/18px arial, sans-serif;color: #fff;padding: 7px 10px 5px;margin: 0}
.havent-hugged .inner{background: url(../images/bg/homepage/havent-hugged.png) no-repeat 0 0;height: 82px; }
.havent-hugged .btn button{margin-right: 12px}
.b-welcome-video{margin: 25px 0}
.b-welcome-right{width: 400px;margin-top: 20px;font: italic 15px/18px georgia, serif; color: #666}
.b-welcome-right a{color: #000;text-decoration: underline}
/* confirm location */
.b-confirm{padding: 15px;border: 1px solid #adadad}
.b-confirm h1{color: #9e993b;font: bold 18px/22px arial, sans-serif;margin: 0 0 10px}
.b-confirm h1 span{font-size: 14px}
.b-confirm-1, .b-confirm-3{float: left; width: 430px;}
.b-confirm-1:hover{background: #f1f1d4}
.b-confirm-1 .search #location{width: 356px}
.b-confirm-2{margin-left: 475px;}
.b-confirm-2:hover{background: #eee6dc}
.b-confirm-2 h1{color: #aa7d4c;}
.b-confirm-3 {margin: 15px 10px 0 90px}
.b-confirm-3 h1{color: #77a6d3}
.b-confirm-3 textarea{background: #ddd;color: #5E3823;font-size: 12px;width: 425px;height: 50px}
.b-confirm-3:hover{background: #e2f0ff}
input.b-confirm-submit{border: 0;background: url(../images/bg/make-hugger.jpg);display: block;width: 268px;height: 72px;cursor: pointer;line-height: 0;margin-top: 10px}
.b-confirm-head h1{margin-bottom: 10px}
.b-confirm-head h4{color: #8D8D8D;margin: 0 0 20px}
.confirm {font-size:16px; color:white; background:#cc0000; padding: 10px; border: 1px solid #017098;}
.confirm:hover {color:#CCCCCC; background:#AA0000}
h1.follow-hugs{margin-bottom: 7px}
div.hugsTable { height: 250px; overflow: auto;}
.hug_chain {
padding-left: 20px;
margin: 0;
}
#socialTab {
position: fixed;
left: 0;
top: 170px;
width: 48px;
height: 75px;
}
#socialTab a {
display: block;
text-indent: -9999px;
height: 75px;
width: 48px;
}
#socialTab a#twitter {
background: url(/images/socialmedia/twitter1.png) no-repeat left top;
}
#socialTab a#facebook {
background: url(/images/socialmedia/facebook1.png) no-repeat left top;
}
.headlinebox
{width:270px; float:left}
.latest-news
{width:270px; float:left; padding-left:15px}
.latest-news ul
{
list-style-type:none;
padding-left: 0px;
}
.latest-news li
{
padding-bottom: 5px;
}
.topten
{
float: left;
width: 450px;
padding-right: 20px;
}
.thirds
{
float: left;
width: 300px;
padding-right: 20px;
}
.about-left
{
float: left;
width: 350px;
padding-right: 20px;
}
.about-right
{
float: left;
width: 550px;
}
.twocol {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
a.tooltip{
position:relative; /*this is the key*/
z-index:24; background-color:#ccc;
color:#000;
background: url(/images/tooltips/help_icon.png) no-repeat 0 0;
padding-left: 20px;
margin-left: 5px;
cursor: help;
text-decoration:none}
a.tooltip:hover{z-index:25;}
a.tooltip span{display: none}
a.tooltip:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:2em; left:2em; width:15em;
text-align: left
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
background: url(/images/tooltips/help.png) no-repeat 0 0 #9FDAEE;
border: 1px solid #121212;
padding: 20px 20px 20px 70px;
font: 15px/18px;
font-weight: normal;
}
a.bottom:hover span {
top:-12em; left:2em;
}
a.right:hover span {
top:2em; left:-18em;
}
a.rightbot:hover span {
top:-12em; left:-24em;
}
.picture-left
{
float: left;
width: 200px;
margin-right: 20px;
}
.picture-right
{
float: left;
width: 740px;
}
.signupframe {
color: #226699;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #000000;
background: #ffffff;
}
#SignUp
{
margin-top: 15px
}