Monday, February 6th, 2012

Client Proofing Sites For Professional Photographers

CSS Settings

/*********************************************************/
/* This is the main CSS file which styles the app
/*********************************************************/

a, a:link, a:visited {
color:red;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/*********************************************************/
/* Header elements
/*
/* The header is a 960 fluid container (#header) wrapped
/* by an outside container div (#header_container)
/*
/* The header also contains the logo/title in an H1 and
/* navigation in a UL (#nav)
/*
/*********************************************************/

/* The outer container div
**********************************************************/
#header_container {
border-top:5px solid #333;
}

/* The grid container for the header
**********************************************************/
#header {
height:75px;
margin-bottom:20px;
}

/* The site title H1 (text only applies when there’s no logo)
**********************************************************/
#header h1 {
line-height:75px;
color:#333;
font-family: Georgia, Times, serif;
font-weight: normal;
font-size:2.5em;
}
#header h1 a, #header h1 a:link {
color:#333;
text-decoration: none;
}
#header h1 a:hover {
text-decoration: underline;
}

/* Header nav
**********************************************************/
ul#nav {
float:right;
list-style-type: none;
font-size:11px;
font-weight:bold;
text-transform: uppercase;
}
ul#nav li {
display:inline;
list-style-type: none;
}
ul#nav li a {
color:#333;
text-decoration:none;
}

/* Create buttons (new client and new shoot)
**********************************************************/
ul#admin_create {
margin:0;
padding:0;
float:right;
list-style-type: none;
clear: right;
width:300px;
}
ul#admin_create li {
display:inline;
padding:0;
margin:0;
list-style-type: none;
}
ul#admin_create li a {
display:block;
float:right;
height:24px;
width:101px;
margin-left:20px;
text-indent: -9999px;
}
#new_client {
background: transparent url(../images/new-client.png) no-repeat scroll 0 0;
}
#new_shoot {
background: transparent url(../images/new-shoot.png) no-repeat scroll 0 0;
}

/*********************************************************/
/* Form elements
/*
/*********************************************************/

fieldset {
background:#eee;
width:400px;
border-bottom:3px solid #333;
padding-top:20px;
}

legend {
font-weight: bold;
padding-left:10px;
color:#333;
text-transform: uppercase;
}
fieldset p {
margin:0 0 10px 10px;
}
fieldset label {
color:#666;
}

input.file_field {
width:100px;
}

/*********************************************************/
/* Sidebar elements
/*
/*********************************************************/
#sidebar, #comments {
margin-top:20px;
}
#sidebar h3, #comments h3, #extra h3 {
color:#333;
font-size:100%;
margin:0 0 5px 0;
border-bottom:1px solid #eee;
}
#sidebar h3.h_link {
background: transparent url(../images/clear-folder-open-image.png) no-repeat top left;
line-height:16px;
padding-left:24px;
border-bottom:none;
margin-bottom:20px;
}
#sidebar h3.h_link a {
color:#356AA0;
}

/* Comment divs (displayed on sidebar per image)
**********************************************************/
div.comment {
background:#f3f3f3;
border:1px solid #ccc;
padding:5px 10px;
margin:10px 0;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.comment a, div.comment a:link, div.comment a:visited {
color:#333;
}
div.comment h4 {
font-weight:normal;
color:#999;
font-size:11px;
margin-bottom:5px;
}
div.comment div.comment_about {
color:#999;
font-size:11px;
margin:0;
text-align: right;
}

/* Legend (icon defs on sidebar)
**********************************************************/
ul#legend {
margin:0 0 20px 0;
padding:0;
list-style-type: none;
}
ul#legend li {
list-style-type: none;
padding-left:24px;
margin:0;
color:#999;
}
ul#legend li.comments {
background: transparent url(../images/balloon.png) no-repeat top left;
}
ul#legend li.star {
background: transparent url(../images/star.png) no-repeat top left;
}
ul#legend li.client {
background: transparent url(../images/user.png) no-repeat top left;
}
ul#legend li.delete {
background: transparent url(../images/cross-small.png) no-repeat top left;
}

/* Asset links (icons on sidebar for asset files)
**********************************************************/
ul#asset_list {
margin:0 0 20px 0;
padding:0;
list-style-type: none;
}
ul#asset_list li {
list-style-type: none;
padding-left:24px;
margin:0;
color:#999;
background: transparent url(../images/document.png) no-repeat top left;
}
ul#asset_list li.application_pdf {
background: transparent url(../images/document-pdf.png) no-repeat top left;
}
ul#asset_list li.image_png, ul#asset_list li.image_jpg, ul#asset_list li.image_jpeg, ul#asset_list li.image_gif, ul#asset_list li.image_tif, ul#asset_list li.image_tiff {
background: transparent url(../images/document-image.png) no-repeat top left;
}
ul#asset_list li.application_zip {
background: transparent url(../images/document-zipper.png) no-repeat top left;
}
ul#asset_list li.video_quicktime {
background: transparent url(../images/document-film.png) no-repeat top left;
}

/*********************************************************/
/* Main area elements
/*
/*********************************************************/

/* Headers #main
*********************************************************/
#main h2 {
font-weight: normal;
}
#main h3 {
color:#333;
font-weight:normal;
}
#main h4 {
color:#fff;
padding-left:10px;
font-size:100%;
background:#333;
line-height:24px;
}
#main h2 span, #main h3 span {
font-size:12px;
font-weight:normal;
margin-left:10px;
}
#main h2 a, #main h3 a {
color:red;
text-decoration: none;
}
#main div.dashboard h3 {
margin-bottom:10px;
}

/* Dashboard screen
*********************************************************/
#main div.dashboard, #main div.user {
border-bottom:1px solid #eee;
padding-top:20px;
}

/* User index screen
*********************************************************/
div.user ul {
list-style-type: none;
margin:0;
padding:0;
}
div.admin {
background:#F9F7ED;
}
div.user li {
list-style-type: none;
margin:0;
padding:0;
}
div.user li.delete {
margin-top:10px;
}
div.user li ul {
margin-left:20px;
}

/* Image icons above an image in image -> show
*********************************************************/
div.image_actions {
height:16px;
margin:0 0 10px 0;
}
div.image_actions ul {
margin:0;
padding:0;
list-style-type: none;
height:16px;
}
div.image_actions ul li {
display:inline;
margin:0 10px 0 0;
padding:0;
font-size:11px;
color:#aaa;
list-style-type: none;
}
div.image_actions ul li.delete {
margin-left:100px;
}

.selects_container {
margin-bottom:100px;
}
.selects_container p.clear {
clear:both;
color:#999;
}

div.square, div.square_approved {
background:#eee;
border:1px solid #ddd;
padding:5px 5px 0 5px;
margin:0 10px 10px 0;
float:left;
}
div.square_approved {
background:#CDEB8B;
}
div.image_inner_small {
min-height:200px;
}

ul#available {
margin-bottom:5px;
}
ul#available li {
margin:0 0 0 15px;
padding:0;
}

div.thumb_actions {
height:16px;
margin:2px 0;
}
div.thumb_actions ul {
margin:0;
padding:0;
list-style-type: none;
height:16px;
}
div.thumb_actions ul li {
display:inline;
margin:0;
padding:0;
font-size:11px;
color:#aaa;
list-style-type: none;
}
div.thumb_actions ul li.delete {
margin-left:20px;
}

#image {
clear:both;
}
#image img{
border: 1px solid #ccc;
background:#eee;
padding:5px;
}

ul#image_actions {
margin:10px 0 0 0;
padding:0;
list-style-type: none;
height:24px;
}
ul#image_actions li {
padding:0;
margin:0 10px 0 0;
display:block;
float:left;
}
ul#image_actions li a {
color:#999;
text-decoration: none;
line-height:24px;
}

span.tip {
color:#999;
font-size:11px;
}

#main div.comment_row {
margin-bottom:40px;
}
#main div.comment_row img {
padding:5px;
background:#eee;
border:1px solid #ccc;
}

/* Flash notices (green)
*************************************************/
div#notice {
background:#D0F9B3;
border-top:1px solid #88CB65;
border-bottom:1px solid #88CB65;
color:#88CB65;
padding:3px 6px;
margin-bottom:20px;

}

/*********************************************************/
/* Wizard displays used when admin/user first signs in
/*********************************************************/
div.wizard {
background:#F9F7ED;
border:5px solid #4096EE;
color:#aaa;
margin-bottom:40px;
}
div.wizard h2 {
text-align: center;
padding-top:20px;
}
div.wizard p, div.wizard ol {
font-size:125%;
padding:0 20px;
}

/*********************************************************/
/* Login box
/*********************************************************/
#login_box {
background:#eee;
border:5px solid #ccc;
padding:20px;
}
#login_box label {
font-weight:bold;

}
#login_box input.big {
font-size:130%;
}

/*********************************************************/
/* Footer styles
/*********************************************************/
#footer {
border-top:1px solid #eee;
color:#ccc;
margin-top:100px;
text-align:center;
}