body {font: 12px verdana, arial, sans-serif; color: #000}

h1 {font-size: 5.0em}
h2, h3 {font-family: verdana, arial, sans-serif; font-style: italic; font-size: 2em; color: #555}
h4 {font-size: 2.0em}
blockquote {font-size: 1.5em}
p {font-size: 1em; margin: 10px 0 0 10px}
input {font-size: 1.0em}

a {color: #555; text-decoration: underline}
a:hover {color: #000; text-decoration: none}

.clear {clear: both}
.warning {color: red; text-align: center; margin-bottom: 25px}


/*
 * Header part
 */
div#header {height: 70px; width: 900px; margin: 0 auto;
    background: #000 url('http://static.black-frames.net/img/header_right.png') no-repeat center right}

div#header>div {height: 70px; padding: 0 10px 0 20px; width: 182px; float: left;
    background: transparent url('http://static.black-frames.net/img/header_left.png') no-repeat center left}

div#header>div>h1 {margin: -5px 0 0 20px}
div#header>div>h1>a>span {display: none;}


div#header>ul {float: right; margin: 10px 60px 0 0}
div#header>ul>li {display: inline}
div#header>ul>li>a {color: #fff; padding: 0 10px; font-size: 1.25em; font-family: "Trebuchet MS", arial, sans-serif;
    font-weight: bold; text-decoration: none; text-transform: uppercase; }
div#header>ul>li>a:hover {text-decoration: underline}
div#header>ul>li.add-a-picture {color: #000; padding: 2px 0;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    background: transparent url('http://static.black-frames.net/img/add_a_picture_1px.png') repeat-x center center}
div#header>ul>li.add-a-picture>a {color: #000}
div#header>ul>li.add-a-picture:hover {background: transparent url('http://static.black-frames.net/img/add_a_picture_hover_1px.png') repeat-x center center}
div#header>ul>li.add-a-picture:hover>a {text-decoration: none}

div#header>form {float: right; margin: 10px 60px 0 0}
form>div#search {display: block; margin: 0; width: auto}
div#header>form>div>input[type=text] {border: solid white 1px; background-color: #000; color: #bbb; padding: 2px}
div#header>form>div>input[type=text]:hover {color: #fff}

div#header>form>div>input[type=submit] {background-color: #ddd; color: #000; padding: 1px 2px;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: solid #fff 1px}
div#header>form>div>input[type=submit]:hover {cursor: pointer}

/* END Header PART */

/*
 * Content part
 */
#content {clear: both; width: 900px; margin: 0 auto 0; padding-top: 10px}
#content>h2, #content>h3 {margin-top: 30px}
div.navigation>a.previous {float: left}
div.navigation>a.next {float: right}
 /* END Content PART */

div.display-text {margin-top: 20px}
ul#image-list {margin-top: 40px}
ul#image-list>li {clear: both; padding: 50px 20px}
ul#image-list>li:first-child {padding-top: 0}

ul#image-list>li>a>img {width: 450px; border: none; float: left}
div.details {padding: 10px; border: solid #888 1px;
    border-radius: 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px}

ul#image-list>li>div.details {margin: 0 0 5px 470px}

div.details>ul.vote {float: right}
div.details>div.vote {float: right}
div.details>ul>li {display: inline; padding: 0 5px}

div.details>h2 {font-family: "georgia", verdana, arial, sans-serif}
div.details>h2>a {color: #000; text-decoration: none}
div.details>a {font-size: 10px; color: #888; font-style: normal;
    font-family: verdana, arial, sans-serif; text-decoration: none}

div.details>div.short-url {margin-top: 10px; font-size: 9px}

div.details>form {margin-top: 10px}

/* http://www.komodomedia.com/download/#social-media-mini-iconpack */
ul.social-networks {text-align: right}
ul.social-networks>li>a>img {filter:alpha(opacity=40); -moz-opacity:.40; opacity:.40}
ul.social-networks>li>a>img:hover {filter:alpha(opacity=100); -moz-opacity:1; opacity:1}

ul#image-list>li>ul.social-networks>li {display: inline; margin-right: 4px}


div#display {text-align: center}

div#content>div.navigation {clear: both; padding: 40px 10px 30px}
div#display>div.navigation {clear: both; margin: 10px 10px 20px}



div#display>ul.vote {margin: 30px 0}
div#display>ul.vote>li {display: inline; padding: 0 50px}

div#display>div.vote {margin: 30px 0}
.vote img {vertical-align: middle}
.vote span {font-size: 8px; margin-left: -2px}


div#display>div.details {width: 600px; margin: 20px auto 0}

div#display>ul.social-networks {width: 620px; margin: 10px auto 0}
div#display>ul.social-networks>li {display: inline; margin-left: 4px}



div#comments {margin: 20px auto}
div#comments>h3 {font-family: verdana, arial, sans-serif;
    font-style: italic; font-size: 2em; color: #555}

div#comments>ol>li {margin: 10px 0 0; padding: 10px 0 0; border-top: dotted #bbb 1px}
div#comments>ol>li:first-child {margin: 0}

div#comments>ol>li.disabled {background-color: #ffe0e1}
div#comments>ol>li>img, div.display-comment>img
{float: left; padding: 0 10px 10px 0}

div#comments>ol>li>div.comments {padding-bottom: 10px; min-height: 80px}

div.comment>div.manage {float: right}

div.comment>h4 {font-size: 1.5em; margin-bottom: 10px; color: #666; text-align: left}
div.comment>h4>a {color: #666; text-decoration: none}

/* Faire un style pour les admins ?
div#comments>ol>li.user>div.comment>h4>a {color: red; text-decoration: none}*/
div.comment>h4>a:hover {text-decoration: underline}

div.comment>p {text-align: justify; margin-left: 90px}

div#post {margin: 20px auto 20px; text-align: center}
div#post>h3 {margin-bottom: 20px; text-align: left; border-bottom: dotted #bbb 1px}

div#post>p {text-align: left; margin-bottom: 20px}
div#post>p>strong {color: red; text-decoration: underline}
div#post>p>em {text-decoration: underline}



form>div:first-child {display: none}
form>div#search {display: block}
form>div {clear: both; margin: 5px auto; width: 500px;}

form>div>div.labels {float: left; width: 180px; text-align: left}
form>div>div.fields {text-align: right}
form>div>div.fields>input,
form>div>div.fields>textarea,
form>div>div.fields>select,
div.details>form>select
{width: 300px; border: solid #bbb 1px; color: #888}

form>div>div.fields>input:hover,
form>div>div.fields>textarea:hover,
form>div>div.fields>select:hover,
div.details>form>select:hover
{border: solid #888 1px; background-color: #eee}

form>div>div.fields>input:focus,
form>div>div.fields>textarea:focus,
form>div>div.fields>select:focus,
div.details>form>select:focus
{border: solid #000 1px; color: #000}

form>div.buttons {margin-top: 10px; text-align: right}
form>div.buttons>input, div#manage>form>input, div.details>form>input
{background-color: #aaa; color: #fff; font-weight: bold;
    border: solid #000 1px; border-left: solid #bbb 1px; border-top: solid #bbb 1px}
form>div.buttons>input:active, div#manage>form>input:active, div.details>form>input:active
{border: solid #000 1px; border-right: solid #bbb 1px; border-bottom: solid #bbb 1px}

form>div.error>div.labels {color: red; font-weight: bold}
form>div.error>div.fields>input,
form>div.error>div.fields>textarea {border:solid red 1px}

form>ul {width: 480px; margin: 0 auto}
form>ul>li {text-align: left; color: red; font-weight: bold;
    list-style-type: disc; margin: 5px 0}



div#manage {margin: 60px auto 40px; text-align: center}
div#manage>h3 {margin-bottom: 20px; text-align: left; border-bottom: dotted #bbb 1px}
div#manage>form {margin-top: 20px}

div#footer {clear: both; width: 900px; margin: 0 auto 0; padding: 5px; text-align: right}
div#footer>a {margin: 0 5px}
div#footer>a>img {vertical-align: middle}