jquery-ui/ui/demos/real-world/photo-manager/theme/css/screen.css
2008-06-04 02:34:33 +00:00

180 lines
3.0 KiB
CSS

body {
padding: 0;
margin: 0;
line-height: 1.5em;
font-size: 75%; /* gives us 12px in most browsers */
font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
background: #aefe05 url('../img/side_top.jpg') repeat-x top; /* body background from ui.jquery.com */
color: 222;
}
/*
================================
=LAYOUT
================================ */
h1 {
padding: 0 0 0 52px;
margin: 0;
font-size: 1.5em; /* 18px */
line-height: 2em; /* 36px */
background: url('../img/photos_gold_32.gif') no-repeat 8px 50%; /* Thanks to Iconbuffet.com */
color: #fff;
}
#body_wrap {
width: 960px;
margin: 0 auto;
background: #fff url('../img/body_wrap_bg.gif') repeat-y;
}
#content {
float: left;
width: 632px;
}
#sidebar {
float: right;
width: 320px;
}
#footer {
clear: both;
background: #32342f;
color: #fff;
}
/*
================================
=SECTIONS
================================ */
/*
----------------
=HEADER
---------------- */
/*
----------------
=CONTENT
---------------- */
#content h2 {
padding-left: 25px;
}
/*
=gallery
-------- */
.gallery {
min-height: 108px;
padding: 0;
margin: 18px 0;
list-style: none;
}
* html .gallery {
height: 108px; /* min-height for lte IE6 */
}
.gallery.active {
background: #eee;
}
.gallery li {
float: left;
width: 160px;
padding: 0 25px;
margin: 0 0 8px;
}
.gallery img {
display: block;
padding: 7px;
border: 1px solid #ccc;
background: #fff;
}
.displayBox img {
border: 25px solid #222;
}
/* img title */
.gallery p {
float: left;
padding: 0;
margin: 0;
}
/* img toolbar */
.gallery div {
float: right;
}
.gallery div a {
float: left;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
text-indent: -9999px; /* Phark revisited image replacement */
}
.gallery div a:focus {
outline: 0;
}
.tb_supersize {
background-image: url('../img/search_16.gif'); /* Thanks to Iconbuffet.com */
}
.tb_trash {
background-image: url('../img/trash_16.gif'); /* Thanks to Iconbuffet.com */
}
/*
----------------
=SIDEBAR
---------------- */
.box {
margin: 18px;
border: 1px solid #ccc;
background: #fff;
}
.box h2 {
padding: 0 8px;
margin: 0;
font-size: 1.5em;
line-height: 2em;
background: #525252 url('../img/header_bg.png') repeat-x bottom;
color: #fff;
}
.box div {
min-height: 128px;
border: 2px solid #fff;
}
* html #sidebar .box div {
height: 128px; /* min-height for lte IE6 */
}
#trash div.active {
border-color: green;
}
#shred div.active {
border-color: red;
}
#trash div img {
float: left;
margin: 4px;
}
/*
----------------
=FOOTER
---------------- */
#footer p {
margin: 0;
text-align: right;
}
/*
================================
=FLOAT CLEARING
================================ */
#body_wrap, ul.gallery, #trash div {
display: inline-block;
}
#body_wrap:after, ul.gallery:after, #trash div:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html #body_wrap, * html ul.gallery, * html #trash div {
height: 1%;
}
#body_wrap, ul.gallery, #trash div {
display: block;
}