body {background:#111;color:#555;margin:0;font-size:0.8em;font-family:Arial, sans-serif;margin:.5em;}

.padding {padding:1em;}

#menu {width:100%;text-align:center;border-bottom:1px solid #333;border-top:1px solid #333;color:white;}
#copyright {width:100%;text-align:center;border-bottom:1px solid #333;border-top:1px solid #333;}

.droplist {}
.droplist li {background:#333;line-height:2em;text-align:left;padding:0;border-bottom:1px solid #444;}
.droplist > ul {margin:0;padding:0;width:100%;}
.droplist > ul > li {background:#333;width:100%;position:relative;float:left;list-style:none;margin:0;padding:0;border:none;}
.droplist > ul > li > a {color:#666;text-decoration:none;padding:.5em;display:block;}
.droplist ul ul {display:none;margin:0;padding:0;position:absolute;top:3em;left:0;z-index:999;width:100%;max-height:15em;overflow:auto;border-top:1px solid #555;}
.droplist ul ul li a {display:block;padding:.5em;text-decoration:none;color:#999;}
.droplist span {color:#ccc;}
/*
can add this to list items to make sure they dont get too long if needed
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
*/

h1 {border-bottom:1px solid #333;border-top:1px solid #333;color:#ccc;padding:.5em 0;margin:0;text-align:center;font:2em georgia,serif;}
h2 {color:#888;text-align:center;}
p {line-height:1.7em;}
a img {border:none;}
a {color:#28a;}

.input {border:1px solid #333;padding:.5em;background:#111;width:80%;max-width:400px;color:#eee;}
.flatbutton {background:#333;color:#777;padding:.5em 2em;text-decoration:none;}
.flatbutton:hover {background:#444;}

.comment {background:#171717;color:#444;padding:1em;margin-bottom:1em;}
h5 {font-size:1em;margin-bottom:.5em;}
.comment small {color:#333;}
.admin {color:#28a;background:#171722;}
.admin small {color:#168;}

#tabs {margin:0;padding:0;list-style:none;text-align:center;}
#tabs li {display:inline-block;}
#tabs li a {text-decoration:none;color:#555;padding:0;margin:.5em 1em;white-space:nowrap;line-height:1.7em;}
#tabs li a:hover {text-decoration:underline;}
#tabs li a.active {color:white;text-decoration:none;}

h4 {clear:both;font-size:1.2em;color:#555;margin-bottom:.5em;margin-top:0;border-bottom:1px solid #333;border-top:1px solid #333;padding:.2em 0;text-align:center;}
.list {margin:0;padding:0;list-style:none;margin:1em 0;margin-bottom:2em;}
.list li {display:block;margin:0;padding:0;line-height:1.7em;}
.list li a {padding:0.5em 0;text-decoration:none;color:#555;}
.list li a:hover {text-decoration:underline;}
.list li a.active {color:#fff;text-decoration:none;}

.container {width:100%;max-width:960px;margin:0 auto;}
.header img {max-width:100%;height:auto;}

.thumbnails {width:100%;margin-top:.5em;}
.thumb {float:left;width:18%;margin-right:2.5%;margin-bottom:2.5%;}
.thumb img {width:100%;height:auto;}
.thumbnails:after {clear:both;}

.largethumb {text-align:left;display:inline-block;width:auto;max-width:100%;}
.largethumb img {max-width:100%;height:auto;text-align:center;}

.postphoto {float:right;max-width:50%;max-height:10%;margin-left:2em;margin-bottom:2em;text-align:left;}
.postphoto img {max-width:100%;max-height:400px;height:auto;border:none;}
.postphoto p {font-size:.8em;color:#444;}
.postphoto b {color:#666;}

p.exif {text-align:left;}
p.exif span {clear:both;color:#777;line-height:1.7em;}
a.location {color:#555;text-decoration:none;}
a:hover.location {text-decoration:underline;}

.minithumbnails {width:100%;}
.minithumbnails:after {clear:both;}
.minithumb {float:left;width:8%;margin-right:2%;margin-bottom:2%;}
.minithumb img {width:100%;height:auto;}

.footer {margin-bottom:2em;margin-top:2em;}

#banner {clear:both;width:100%;text-align:center;}
#banner img {width:100%;height:auto;margin:2em 0;}

.left {text-align:left;float:left;width:26%;margin-right:4%;}
.right {text-align:left;float:left;width:70%;margin-right:0;}
.right {width:100%;}
.photos > div:nth-child(5n+5) {margin-right:0;}
.miniphotos > div:nth-child(10n+10) {margin-right:0;}

.multiline {width:90%;max-width:800px;height:150px;background:#111;border:1px solid #333;color:#ccc;font:1em arial,sans-serif;padding:.5em;}

#AlbumMenu,#ArchiveMenu,#LocationMenu,#PeopleMenu,#RatingMenu,#PostMenu,#JournalMenu,#PlaceMenu {background:#111;padding:.2em;color:#555;border:1px solid #333;width:100%;margin-top:.5em;}
.menubox {float:left;width:23.5%;margin-right:2%;}
#secondarynav {margin-top:2em;}
#secondarynav div:nth-child(4n+4) {margin-right:0;}
.jbox {float:left;width:49%;margin-right:2%;}
#journalnav {margin-top:2em;}
#journalnav div:nth-child(2n+2) {margin-right:0;}

@media screen and (max-width:960px) {
    .container {max-width:768px;}
    .minithumb {float:left;width:10%;margin-right:2%;margin-bottom:2%;}
    .miniphotos > div:nth-child(10n+10) {margin-right:2%;}
    .miniphotos > div:nth-child(8n+8) {margin-right:0;}
}

@media screen and (max-width:768px) {
    .container {max-width:480px;}
    .photos > div:nth-child(5n+5) {margin-right:4%;}
    .photos > div:nth-child(4n+4) {margin-right:0;}
    .thumb {width:22%;margin-right:4%;margin-bottom:4%;}
    .left {float:none;width:100%;margin-right:0;text-align:center;}
    .right {float:none;width:100%;margin-right:0;}

    .list li {margin-right:.5em;white-space:nowrap;display:inline-block;}
    .list li a {white-space:nowrap;}
    .list li:after {content:", "; color:#555; } 
    .list li:last-child:after { content: ""; }

    .postphoto {max-width:40%;max-height:8%;margin-left:1em;margin-bottom:1em;}
    .postphoto img {max-height:300px;}
    
    #secondarynav div:nth-child(4n+4) {margin-right:2%;}
    #secondarynav div:nth-child(2n+2) {margin-right:0;}
    #secondarynav div:nth-child(3) {margin-top:2em;}
    #secondarynav div:nth-child(4) {margin-top:2em;}
    .menubox {width:49%;margin-right:2%;}
    
}

@media screen and (max-width:480px) 
{
    
    .container {max-width:320px;}
    #banner {display:none;}
    .left > h4 {border-top:none;}
    .minithumb {float:left;width:22%;margin-right:4%;margin-bottom:4%;}
    .miniphotos > div:nth-child(10n+10) {margin-right:4%;}
    .miniphotos > div:nth-child(8n+8) {margin-right:4%;}
    .miniphotos > div:nth-child(4n+4) {margin-right:0;}
    .postphoto {float:none;max-width:100%;max-height:100%;margin:0;}
    .postphoto img {max-width:100%;max-height:100%;height:auto;}

    .thumb {width:32%;margin-right:2%;margin-bottom:2%;}
    .photos > div:nth-child(5n+5) {margin-right:2%;}
    .photos > div:nth-child(4n+4) {margin-right:2%;}
    .photos > div:nth-child(3n+3) {margin-right:0;}

    #secondarynav div:nth-child(1) {margin-top:0;margin-right:0;}
    #secondarynav div:nth-child(2) {margin-top:1em;margin-right:0;}
    #secondarynav div:nth-child(3) {margin-top:1em;margin-right:0;}
    #secondarynav div:nth-child(4) {margin-top:1em;margin-right:0;}
    .menubox {width:100%;margin-right:0;}

    .jbox {width:100%;margin-right:0;}
    #journalnav {margin-top:2em;padding-bottom:5em;}
    #journalnav div:nth-child(1) {margin-right:0;margin-top:0;}
    #journalnav div:nth-child(2) {margin-right:0;margin-top:1em;}
}

@media screen and (max-width:320px) {
    .container {max-width:240px;}
    #tabs li a {padding:0;margin:.5em;}

    .thumb {width:49%;margin-right:2%;margin-bottom:2%;}
    .photos > div:nth-child(3n+3) {margin-right:2%;}
    .photos > div:nth-child(2n+2) {margin-right:0;}

}