/*
= design: Postcard
= created: march 2006
= author: Cameron Moll
= website: cameronmoll.com
*/

/* BASIC STYLES ------ */

body {margin:0;padding:0;font-family: Georgia, serif;font-size: medium;color: #333;background: #ECECDD url(img/8/bg_header.gif) repeat-x 0 7px;}
p {margin: 0;padding: 1em 0 0;line-height: 140%;}	
a {font-weight: bold;color: #8D0A03;text-decoration: none;}
a:hover {color: #B35410;text-decoration: underline;}

/* WRAPPERS --------------------- */
#center {float: left;width: 100%;margin-bottom: 3em;background: url(img/8/bg_content.jpg) no-repeat;}
#wrapper {margin:0;background: url(img/8/wrapper.gif) repeat-y;min-width:750px;max-width: 1400px; }

/* HEADER --------------------- */
#header {padding-left: 90px;height: 118px;background: url(img/8/header.jpg) no-repeat;}
#header #title {margin: 0;padding-top: 20px;font-size: 2em;font-weight: normal;letter-spacing: 1px;text-transform: uppercase;color: #F4F4EC;line-height:1.15em;}
#header #title a{font-weight:normal;color:#F4F4EC;}
#header #title a:hover{text-decoration:none;}
p#description {padding-top: .2em;font-size: 1.1em;color: #F4F4EC;}	

/* CONTENT --------------------- */
#blogcontent {width: calc(99% - 250px); float:left;margin-right:1%;}
.map,.tp_map {width:100%;height:250px;display:block;margin:10px 0;}
#blognav_map .map,#blognav_map .tp_map {width:100%;height:300px;margin:3px 0 5px 0;}
#blogcontent #blognav_map {width: calc(100% - 150px); margin-left:90px;}
#blognav_map .map .map {width:100% !important;}
#blogcontent #sortorder_info {background:#ececdb url(https://tp.daa.ms/img/icon_information.gif) no-repeat 3px 4px;padding:5px 5px 5px 25px;border-top:1px solid #D9D9D3;border-bottom:1px solid #D9D9D3;font-size:10px;margin:0 30px 1.5em 90px;}
#blogcontent p#tag_link_tp {margin:0 30px 1.5em 90px;}
#blogcontent .entry {margin:0 30px 1.5em 90px;}		
#blogcontent .entrytitle {margin: 0;padding: 1em 0 7px 45px;font-weight: normal;font-size:1.5em;background: url(img/8/bg_entryheading.gif) left bottom no-repeat;}
#blogcontent .entrytitle a{font-weight: normal;color:#333;}	
#blogcontent .entrytitle a:hover{text-decoration:none;}
#blogcontent .entry p.subheading {margin:1.5em 0 0;padding:0;line-height:1.15em;font-size: 1em;font-size: .95em;font-weight: normal; text-transform: uppercase;color: #70705C;}
#blogcontent .entrydetails {margin-top: .5em;padding-top: .5em;font-size: .95em;color: #70705C;border-top: 1px solid #D9D9D3;clear:both;}	
#entry_options {margin:5px 0;height:1.5em;}
.bookmarking_options {padding:4px 0;line-height:12px;margin:0;width:35%;float:left;}
.bookmarking_options img {vertical-align:middle;border:none;height:14px;width:14px;}	
.bookmarking_options a {margin-right:2px;padding:2px 4px 4px;border:1px solid #eceddd;}	
.bookmarking_options a:hover {border:1px solid #B35410;}
.entry_nav {float:right;width:65%;margin:0;padding:5px 0;line-height:12px;text-align:right;}
.entry_nav a.previous {background: url(/img/icon_previous.gif) no-repeat right;padding-right:15px;}
.entry_nav a.next {background: url(/img/icon_next.gif) no-repeat left;padding-left:15px;}
.entry_nav a.toc {background: url(/img/icon_toc.gif) no-repeat;padding-left:18px;margin-left:20px;}
.entry_nav a {font-size: .95em;}
#ads_entry {margin:0 0 0 90px;text-align:center;}
#blogcontent #contentgroupheader h1 {margin: .5em 0 .5em 90px;padding: 0;background: none;text-transform: uppercase;color: #8D0A03;}
#blogcontent #entrynavigation {margin:2em 0 0 90px;padding: 7px 0;text-align: center;font-size: .95em;color: #70705C;background: #DFDFC8;}
#blogcontent blockquote {margin: .5em 25px 0; padding: .5em 25px .5em 10px;font-size: .95em;font-style: normal;color: #70705C;border-left: 2px solid #D9D9D3;}
#blogcontent ul {margin-bottom: 0;}
#blogcontent ul li {margin-top: 6px;list-style-image: url(img/8/arrow.gif);}
.entrycontent img.photo {margin-right: 10px;padding: 5px;border: 1px solid #D9D9D3;background: #F4F4EB;max-width: 100%;}	
.othercontent {margin:0 0 0 90px;}
.othercontent h2 {font-size: 1.5em;margin: 1.5em 0 0;font-weight: normal;text-transform: uppercase;color: #70705C;}
.comment {margin-top: 1.5em;padding: 0 0 1em 1.5em;width: 75%;font-size: .95em;background: url(img/8/bg_comment.jpg) no-repeat;}
.comment p {padding-top: .7em;}
.commentdetails {color: #70705C;}
#comment_in_moderation {font-weight:bold;color:#8D0A03;padding:5px 0;}
#commentform #nonmember_details div {padding:5px 0;}
#commentform #nonmember_details div label{width:135px;float:left;}
#commentform #comment_details div:first-child > label:first-child {width:135px;float:left;}
#commentform #nonmember_details div input{width:250px;}	
#commentform #nonmember_details p.moderate_info {font-size:80%;padding:5px 0;}	
#commentform input.radio {vertical-align:middle;padding:0;margin:0 0 1px 5px;border:none !important;}	
#commentform span.clarify {font-size:70%;margin-left:4px;}
input#ff_notify, input#ff_rememberme {vertical-align:middle;margin-bottom:5px;}
textarea#ff_comment {padding:5px;}
input#comment_count {border:none;background:#ececdd;}
#commentform {margin-top: .5em;padding-top: 1em;border-top: 1px solid #D9D9D3;}
#loginform {margin-top: 1em;padding: 0 20px 20px;width: 50%;background: #DFDFC8;}
#searchform {margin-top: 20px;}
.floatleft {margin-right:10px;}
.floatright {margin-left:10px;}
#fb-root {clear:both;}

/* SIDEBAR --------------------- */
#navigation {position:relative;float:left;margin:0 0 20px 0;width: 250px;font-size: .95em;background: url(img/8/bg_sidebar.jpg) left top repeat-y;}
#nav_wrapper {padding: 5px 0 0 20px;background: url(img/8/sidebar-top.jpg) no-repeat;}
#navigation a {font-weight: normal;}
#navigation h3 {margin: 0;padding-top: 2em;font-size: .95em;font-weight: normal; text-transform: uppercase;color: #70705C;}
#navigation form {margin: .5em 0 0;padding: 5px 0;width: 193px;text-align: center;border-top: 1px solid #D9D9D3;border-bottom: 1px solid #D9D9D3;background: #ECECDB;}
#navigation ul {margin: .5em 0;padding-left: 22px;width: 170px;list-style: none;}	
#navigation ul li {margin-top: 6px;list-style-image: url(img/8/arrow.gif);}
#navigation #changestyles, #navigation #navbottom {margin-left: -20px;padding: 0 0 35px 20px;background: url(img/8/sidebar-bottom.jpg) 1px bottom no-repeat;}
#navigation #authorprofile, #navigation #photography {width: 193px;}
#navigation #authorprofile img, #navigation #photography img {margin-right: 5px;padding: 2px;border: 1px solid #D9D9D3;background: #F4F4EB;}
#navigation #profilephoto {margin-top:1em;}
#ads_nav {padding-top: 1.5em;width:180px;}
#tag_cloud ul {padding:0;}
#tag_cloud li {display:inline-block;margin:0 5px 0 0;}
#tag_cloud li.activity_level_1 {font-size:100%;}
#tag_cloud li.activity_level_2 {font-size:120%;}
#tag_cloud li.activity_level_3 {font-size:140%;}
#tag_cloud li.activity_level_4 {font-size:160%;}
.social_links a {display:inline-block;width:22px;height:22px;background:url(/img/social_icons_sprite.png) no-repeat 0 0 !important;border:0 !important;}
.social_links a span {display:none;}
a.twitter_link {background-position:0 -60px !important;}
a.googleplus_link {background-position:0 -30px !important;}

/* TABLES --------------------- */
table {margin:1em 0;width:100%;border-collapse:collapse;border:0;}
table th {background:#f4f4ec;padding:0.5em;font-size: .95em;font-weight: normal; text-transform: uppercase;color: #70705C;text-align:left;}
table td {padding:.5em;border:0;border-bottom:1px solid #D9D9D3;overflow:auto;}

/* FOOTER --------------------- */
#footer {clear: both;margin: 1em 90px 0;padding-bottom: 2em;font-size: .95em;color: #70705C;border-top: 3px double #D9D9D3;}	
#footer .tp_plug {margin:0;padding:0 0 .5em;list-style:none;}
#footer .tp_plug li {margin:0 .5em 0 0;display:inline;}
#footer p#copyright_notice {font-size:10px;padding-top:0;}

/* IE6 Hacks */
* html #ads_entry {position:absolute;margin:0;}
* html .othercontent {margin:90px 0 0 90px;}

/* TP Link block */
.tp_ad {padding:10px 0 20px;}
#ads_entry h4, #ads_entry p {margin:0;line-height:0.8em;}

.fb_like {
margin:10px 0;
}

/* The Travellerspoint bar at the top of the blog */
#brand_line {
height: 40px;
background: #E9E9DA;
border-bottom: 1px solid #333;
font-family:"Lucida Grande",Verdana,sans-serif;
font-size:12px;
margin:0;
padding:0;
}
#brand_line a {
color: #444;
font-weight:normal;
text-decoration:none;
}
#tp_branding {
position: absolute;
left: 20px;
top: 4px;
padding: 8px 0 10px 160px;
background: url(https://tp.daa.ms/img/blog_branding_logo_dark.png) no-repeat;
}
#tp_branding:hover {
margin: 0;
}
#user_links {
position: absolute;
right: 20px;
top: 0;
margin:0;
padding-top:11px;
font-family:"Lucida Grande",Verdana,sans-serif;
}
#user_links a {
margin: 0 0 0 10px;
padding: 0 8px;
}
#brand_line a:hover {
color: #8D0A03;
}
p.remove_ads {
  font-style: italic;
  font-size: 90%;
  width: 170px;
}

/* The default responsive design of the postcard template has large images scaling along with the available space, and getting smaller for screen sizes between 800px and ~1350px. The above changes reduces this effect to screen sizes between 800px and ~1185px. We're going to add proper responsive styling for screen sizes smaller than 800px, but you could change the "800px" to "1185px" (or anything in between) if you care about visitors always getting the largest possible image size for their screen. */
@media only screen and (max-width: 800px) {
  /* Make the blog always scale along with the screen size. */
  #wrapper { min-width: auto; }
  /* Make the blog content take up all available space. */
  #blogcontent { width: 100%; } 
  /* And push the navigation column below it all. */
  #navigation { clear: left; }
  
  /* The default styling of the navigation column relies on fixed width images, which only works as a narrow column - that's not very useful here underneath the main content, so we remove all background-images, and style it ourselves. */
  #navigation, #nav_wrapper, #navigation #changestyles, #navigation #navbottom { background-image: none; }
  #navigation { width: auto; margin: 20px 30px 0 90px; background-color: #f4f4ec; border-radius: 4px; border: 1px solid #d9d9d3; }
  /* Next, we lay out all content of the navigation column in useful blocks, next to each other where possible. */
  #nav_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }
  #nav_wrapper > * { min-width: 220px; }

  /* Finally we fix the brand line at the very top of the blog to also be responsive. */
  #brand_line { width: auto; height: auto; overflow: hidden; padding-bottom: 8px; }
  #tp_branding, #user_links { position: relative; }
  #tp_branding { float: left; padding: 8px 40px 16px 160px; }
  #user_links { float: right; }
}

/* On very small screens, the text runs out of the red bar of the header. Since that's a background image, we reduce the text size. */
@media only screen and (max-width: 600px) {
  #header #title { font-size: 1.2em; }
}