/*** base styles ***/

* {border:0; outline:0; padding:0; margin:0;}

body {font-size:11px; font-family:arial, helvetica, sans-serif; height: 100%;}
html {overflow: -moz-scrollbars-vertical;}

/* divide line-height by font-size to get margin-bottom */
h1, h2, h3, h4, h5, h6, p, ul, ol, td, th, .content div, form, caption, dl, iframe {margin-bottom:18px; line-height:1.5em;}
h1 {font-size: 20px; line-height:1.2em;}
h2 {font-size: 15px;}
h3 {font-size: 14px; margin-bottom:9px;}
h4 {font-size: 13px;}
h5 {font-size: 12px;}
h6 {font-size: 11px;}

ul {list-style-type:none;}
ol {margin-left:26px;}
div.hr hr {display:none;}
div.hr {height:1px; background:#DDD; margin-bottom:18px;}

table {border-collapse:collapse; border-top:1px solid #DDD; border-left:1px solid #DDD;}
td, th {padding:8px 18px 9px; border-bottom:1px solid #DDD; border-right:1px solid #DDD;}

.container {width:738px; margin:0 auto;}
.container_s {width:549px; margin:0 auto;}

div.s1, .s2, .s3, .s4, .s5, .s6, .s7, .s8, .s9, .s10, .s11, .s12, #leftcol, #rightcol {float:left; margin-right:18px;}

.s1  {width: 45px;}
.s2  {width: 108px;}
.s3  {width: 171px;}
.s4  {width: 234px;}
.s5  {width: 297px;}
.s6  {width: 360px;}
.s7  {width: 423px;}
.s8  {width: 486px;}
.s9  {width: 549px;}
.s10 {width: 612px;}
.s11 {width: 675px;}
.s12 {width: 738px; margin:0;}
.a1 { padding-right: 63px;}
.p1 { padding-left: 63px;}

#leftcol {width:348px; padding-right:36px; margin-bottom:18px;}
#rightcol {width:336px; margin-bottom:18px;}

.last, .right {margin-right:0 !important; padding-right:0 !important;}
.bottom, .nb {margin-bottom:0 !important; padding-bottom:0 !important;}
.reset {margin:0 !important; padding:0 !important; border:0; background:none; }
.strong {font-weight:bold;}
.quiet {color:#DDD;}
small, .small {font-size:10px;}
big, .big {font-size:13px;}
p+p {margin-top:-6px;}
.a-left {text-align:left;}
.a-center {text-align:center;}
.a-right {text-align:right;}
.f-left {float:left;}
.f-center {margin:0 auto;}
.f-right {float:right;}
.hmb {margin-bottom:9px;}
.fmb {margin-bottom:18px;}
.hlist li {float:left; margin-right:18px; border:0;}

.clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix, .container {display:inline-block;}
* html .clearfix, * html .container {height:1%;}
.clearfix, .container {display:block;}
.clear {clear:both;}


/*** add.io specific styles ***/

/* fonts and colours */
body {background:#FFF; color:#777;}
a {color:#019DBE; text-decoration:none;}
a:hover {text-decoration:underline;}

.quiet a, .action a, .tags a {color:#BBB;}
.quiet a:hover, .action a:hover, .tags a:hover {text-decoration:underline;}

#nav {background:#F6F6F6; margin-bottom:18px;}
#nav p {height:70px; line-height:70px; font-size:11px; margin-bottom:0;}
#addform {border-bottom:1px solid #F1F1F1;}
#adder {display:block; clear:both;}
#adder form {background:#BBB; padding:12px; -moz-border-radius:18px; -webkit-border-radius:18px; position:relative;}
#main {margin-bottom:18px;}
#footer {margin-top:18px; border-top:1px solid #F1F1F1;}
#footer p {margin:9px 0; font-size:85%;}
.active {background-position: right 12px;}
.tag {margin-right:3px; color:#999;}
#url {width:85%;}
#overlay {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:5000; background:#000 url(../img/spinner.gif) 50% 50% no-repeat; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80);}
#changer {height:24px; line-height:24px;}

.std ul, .list ul, .grid ul  {list-style:none; margin:0;}
.std span, .list span, .grid span {margin-right:3px;}
.std .middle {position:relative;}
.std .edit {position:absolute; right:5px; top:60px; cursor:pointer;}
.std .delete {position:absolute; left:5px; bottom:5px; visibility:hidden;}
ul.icons {position:absolute; right:0; top:45px; margin:0; display:none; background:#FFF;}
ul.icons li {padding:0; border:0; float:left; margin-left:6px; cursor:pointer;}

.std img.thumb {float:left; margin:4px 9px 9px 0; -moz-box-shadow:2px 2px 2px #999; -webkit-box-shadow:2px 2px 2px #999;}
.std li {overflow:hidden; position:relative; padding:18px 0; border-bottom:1px dotted #DDD;}
.std .date {font-size:10px; color:#DDD; position:absolute; bottom:18px; right:0;}
.std .tags {font-size:10px; color:#BBB; margin-bottom:0;}
.std .action {font-size:10px; color:#BBB; text-align:right; margin-bottom:0;}
.std .comment {visibility:hidden;}
.std .txt {color:#555; line-height:1.2em;}
.std .comment textarea {padding:4px; height:26px; width:210px; line-height:1.2em; border-color:#DDD; background:#FCFCFC; color:#777; font-family:inherit; font-size:inherit; margin-left:-3px;}
.std li:hover .delete {visibility:visible;}

.list li {overflow:hidden; position:relative; padding:8px 0; border-bottom:1px dotted #DDD;}
.list li .s8 {width:512px; margin-right:0;}
.list li h3 {margin-bottom:0; font-weight:normal;}
.list li .date {margin-bottom:0;}
.list img.thumb, .list .icons, .list form, .list .action, .list .tags,.list .txt, .list .comment, .list .edit, .list .extra, .list .delete {display:none !important;}

.grid li {float:left; width:88px; margin:7px;}
.grid img.thumb {-moz-box-shadow:2px 2px 2px #999; -webkit-box-shadow:2px 2px 2px #999;}
.grid li h3, .grid .date, .grid .tags, .grid .icons, .grid .action, .grid form, .grid .txt, .grid .comment, .grid .edit, .grid .quiet, .grid .delete {display:none;}

.topics {list-style-type:none;}
.topics li {list-style-type:none; float:left; margin:0 18px 18px 0; font-size: 13px;}

#index {list-style:none; overflow:auto;}
#index li {width:18px; text-align:center; float:left; margin:0 9px 9px 0;}

.morelinks ul {margin-bottom: 9px;}
.morelinks ul li {border:0; padding:2px 9px;}

/* forms */
input, textarea, button {border:1px solid #BBB; padding:9px; color:#5C5347; -webkit-border-radius:9px; -moz-border-radius:9px; display:inline-block; font-family:inherit; font-size:inherit;}
label.error {color:#F00; display:inline-block; position:absolute; left:300px; top:18px; background:#FFF; padding:3px;}
button.g-button, a.g-button, input[type=submit].g-button {width:10%; font-weight:bold; background: -moz-linear-gradient(top, #DDD, #EEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#EEE)); text-decoration:none; cursor:pointer; text-shadow:0 1px 1px rgba(255,255,255,1);  -webkit-border-radius:9px; -moz-border-radius:9px; }
button.g-button:hover, a.g-button:hover, input[type=submit].g-button:hover {background: -moz-linear-gradient(top, #D9D9D9, #E9E9E9); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D9D9D9), to(#E9E9E9));} 
.filter {text-align:left; padding:4px 4px 4px 20px; background:transparent url(../img/search.png) no-repeat 3px 3px; border-color:#DDD; color:#777; width:130px;}
button {cursor:pointer;}
.hidden {display:none;}
button.sm {padding:4px; width:30px;}

.tipa, .tipb {cursor:pointer;}
#tiptip_holder {display:none; position:absolute; top:0; left:0; z-index:99999;}
#tiptip_holder.tip_top {padding-bottom:5px;}
#tiptip_holder.tip_bottom {padding-top:5px;}
#tiptip_holder.tip_right {padding-left:5px;}
#tiptip_holder.tip_left {padding-right:5px;}
#tiptip_content {font-size:11px;color:#fff; border:1px solid rgb(255,255,255); border:1px solid rgba(255,255,255,0.25); background-color:rgb(25,25,25); background-color:rgba(25,25,25,0.92); background-image:0 to(#000));border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;box-shadow:0 0 3px #555;-webkit-box-shadow:0 0 3px #555;-moz-box-shadow:0 0 3px #555;padding:4px 8px;}
#tiptip_arrow, #tiptip_arrow_inner {position:absolute;height:0;width:0; border-color:transparent; border-style:solid; border-width:6px;}
#tiptip_holder.tip_top #tiptip_arrow {border-top-color:rgb(255,255,255); border-top-color:rgba(255,255,255,0.35);}
#tiptip_holder.tip_bottom #tiptip_arrow {border-bottom-color:rgb(255,255,255); border-bottom-color:rgba(255,255,255,0.35);}
#tiptip_holder.tip_right #tiptip_arrow {border-right-color:rgb(255,255,255); border-right-color:rgba(255,255,255,0.35);}
#tiptip_holder.tip_left #tiptip_arrow {border-left-color:rgb(255,255,255); border-left-color:rgba(255,255,255,0.35);}
#tiptip_holder.tip_top #tiptip_arrow_inner {margin-top:-7px; margin-left:-6px; border-top-color:rgb(25,25,25); border-top-color:rgba(25,25,25,0.92);}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {margin-top:-5px; margin-left:-6px; border-bottom-color:rgb(25,25,25); border-bottom-color:rgba(25,25,25,0.92);}
#tiptip_holder.tip_right #tiptip_arrow_inner {margin-top:-6px; margin-left:-5px; border-right-color:rgb(25,25,25); border-right-color:rgba(25,25,25,0.92);}
#tiptip_holder.tip_left #tiptip_arrow_inner {margin-top:-6px; margin-left:-7px; border-left-color:rgb(25,25,25); border-left-color:rgba(25,25,25,0.92);}