/*
Theme Name: Wakin
Author: Foreground
*/
html,body{
margin:0;
padding:0;
}
body{
font-family:helvetica,arial,sans-serif;
font-size:.8em;
color:#666;
line-height:160%;
background:#fafafa;
}
a{
color:#3b5998;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:0;
}
#wrap{
position:relative;
}
h1,h2,h3{
margin:0;
padding:0;
}
.center{
width:980px;
margin:0 auto;
}
.inline{
display:inline;
}
ol.inline,
ul.inline{
margin:0;
padding:0;
list-style:none;
display:block;
}
ol.inline li,
ul.inline li{
display:inline;
}

/**
 * General
 */
.brown{
color:#960;
}

/**
 * Login Bar
 */
#login-bar{
background:#c3c3c3;
height:33px;
border-bottom:1px solid #b1b1b1;
}
form.user-login,
form.user-login .regular,
form.user-login .regular div{
display:inline;
}
form.user-login{
position:absolute;
top:5px;
left:200px;
margin:0;
padding:0;
}
form.user-login .message.highlight{
background:none;
border:0 none;
color:#d00;
margin:0;
padding:0;
position:absolute;
top:2px;
left:-100px;
}
#login-bar a{
color:white;
}
#login-bar label{
color:white;
}
#login-bar .center{
position:relative;
}
#login-bar .lang{
position:absolute;
top:7px;
left:4px;
}
#login-bar .lang p{
margin:0;
}
#login-bar .inline{
float:right;
padding-top:7px;
}
#login-bar .inline li{
margin:0 5px;
}
#login-bar .logged-in{
float:right;
padding-left:35px;
position:relative;
}
#login-bar .logged-in p{
margin:0;
padding-top:7px;
}
#login-bar .logged-in p span{
margin:0 5px;
}
#login-bar .submit{
padding:1px 5px;
}
#login-bar .avatar{
position:absolute;
top:4px;
left:0;
}
#login-bar .avatar img{
width:25px;
height:25px;
}
/**
 * Header
 */
#header{
height:300px;
background:#666;
background:url(css/header.jpg) no-repeat 50% 0;
min-width:980px;
}
#header h1{
display:none;
}
/**
 * Nav
 */
#nav{
padding:148px 0 0 450px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
width:85px;
}
#nav ul li a{
display:block;
width:85px;
text-align:center;
height:22px;
padding-top:3px;
background:#b1b0b2;
color:#555;
}
#nav ul li a:hover{
background:white;
text-decoration:none;
}
#nav ul li.active a,
#nav ul li.active a:hover{
background:white;
text-decoration:none;
}
/**
 * Footer
 */
#footer{
clear:both;
background:url(css/footer.jpg) repeat-x;
text-align:center;
padding-top:13px;
height:33px;
font-size:12px;
color:white;
}
#footer p{
padding:0;
}

/**
 * Content
 */
#content{
margin-bottom:40px;
}

/**
 * Error Page
 */
#content h2{
padding-top:20px;
font-size:15px;
border-bottom:1px solid #aaa;
margin-bottom:40px;
}


/**
 * Wall
 */
.filter{
margin:0;
padding:0;
list-style:none;
height:15px;
border-bottom:1px solid #aaa;
padding-top:20px;
padding-left:40px;
font-size:12px;
margin-bottom:40px;
}
.filter li{
float:left;
display:inline;
border:1px solid #999;
background:white;
text-align:center;
margin-right:5px;
}
.filter li a{
color:#999;
text-decoration:none;
display:block;
padding:3px;
width:80px;
}
.filter li a:hover{
background:#eee;
color:#666;
}
.filter li.active{
border:1px solid #3b5998;
}
.filter li.active a{
font-weight:bold;
color:#3b5998;
}
.filter li.active a:hover{
cursor:default;
background:white;
color:#3b5998;
}
#profile-nav.filter li.active{
border:1px solid #999;
}
#profile-nav.filter li.active a,
#profile-nav.filter li.active a:hover{
background:#776658;
font-weight:normal;
color:white;
}
#profile-nav.music{
margin-bottom:20px;
}
#music-nav{
margin:0;
padding:0;
list-style:none;
padding-left:133px;
height:18px;
margin-bottom:30px;
}
#music-nav li{
float:left;
display:inline;
border:1px solid #999;
background:white;
text-align:center;
margin-right:5px;
}
#music-nav li a{
color:#999;
text-decoration:none;
display:block;
width:86px;
height:16px;
font-size:12px;
line-height:150%;
}
#music-nav li.active a{
background:#999;
color:white;
}

/**
 * Post Form
 */
form.post{
padding:20px;
background:#eee;
margin:0 200px 30px;
}
form.post-note{
margin:0 0 30px;
}
.submit-field{
text-align:right;
}
.submit{
background:#999;
color:white;
border:1px solid #444;
cursor:pointer;
margin:0;
padding:3px 10px;
font-size:1em;
}
form.post .avatar{
float:left;
width:50px;
height:50px;
}
form.post .title-field{
clear:left;
padding-top:10px;
margin-bottom:10px;
}
form.post .title-field label{
display:none;
}
form.post .title-field input.text{
border:1px solid #999;
background:white;
width:98%;
font-size:15px;
padding:3px;
}
  /* date-field */
.date-field{
padding-bottom:3px;
font-size:10px;
text-align:right;
}
.date-field label.head,
.date-field div{
display:inline;
}
.date-field label.head{
font-weight:bold;
}
.date-field input.text{
border:0 none;
font-size:10px;
}
.date-field input#hour,
.date-field input#minute,
.date-field input#second{
text-align:center;
}
form.post .content-field{
border:1px solid #999;
background:white;
margin-left:70px;
width:458px;
position:relative;
padding:5px;
margin-bottom:10px;
}
.notecontent-field{
clear:left;
margin-bottom:10px;
}
.notecontent-field label{
display:none;
}
form.post .content-field textarea{
border:0;
background:transparent;
width:458px;
font-family:inherit;
}
form.post .content-field label{
display:none;
}
form.post .content-field span{
display:block;
position:absolute;
width:10px;
height:10px;
background:url(css/dialog.gif) no-repeat;
top:10px;
left:-10px;
}
form.post-wall .wallstyle-field{
margin-left:70px;
}
form.post-wall .fileupload-field{
margin-left:70px;
padding:10px 0;
border-top:1px solid #ccc;
}
form.post-wall .videoinput-field{
margin-left:70px;
padding:10px 0;
border-top:1px solid #ccc;
}
form.post-wall .videoinput-field input.text{
width:450px;
}

/**
 * Wall List
 */
#wall-list{
margin:0;
padding:0;
list-style:none;
margin:0 40px;
}
#wall-list h3{
font-size:1em;
color:black;
margin-top:10px;
margin-bottom:30px;
}
#wall-list .category{
background:#ccc;
color:white;
font-size:12px;
width:90px;
margin-right:10px;
text-align:center;
float:left;
}
.wall-style .avatar{
float:left;
width:50px;
text-align:center;
}
#wall-list .deadline{
color:#c20;
font-weight:bold;
}
#wall-list .content{
margin-left:160px;
margin-bottom:10px;
overflow:hidden;
}
#wall-list .wall-row .video{
margin-left:160px;
margin-bottom:10px;
}
#wall-list .image{
margin-left:160px;
margin-bottom:10px;
overflow:hidden;
position:relative;
}
#wall-list .image ul{
margin:0;
padding:0;
list-style:none;
}
#wall-list .image ul li{
float:left;
margin-right:5px;
margin-bottom:5px;
width:132px;
height:102px;
}
#wall-list .image ul li a{
display:table-cell;
width:130px;
height:100px;
text-align:center;
border:1px solid #ccc;
vertical-align:middle;
}
#wall-list .image ul li a:hover{
border-color:#3b5998;
}
#wall-list .image .load-more{
position:absolute;
top:0;
left:685px;
background:#edeff4 url(css/more-10.gif) no-repeat 50% 50%;
border:1px solid #d8dfea;
cursor:pointer;
width:40px;
padding-top:100px;
height:0;
overflow:hidden;
}
#wall-list .image .load-more:hover{
background-color:#d8dfea;
}
#wall-list .image .load-more.loading{
background-image:url(css/loading-blue-16.gif);
}
/* videodata */
.videodata{
margin-left:160px;
margin-bottom:10px;
overflow:hidden;
}
.videodata .thumb{
float:left;
position:relative;
padding:1px;
}
.videodata .thumb img{
width:130px;
height:100px;
}
.videodata .thumb span.play{
display:block;
width:130px;
height:100px;
background:url(css/play.png) no-repeat 50% 50%;
border:1px solid #ccc;
position:absolute;
top:0;
left:0;
cursor:pointer;
}
.videodata .thumb:hover span.play{
border-color:#3b5998;
}
.videodata .video-title{
font-weight:bold;
margin-bottom:10px;
padding-top:10px;
}


.username{
color:#3b5998;
font-weight:bold;
font-size:1.2em;
}
.adminclass{
color:#008459;
font-weight:bold;
font-size:1.2em;
}
.postmeta{
text-align:right;
color:#999;
}
.postmeta .permalink{
color:#999;
}
.postmeta .facebook-share{
margin-left:10px;
}
.postmeta .share img{
vertical-align:baseline;
width:20px;
height:20px;
margin-bottom:-4px;
position:relative;

width:13px;
height:13px;
margin-bottom:-1px;

}
.wall-row.private{
opacity:0.5;
}
.wall-row{
overflow:hidden;
padding-bottom:2px;
border-bottom:1px solid #eee;
margin-bottom:20px;
position:relative;
}
.wall-content .wall .category{visibility:hidden;}
/*
.wall-content .category{
display:none;
}
.wall-content #wall-list .videodata,
.wall-content #wall-list .wall-row .video,
.wall-content #wall-list .content,
.wall-content #wall-list .image{
margin-left:60px;
}
*/
.category-field{
text-align:right;
margin-bottom:10px;
}
.category-field label.head,
.category-field ul,
.category-field div{
display:inline;
}
.onwall-field{
float:left;
padding-top:10px;
}
.browse-file{
margin-left:70px;
}
.browse-file .regular{
margin-bottom:5px;
padding-bottom:5px;
border-bottom:1px solid #aaa;
}
.browse-file .text{
width:99%;
margin-bottom:5px;
}
.browse-file .file{
}
.video-field{
margin-left:70px;
margin-bottom:10px;
}
.wall-style .delete{
visibility:hidden;
float:right;
width:16px;
background:url(css/delete-16.gif) no-repeat;
font-size:.1em;
padding-top:16px;
height:0;
overflow:hidden;
}
.wall-row:hover .delete.wall{
visibility:visible;
}
.wall-style .delete:hover{
background:url(css/delete-16.gif) no-repeat 0 -16px;
}
.wall-style .delete.loading{
visibility:visible !important;
background:url(css/loading-16.gif) no-repeat;
cursor:default;
}
/* comment */
div.comment{
margin:0 200px 10px;
}
.comment ul{
margin:0;
padding:0;
list-style:none;
line-height:130%;
}
.comment ul li{
background:#eee;
padding:10px;
margin-bottom:2px;
position:relative;
}
.comment ul li.view-more{
padding:0;
}
.comment ul li.view-more a{
display:block;
text-align:center;
padding:10px;
}
.comment ul li.view-more a:hover{
text-decoration:none;
background:#ddd;
}
.comment li .delete{
top:5px;
right:5px;
}
.comment li:hover .delete{
visibility:visible;
}
.comment .avatar img{
width:35px;
height:35px;
}
.comment .username{
font-size:1em;
float:left;
margin-right:10px;
}
.comment .postmeta{
text-align:left;
margin-left:45px;
font-size:12px;
margin-top:4px;
}
.wall-style.comment .content{
margin-bottom:0 !important;
margin-left:45px !important;
}
.comment form.post{
padding:10px;
margin:0;
}
.comment form.post .content-field{
margin-left:50px;
width:418px;
}
.comment form.post .content-field textarea{
width:418px;
height:22px;
font-size:12px;
}
/**
 * Like
 */
span.like a.loading,
span.like a.loading:hover{
color:#aaa !important;
text-decoration:none;
cursor:default;
}
/**
 * Post When Loading
 */
form.post.loading{}
form.post.loading .content-field textarea{
color:#ccc;
font-style:italic;
}
form.post.loading .submit{
background:#ccc;
color:#999;
cursor:default;
}
/**
 * Photo Slide
 */
.loading-32{
width:32px;
height:32px;
background:url(css/loading-32.gif) no-repeat;
}
.close-20{
width:20px;
height:20px;
background:url(css/close-20.png) no-repeat;
}
.next-20{
background:url(css/next-20.png) no-repeat 90% 50%;
}
.prev-20{
background:url(css/prev-20.png) no-repeat 10% 50%;
}
/**
 * Page Nav
 */
.page-nav{
margin-bottom:30px;
}
.page-nav ul{
margin:0;
padding:0;
list-style:none;
text-align:center;
}
.page-nav ul li{
display:inline;
padding:10px;
}
.page-nav a.ajax-page-loader{
display:block;
text-align:center;
padding:15px 0;
background:#edeff4;
border:1px solid #d8dfea;
height:20px;
}
.page-nav a.ajax-page-loader:hover{
background:#d8dfea;
text-decoration:none;
}
.page-nav a.ajax-page-loader.loading{
padding:50px 0 0 0;
height:0;
overflow:hidden;
background-image:url(css/loading-blue-16.gif);
background-repeat:no-repeat;
background-position:50% 50%;
}
.page-nav div.end{
padding:15px 0;
text-align:center;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
}

/**
 * Edit Post Form
 */
form.edit-post{
margin:0 0 30px;
}
form.edit-post .content-field{
width:858px;
}
form.edit-post .content-field textarea{
width:858px;
}
form.edit-post .gallery{
margin-bottom:20px;
}
form.edit-post .gallery ul{
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
form.edit-post .gallery li{
float:left;
width:132px;
height:172px;
padding:20px 10px 10px;
position:relative;
}
form.edit-post .gallery li .image{
width:130px;
height:100px;
overflow:hidden;
border:1px solid #aaa;
margin-bottom:4px;
}
form.edit-post .gallery li .title .textarea{
width:122px;
padding:2px;
margin:0;
height:60px;
}
form.edit-post .gallery li .delete{
width:14px;
height:0;
padding-top:14px;
overflow:hidden;
font-size:.1em;
display:block;
background:url(css/x.gif) no-repeat;
position:absolute;
top:5px;
right:10px;
display:none;
}
form.edit-post .gallery li .handle{
width:30px;
height:30px;
background:url(css/move.png) no-repeat;
position:absolute;
top:0;
left:0;
display:none;
cursor:move;
}
form.edit-post .gallery li:hover .delete,
form.edit-post .gallery li:hover .handle{
display:block;
}
#updator{
display:none;
color:#222;
background:lightyellow;
padding:10px;
text-align:center;
}
form.edit-post .browse-file{
margin-left:0;
}
form.edit-post .video-field textarea{
width:858px;
}
/**
 * Onwall Switch
 */
span.onwallswitch a.loading,
span.onwallswitch a.loading:hover{
color:#aaa !important;
text-decoration:none;
cursor:default;
}

/**
 * Form ( Member )
 */
form.member{
margin:0 200px 100px;
}
form.member .regular{
margin-bottom:10px;
padding-left:20px;
overflow:hidden;
}
form.member label.head{
float:left;
width:120px;
}
form.member label.head span{
font-size:10px;
color:#aaa;
line-height:8px;
}
form.member .indent-area{
margin-left:120px;
}
form.member .separator{
}
form.member h4{
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
background:#eee;
padding:3px 10px 1px;
text-align:center;
margin:20px 0;
}
form.member textarea{
width:540px;
}
form.member .username-field span{
display:block;
}
form.member span{
font-size:12px;
color:#888;
}
.message.highlight{
background:white;
border:1px solid #900;
color:#d00;
margin:2px 200px;
padding:5px 20px;
}
.regular.highlight{
background:#ffc;
color:#a00;
font-weight:bold;
padding:10px 0;
}
.success-message{
padding:100px 0 150px;
text-align:center;
}
.success{
background:lightyellow !important;
color:black !important;
border-color:#999 !important;
}
body#forgot-page .entry{
margin-top:100px;
}
form.member .submit-field{
margin-top:40px;
}

form.modify-avatar p.image{
margin:30px 0 50px;
text-align:center;
}

/**
 * Data List Style (dl)
 */
dl.leader{
margin:0;
padding:0;

}
dl.leader dt{
width:100px;
float:left;
background:#999;
color:white;
text-align:center;
}
dl.leader dd{
min-height:20px;
padding-bottom:10px;
margin-left:120px;
}


/**
 * Two Column Layout
 */
ul.two-column{
margin:0;
padding:0;
list-style:none;
padding-left:20px;
}
ul.two-column li{
width:430px;
margin:0 20px 30px;
float:left;
display:inline;
height:170px;
overflow:hidden;
}
ul.two-column li .image{
width:170px;
background:white;
float:left;
text-align:center;
}
ul.two-column li .text{
margin-left:190px;
}
ul.two-column dl.leader dt{
width:80px;
}
ul.two-column dl.leader dd{
margin-left:80px;
border-bottom:1px solid #e4e4e4;
padding-bottom:0;
padding-left:10px;
margin-bottom:10px;
}
ul.two-column.h120 li{
height:140px;
}
ul.two-column.h120 li .image{
height:120px;
}
ul.two-column.h220 li{
height:240px;
}
ul.two-column.h220 li .image{
height:120px;
}
ul.two-column.w140 li{}
ul.two-column.w140 li .image{
width:140px;
}
ul.two-column.w140 li .text{
margin-left:160px;
}
ul.two-column dl.leader dt.content{
margin-right:10px;
}
ul.two-column dl.leader dd.content{
margin-left:0;
padding-left:0;
display:inline;
border-bottom:0;
line-height:16px;
}


/**
 * Profile
 */
.context{
overflow:hidden;
margin-bottom:40px;
}
body#event-page .image,
body#profile-page .image{
width:340px;
float:left;
display:inline;
}
body#event-page div.text,
body#profile-page div.text{
margin-left:370px;
}
body#event-page dd{
font-size:14px;
margin-left:110px;
}
body#profile-page dt.detail{
float:none;
margin-bottom:20px;
}
body#profile-page dd.detail{
margin-left:0;
}
ul.detailed-list{
margin:0;
padding:0;
list-style:none;
}
ul.detailed-list li{
border-bottom:1px solid #e4e4e4;
padding-bottom:10px;
margin-bottom:14px;
}
ul.detailed-list li strong{
font-size:16px;
font-weight:normal;
}
ul.detailed-list li span{
font-size:14px;
}

/**
 * Activity
 */
body#activity-page{}
body#activity-page ul.two-column li{
width:430px;
margin:0 20px 10px;
float:left;
display:inline;
height:317px;
}

/**
 * Movie
 */
body#movie-page ul.two-column li,
body#book-page ul.two-column li{
height:317px;
}

/**
 * Album
 */
.album-context{
margin:0 40px 50px;
padding-bottom:40px;
border-bottom:2px solid #999;
}
.album-context .image{
width:350px;
overflow:hidden;
float:left;
}
.album-context .image img{
}
.album-context .text{
margin-left:380px;
}
.album-context .text h3{
font-size:1em;
}
.album-context .text .desc{
margin-bottom:20px;
}
.album-context .text ol li{
padding-bottom:5px;
padding-top:3px;
margin-bottom:5px;
border-bottom:1px solid #e4e4e4;
}
.album-context .text ol li.private{
padding-left:17px;
background:url(css/lock.jpg) no-repeat 0 3px;
}
#song-list{
margin:0 200px 50px;
padding:0;
list-style:none;
}
#song-list li{
padding-bottom:20px;
margin-bottom:20px;
border-bottom:1px solid #999;
}
#song-list .credit{
color:#999;
}
#song-list .credit span{
margin-right:20px;
}
#song-list .backtotop{
text-align:right;
padding-top:30px;
}

/**
 * Single Image
 */
.image-content{
background:#eee;
text-align:center;
margin-bottom:50px;
margin-top:25px;
position:relative;
padding:50px 0;
}
body.single .postmeta{
margin-bottom:20px;
}
body.single .comment .postmeta{
margin-bottom:0;
}
.image-nav{
margin:0;
padding:0;
list-style:none;
text-align:right;
}
.image-nav li{
position:absolute;
top:0;
left:0;
width:450px;
height:100%;
}
.image-nav li.next{
left:450px;
}
.image-nav li span{
color:#ccc;
}
.image-nav li a{
width:100%;
height:100%;
display:block;
}
.image-nav li.prev a{
background:url(css/left.png) no-repeat 20px 50%;
}
.image-nav li.next a{
background:url(css/right.png) no-repeat 400px 50%;
}
body.single-image #wall-list h3{
color:#555;
margin-bottom:0;
overflow:hidden;
}
/**
 * Sub Nav
 */
#sub-nav{
width:580px;
margin:0 auto;
overflow:hidden;
}
#sub-nav ul{
margin:0;
padding:0;
list-style:none;
}
#sub-nav li{
display:inline;
margin:0 20px;
}

.musicplayer{
float:right;
position:relative;
margin-top:-3px;
}
.hide_image {
	visibility: hidden;
}