base.css

@import url("reset.css");

/* ---------- Base Styles ---------- */

body{
    background:#fff;
    font: 14px/16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color:#666;
}

a{
    text-decoration:none;
    font-weight:500;
    color:#52a8db;
}

a:hover{
    color:#3381aa;
}

/* ---------- Main Home Styles ---------- */

.home{
    font-weight:300;
}

.home #container{
    width:100%;
}

#main-top{
    background:url(images/main-top-bg2.gif) repeat-x top left;
    height:44px;
    padding:10px 20px 0 20px;    
    overflow:hidden;
}

#main-top .main-title{
    display:block;
    width:155px;
    height:38px;
    background:url(images/main-title2.gif) top right no-repeat;
    text-indent:-99999px;
    float:left;
}

#main-top .main-menu{
    float:right;
    margin-top:9px;
}

#main-top .main-menu a{
    color:#fff;
    font-size:14px;
    background:#418bb3;
    padding:4px 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:0 0 0 10px;
}

#main-top .main-menu a:hover{
    background:#444;
}

#inter-main{
    background:#f0f0f0;
    padding:25px 0 0 25px;
    font-size:24px;
    line-height:30px;
    overflow:hidden;
    border-bottom:1px solid #ddd;
}

#inter-main .inter-main-inner{
    width:900px;
    margin:0 auto;
    overflow:hidden;
}

#inter-main .inter-main-inner #droplet-area{
    float:left;
    width:200px;
    padding-top:50px;
}

#inter-main .inter-main-inner #droplet-area{
    float:left;
    width:200px;
    padding-top:50px;
}

.html-home .droplet{
    width:153px;
    height:64px;
    background:url(images/upload-full.gif) no-repeat top left;
    
    display:block;
    overflow:hidden;
    cursor: pointer;
    cursor: hand;
}


.html-home .droplet-success{
    width:153px;
    height:64px;
    background:url(images/droplet-success.gif) no-repeat top left;
    
    display:none;
    overflow:hidden;
    cursor: pointer;
}

.html-home .droplet input.file
{
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0;
    font-size: 3em;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
*.html-home .droplet:hover{
    color:#fff;
    background:url(images/upload-full.gif) no-repeat left -64px;
    cursor: pointer;
    cursor: hand;
}

.droplet_spinner { 
    display:none;
}

.upload-url{
    font-size:26px;
    line-height:29px;
    border:none;
    margin:5px auto;
    display:block;
    color:#555;
    width:350px;
    text-align:center;
}

#inter-main .inter-main-inner #info{
    float:left;
    width:700px;
    margin-top:8px;
}

#inter-main .inter-main-inner #info p{
    margin-bottom:20px;
}

.home table#short_stats{
    font: 13px/15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color:#555;
    background:#f5f5f5;
    margin:50px auto 25px auto;
    padding-bottom:15px;
    width:950px;
    border:1px solid #eee;
    border-collapse:separate;
    -moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

}

.home table#short_stats a{
    color:#037bc2;
}

.home table#short_stats thead{

}

.home table#short_stats thead th{
    font-size:20px;
    font-weight:lighter;
    text-align:left;
    line-height:30px;
    padding:8px 10px;
}

.home table#short_stats thead th.delete, .home table#short_stats thead th.hits, .home table#short_stats tbody tr td.delete, .home table#short_stats tbody tr td.hits{
    text-align:center;
    width:75px;
}

.home table#short_stats .link_delete{
    opacity:.80;
}

.home table#short_stats .link_delete:hover{
    opacity:1;
}

.home table#short_stats tbody tr{
    border-collapse:separate;
    -moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.home .table-even{ background:#eee; }

.home .table-hover{ background:#eee; }

.home table tbody tr td{
    padding:8px 10px;
}

.home #pages{
    width:200px;
    margin:0 auto;
    overflow:hidden;
    clear:both;
    text-align:center;
    font-size:18px;
    line-height:22px;
    color:#999;
}

.home #pages .next{
    margin:0 10px;
}

.home #pages .prev{
    margin:0 10px;
    
}

.home #footer{
    height:20px;
}
/* ---------- Main Settings Styles ---------- */

.settings-fish{
    background:#fff url(images/settings-fish.gif) top left no-repeat;
    text-indent:-99999px;
    width:122px;
    height:95px;
    margin:20px auto;
    display:block;
}

.settings{
    width:600px;
    margin:5px auto 20px auto;
}

.settings p{
    margin:25px 0;
}

.settings label, .settings .api-label{
    float:left;
    display:block;
    width:180px;
    font-weight:400;
}

.settings #id_email{

}

.settings #id_email, .settings #id_password, .settings #id_custom_domain{
    border:1px solid #fff;
    padding:2px 5px;
    color:#666;
    font-size:20px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	width:355px;
}

.settings .custom_domain {
    font-size: 0.6em;
    font-family: Arial;
}
#custom_domain { display: none;}

.settings .buttons{
    overflow:hidden;
    margin:25px auto 10px auto;
    width:340px;
}

.settings .save{
    background:url(images/save.gif) top left no-repeat;
    width:153px;
    height:54px;
    text-indent:-99999px;
    border:none;
    cursor:pointer;
    cursor:hand;
    margin:25px auto 15px auto;
    display:block;
}

.settings .home{
    background:url(images/home.gif) top left no-repeat;
    width:153px;
    height:54px;
    text-indent:-99999px;
    border:none;
    cursor:pointer;
    cursor:hand;
    margin-right:15px;
    display:block;
    float:left;
}

.settings .api-key{

}

.settings .user-delete{
    text-align:center;
    margin-top:-15px;
}

.settings #user_delete{
    color:#333;
    font-size:13px;
    text-align:center;
}


/* ---------- Main About Styles ---------- */

.about{
    width:700px;
    font-size:18px;
    margin:0 auto;
}

.about p{
    margin:6px 0;
}

.about h3{
    font-size:28px;
    line-height:34px;
    text-shadow: #ccc 1px 1px 2px;
    margin-bottom:5px;
}


.about h4{
    font-size:24px;
    line-height:30px;
    margin-bottom:5px;
}

.about h6{
    font-size:20px;
    line-height:32px;
    margin-bottom:5px;
}

.about pre{
    font-size:14px;
}

/* ---------- Login Styles ---------- */

.login{
    background:url(images/body-ocean-bg.gif) repeat left 372px;
    color:#cff5ff;
}

.login a{
    color:#fff;
    text-shadow: #418bb3 1px 1px 2px;
}

.login a:hover{
    color:#232323;
}

.login #container{
    width:100%;
}

.login #sky-bg{
    width:100%;
    background:url(images/sky-bg.gif) repeat-x left top;
}

#sky-header{
    width:100%;
    height:130px;
    padding-top:50px;
}

#sky-header .sky-title{
    text-indent:-999999px;
    display:block;
    width:438px;
    height:116px;
    background:url(images/sky-title-7.gif) no-repeat top left;
    margin:0 auto;
}

#ocean-floor{
    width:100%;
    background:url(images/waves-top.gif) repeat-x top left;
}

#ocean-floor .ocean-main{
    width:930px;
    margin:0 auto;
    background:transparent url(images/fishies.gif) 0 90px no-repeat;
}

#ocean-floor .ocean-text{
    padding-top:113px;
    font-weight:300;
    color:#cff5ff;
    font-size:30px;
    line-height:35px;
    margin-bottom:15px;
    position:relative;
    width:825px;
    margin:0 auto 15px auto;
}

#ocean-floor .ocean-header{
    color:#fff;
    font-size:54px;
    line-height:60px;
    text-align:center;
    font-weight:600;
    margin-bottom:10px;
    text-shadow: #418bb3 1px 1px 2px;
}

#ocean-floor .ocean-form{
    margin:0 auto;
    width:670px;
}

#ocean-floor .ocean-form .errorlist li{
    color:#fff;
    font-size:18px;
    font-weight:bold;
    padding:5px;
}

#ocean-floor .ocean-form label{
    display:none;
}

#ocean-floor .ocean-form #id_email, #ocean-floor .ocean-form #id_password{
    background:#caedfa;
    border:#caedfa 1px solid;
    width:300px;
    color:#333;
    font-size:30px;
    line-height:36px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom:15px;
    padding:5px;
    font-weight:500;
}

#ocean-floor .ocean-form #id_email{
    float:left;
}

#ocean-floor .ocean-form #id_password{
    float:right;
}

#ocean-floor .ocean-form #register_button{
    width:307px;
    height:59px;
    background:url(images/ocean-signup-button.gif) top left no-repeat;
    border:none;
    text-indent:-999999px;
    cursor: pointer;
    cursor: hand;
    margin:0 0 5px 185px;
    font-weight:200;
    text-shadow:none;
}

#ocean-floor .ocean-form #login_button{
    display:none;
    width:307px;
    height:59px;
    background:url(images/ocean-login-button.gif) top left no-repeat;
    border:none;
    text-indent:-999999px;
    cursor: pointer;
    cursor: hand;
    margin:0 0 5px 185px;
    font-weight:200;
    text-shadow:none;
}

#ocean-floor .ocean-form .log-in{ }

#ocean-floor .ocean-form .sign-up{ display:none; }

#ocean-floor .ocean-form .sign-up, #ocean-floor .ocean-form .log-in{
    text-align:center;
    color:#cff5ff;
    font-size:22px;
    font-weight:300;
}

.errorlist { color: red; font-size: 0.8em;}
.messages { color: green; font-size: 0.8em; padding: 4px 10px; background: #EFF2B6;}


/* ---------- Bookmarklet ---------- */

.bookmarklet{
    background:#f0f0f0 url(images/bookmarklet-bg.gif) center 20px no-repeat;
}

.bookmarklet #container{
    width:385px;
    margin:115px auto 0 auto;
    overflow:hidden;
}

.bookmarklet .short_url{
    font-size:28px;
    line-height:30px;
    padding:3px 5px;
    border:none;
    height:40px;
    text-align:center;   
    width:375px;
    background:#f0f0f0;
    color:#666;
}


/* tipsy related styles */
.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 100000; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-weight:normal;}
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url('images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }

#facebox pre { display: block;}