/* main.css */
body {
margin:0 auto;
width:800px;
color:#333;
font-family:'Lucida Grande',sans-serif;
background-color:#9AE4E8;
}
a:hover {
text-decoration:underline;
}
a {
color:#0084B4;
text-decoration:none;
}
#header{
margin:0 0 0 0;
*display:inline-block;
}
#header:after{
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
#header .apps {
border-bottom-color:#73ACAE;
border-bottom-style:dashed;
border-bottom-width:1px;
margin-bottom:12px;
}
#header .apps .apps_span{
display:block;
font-size:80%;
padding:4px 0px;
color:#598587;
}
#header .apps .selected{
font-weight:bold;
}
/*
#header .apps {
text-align:center;
}
#header .apps .apps_span{
background-color:#E2F2FB;
margin:0 auto;
display:inline-block;
font-size:80%;
padding:4px 6px;
color:#999;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
}
*/
#header .apps a{
color:#333;
padding: 4px 6px;
}
#header .apps a:hover{
background-color:#0084B4;
color:white;
}
#header .apps .new{
color:#ec008c;
font-size:90%;
}
#header .logo{
padding:2px 2px 3px;
}
#header #menu {
float:right;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:white;
color: #0084B4;
padding:2px;
font-family:"Comic Sans MS","Apple Casual",sans-serif;
font-size:75%;
margin-top:20px;
margin-left:10px;
}
#header #menu a {
padding:0 6px;
}
#lf {
float:right;
font-size:75%;
margin:20px 0 0;
}
#fl {
maring:0;
}
#flash, #reflash {
background-color:#66CC99;
margin:15px 0;
padding:10px 20px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#reflash {
display:none;
margin-top:10px;
font-size:85%;
}
#contents {
background-color:white;
padding:15px 25px 25px;
margin:15px 0 20px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
*display:inline-block;
}
#contents:after{
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
h3{
margin:0 0 11px 0;
}
h3.graffiti{
float: left;
margin-right: 7px;
}
.lets {
font-size: 85%;
padding-top: 7px;
margin :0;
}
h3 .profimg{
margin:0 5px 5px 0;
border: 1px solid #999999
}
.topleft {
float:left;
width:550px;
margin-bottom:20px;
}
div.topleft h4 {
margin: 1.2em 0 0.5em 0;
padding-top: 0.2em;
font-size: 120%;
border-top: 1px solid #DDD;
}
div.topleft div.want {
width: 260px;
float: left;
padding-right: 10px;
}
div.topleft div.want img {
float: left;
border: 1px solid #999;
width: 120px;
}
div.topleft div.want .right {
margin-left: 125px;
font-size: 85%;
}
div.topleft div.want div.want-status {
padding-left: 110px;
width: 140px;
border: 1px solid red;
}
div.topleft div.want span.pic-count {
font-size: 80%;
color: #666;
}
img.ranking-pic {
border: 1px solid #999;
width: 160px;
}
div.topleft div.first {
float:left;
width: 200px;
}
div.topleft div.rest {
float:left;
width: 160px;
margin-left: 10px;
padding-top: 26px;
}
div.topleft div.first img.ranking-pic {
width: 200px;
}
div.topleft div.by {
text-align: right;
font-size: 80%;
}
div.topleft span.count {
font-weight: bold;
font-size: 110%;
color: #666;
}
div.topleft a.tree {
font-size: 75%;
margin-left: 0.3em;
}
div.topleft div.comment {
color: #555;
font-size: 75%;
border-top: 1px dotted #CCC;
padding: 0 0.3em;
}
div.topleft img.remix-child {
border: 1px solid #999;
width: 45px;
}
div.topleft div.first img.remix-child {
width: 55px;
}
div.topleft div.note {
margin: 1em 3em;
padding: 0.5em 0.8em;
font-size: 80%;
background-color: #9AE4E8;
}
.radius {
border-radius: 6px;         /* CSS3 */
-moz-border-radius: 6px;    /* Firefox */
-webkit-border-radius: 6px; /* Safari,Chrome */
}
div.topright div.new-pic {
margin-bottom: 1em;
}
div.topright div.new-pic img {
border: 1px solid #999;
width: 120px;
}
div.topright div.new-pic div.status {
font-size: 80%;
}
.topright {
float:right;
width:183px;
margin-bottom:20px;
margin-top:15px;
}
.topright h4{
margin:0 0 5px 0;
font-size:90%;
}
.topright p{
font-size:80%;
}
.topright .twtr-widget p {
font-size: 100%;
}
.error {
background-color:#66CC99 !important;
}
.title{
position:relative;
width:550px;
}
.fullimg{
border: 1px solid #999999;
}
.shotimg{
border: 1px solid #999999;
width:480px;
height:300px;
overflow:hidden;
}
#left_strokes{
color:#CCCCCC;
display:block;
font-size:170%;
position:absolute;
right:10px;
top:0;
font-weight:bold;
font-family:Georgia,Serif;
}
canvas {
border: 1px solid #CCC;
margin-bottom: 5px;
background-color: white;
-webkit-user-select : none;
}
#undo, #clear {
font-size: 85%;
height: 30px;
width: 80px;
}
#menus label {
font-size:70%;
margin-left:5px;
margin-top:5px;
}
#menus select {
font-size: 85%;
height: 25px;
}
#form {
margin:15px 0;
/*	width:550px;*/
clear: both;
}
#form:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
label{
color:#666;
font-size:90%;
}
form .submit {
height:34px;
margin-top:5px;
float:right;
min-width: 107px;
}
textarea {
width:544px;
border:1px solid #AAAAAA;
padding:4px 2px;
-x-system-font:none;
font-family:'Lucida Grande',sans-serif;
font-size:1.0em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:3.2em;
line-height:1.1;
overflow:auto;
}
.loginform {
background-color:#FFFFCC;
padding:10px;
clear:both;
margin-top:10px;
*display:inline-block;
}
.loginform .leftbox{
float:left;
width:208px;
}
.loginform .leftbox input{
width:160px;
border:1px solid #666;
font-size:0.9em;
padding:4px;
margin:0;
}
.loginform .rightbox {
float:right;
width:108px;
}
.loginform .submit {
margin-top:12px;
}
.retweet_submit {
margin-top: 10px;
}
.retweet_submit .indicator {
margin-top: 10px;
}
.retweet_submit span {
padding: 10px 15px !important;
}
.loginform:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
.commentandform{
float:left;
width:550px;
*display:inline-block;
}
.commentandform:after{
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
#comments{
/*	width:550px;*/
position:relative;
margin:15px 0;
}
#comments .comment{
border-bottom:1px dashed #999;
padding:9px 0 7px;
min-height:50px;
}
#comments .prof_img{
float: left;
display:block;
margin-right:5px;
border:1px solid #999;
margin-left:5px;
width:48px;
height:48px;
}
#comments .status-body{
margin-left:63px;
}
#comments p{
font-size:90%;
margin:0;
}
#comments p.date{
color:#999;
font-size:75%;
margin:5px 0 0;
font-family:georgia,serif;
font-style:italic;
}
#side_banner {
float:right;
margin:10px 0;
width:184px;
}
#side_banner p{
margin:5px 5px 10px 5px;
font-size:85%;
}
#wants{
position:relative;
margin:15px 0;
}
#want_header {
background-color: white;
padding: 15px;
margin:15px 0;
-moz-border-radius: 6px;
-webkit-border-radius:6px;
}
.back{
margin:0;
font-size:85%;
text-align:right;
}
#wants .want{
border-bottom:1px dashed #999;
padding:9px 0 7px;
min-height:48px;
}
.want .prof_img{
float: left;
display:block;
margin-right:5px;
border:1px solid #999;
margin-left:5px;
height:48px;
}
.want .status-body{
margin-left:63px;
}
.want p{
margin:0;
}
.want h2 {
font-size: 125%;
margin:0 0 4px;
}
.want .status {
font-size: 95%;
}
.want .status a {
color: blue;
text-decoration: underline;
}
.want .by {
font-size:80%;
}
.want .date{
color:#999;
font-size:90%;
margin:5px 0 0;
font-family:georgia,serif;
font-style:italic;
}
#popular_wants, #tree {
padding: 25px;
background-color: white;
-moz-border-radius:6px;
-webkit-border-radius:6px;
*display:inline-block;
}
#tree {
float:left;
margin:15px 0 20px 0;
padding:15px 25px;
min-width: 750px;
}
#popular_wants:after, #tree:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
#popular_wants h4{
border-bottom:1px dotted #CCCCCC;
color:#666666;
font-size:100%;
font-weight:normal;
margin:0 0 5px;
}
#popular_wants li, .popular_wants li{
font-size: 85%;
line-height: 135%;
}
.relatedwork {
margin:20px 0;
clear:both;
*display:inline-block;
}
.relatedwork:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
.relatedwork h4{
color:#666;
font-size:100%;
font-weight:normal;
margin:0 0 5px;
}
.relatedwork h4 .tree_link {
font-size: 70%;
margin-left: 0.7em;
}
.ranking {
margin:20px 0px 20px 0;
float:left;
*display:inline-block;
}
.ranking:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
.ranking h4{
color:#666;
font-size:90%;
font-weight:normal;
margin:0 0 5px;
overflow:hidden;
white-space:nowrap;
}
.ranking .term{
color:#666;
font-size:90%;
font-weight:normal;
margin:0 0 15px;
overflow:hidden;
white-space:nowrap;
}
.ranking .term .selected{
color:#666;
font-weight:bold;
}
.ranking .term .selected:hover{
text-decoration:none;
}
.hpic{
width:122px;
margin-right:3px;
margin-bottom:5px;
float:left;
}
.hpic img{
width:120px;
height:76px;
border:1px solid #999;
}
.hpic p{
font-size:90%;
}
.hpic .by{
font-size:75%;
color:#999;
display:block;
overflow:hidden;
white-space:nowrap;
width:120px;
}
.hpic .stat{
font-size:75%;
font-family:georgia,serif;
font-style:italic;
color:#999;
display:block;
overflow:hidden;
white-space:nowrap;
width:120px;
}
.rpic{
width:277px;
margin-right:20px;
float:left;
}
.rpic img{
width:275px;
height:175px;
border:1px solid #999;
}
.rpic p{
font-size:90%;
}
.rpic .by{
font-size:75%;
color:#999;
display:block;
overflow:hidden;
white-space:nowrap;
width:275px;
}
.rpic .stat{
font-size:75%;
font-family:georgia,serif;
font-style:italic;
color:#999;
display:block;
overflow:hidden;
white-space:nowrap;
width:275px;
}
#license {
clear:both;
font-size:75%;
color:#999;
margin:20px 0 0;
}
.req_replies h4{
border-bottom:1px dotted #CCCCCC;
color:#666666;
font-size:100%;
font-weight:normal;
margin:0 0 5px;
}
.list{
height: 175px;
margin:15px 0 20px 0;
}
.list .left{
float:left;
}
.list .right{
float:left;
width:453px;
margin-left:15px;
}
.list .right img{
float:left;
margin:0 8px 8px 0;
width:48px;
height:48px;
border:1px solid #999999;
}
.list p{
font-size:80%;
margin:0;
}
.list p.date{
color:#999;
font-size:75%;
margin:5px 0 0;
font-family:georgia,serif;
font-style:italic;
}
.list .delete_pic{
cursor: pointer;
color:gray;
font-size:95%;
font-style: normal;
margin:5px 0 0;
}
.list .delete_pic:hover{
text-decoration: underline;
}
.list .delete_pic img{
width: 11px;
height: 12px;
margin: 0 2px 0 10px;
border: none;
}
.list .comicon img {
float: none !important;
border: none !important;
margin: 0 3px 3px 0 !important;
width: 16px !important;
height: 16px !important;
}
.list .left img.graffiti{
width:275px;
height:175px;
border:1px solid #999;
}
.list .left .shot{
width:280px;
height:175px;
border:1px solid #999;
overflow:hidden;
display:relative;
}
.list .left .shot img{
height:175px;
border:none;
}
.list .left .movie{
width:240px;
height:180px;
border:1px solid #999;
overflow:hidden;
display:relative;
}
.list .left .movie img{
width:240px;
border:none;
}
.profdata{
color:#666666;
font-size:70%;
}
.profdata .selected{
color:#666666;
text-decoration:underline;
}
.tab{
color:#666666;
font-size:70%;
*display:inline-block;
}
.tab:after{
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
.tab .bline{
border-bottom:1px solid #CCC;
min-height:1.4em;
height:21px;
padding-top:4px;
}
.tab ul{
margin:0;
padding:0;
/*	height:21px;*/
}
.tab a{
display:block;
min-width:9.5em;
min-height:1.4em;
_width:9.5em; /* IE6 only */
height:17px;
margin-right:5px;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
text-align:center;
padding:3px 3px 0;
white-space:nowrap;
}
.tab a.selected{
color:black;
border-bottom:1px solid #FFF;
}
.tab a:hover{
background-color:#E2F2FB;
text-decoration:none;
}
.tab a.selected:hover{
background-color:white !important;
}
.tab li{
list-style:none;
float:left;
}
#pagenation{
font-size:80%;
text-align:center;
}
#pagenation a{
display:inline-block
}
#footer {
color:#999;
clear:both;
text-align:center;
font-size:80%;
margin:15px 0;
background-color:white;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
#footer p{
margin:3px 0;
}
.border-top {
border-top: 1px solid #9AE4E8;
padding-top: 0.3em;
}
div.readmore {
float: right;
margin-top: 0.6em;
margin-right: 0.3em;
font-size: 80%;
}
/*** language menu ***/
ul.lang-list {
list-style: none;
margin: 0;
padding: 0;
color: #666;
}
ul.lang-list input {
vertical-align: top;
}
ul.lang-list label {
color: #0084B4;
cursor: pointer;
}
ul.lang-list label.selected {
font-weight: bold;
color: black;
cursor: default;
}
.current-lang {
color: #0084B4;
cursor: pointer;
background: url('/public/img/icon/world.png') no-repeat;
padding-left: 20px;
}
#lang-menu {
text-align: left;
width: 200px;
border: 1px solid #666;
background-color: white;
padding: 1em;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
z-index: 1000;
}
.twitter-oauth-button {
border: none;
}
/*** Clearfix ***/
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-block;
min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
/* retweet.css */
a.retweet {
float:right;
font: 12px Helvetica,Arial;
color: #000; text-decoration: none;
border: 0px;
}
a.retweet span {
display: inline-block;
color: #FFF;
background: #94CC3D;
margin-left: 2px;
border: 1px solid #43A52A;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px;
}
a.vert {
display: block;
text-align: center;
font-size: 16px;
float: left;
margin: 4px;
}
a.retweet strong.vert {
display: block;
margin-bottom: 4px;
background: #F5F5F5;
border: 1px solid #EEE;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; padding: 3px;
}
a.retweet span.vert {
display: block;
font-size: 12px;
margin-left: 0px;
}
.indicator {
display: none;
border: none;
float:left;
margin-right:5px;
}