/**
	CAUTION: do not modify this page unless you have at least a general idea of how CSS works.

	CSS (Cascading StyleSheets) allow you to specify all sorts of visual formatting details to do with
	the items on the HTML pages you see on the site.

	If you want to retouch the colours of the site, this is the place. To try out different colours, visit:
	http://www.w3schools.com/TAGS/ref_colornames.asp
*/


/** Universal text styling */
body, a, input.link_button {
	color:#000000;
	font-decoration:none;
}

/** Colours for basic formatting e.g. the topbar and backgrounds */
div#header {
	border-top: 4px solid #b36c00;
	border-bottom: 5px solid #b36c00;
}
div#partition {
	background-color: #b35e00;
}
div#main_page {
	background-color:#ffffff;
	font-size:125%;
	line-height:160%;
}
div#leftbar, div#rightbar, div#topbar {
	background-color: #393939;
	color:white;
}
div#header {
    background-color:white;
}
div#footer, div#footer a {
	color:white;
}
body, div#left_background, div#right_background {
	background-color: #929292;
}
div#title {
	background-color:#ffffff;
}
/*
div#left_background {
	background-image:url('processing/img/background.jpg');
}
div#right_background {
	background-image:url('processing/img/background.jpg');
}*/

/** Slightly more specific text styling */
h1, h2, h3 {
	margin-bottom:2px;
}
h3 {
	font-style:italic;
	font-weight:normal;
}
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:10pt;
}

/** Page width and sizes of specific features */
div#full_page {
	max-width:970px;
}
div#left_background, div#right_background {
    width: calc((100% - 970px) / 2);
}

div#topbuttons {
	background-color: #393939;
}

div#topbuttons div {
	margin-top:12px;
	text-align:center;

}

div#topbuttons div a {
	color:white;
	font-size:12pt;
	font-weight:bold;
	text-decoration:none;
}

/** Title bar, i.e. the main (wide) site name */
div#title {
}
div#title img#logo {
}
div#title img#name {
}

/** More details for the top and side bars */
div#partition {
	display:none;
	height:5px;
	/* background-image:url(images/bg_topbutton.jpg); */
}

div#leftbar, div#rightbar {
	padding:1% 0.7% 1% 0.7%;
	position:relative;
	top:-5px;
	border-left: 4px solid #b36c00;
	border-right: 4px solid #b36c00;
	border-bottom: 4px solid #b36c00;
}
div#leftbar {
	width:16%;
	min-width:120px;
	margin-right:1%;
}
div#rightbar {
	width:17%;
	min-width:120px;
}
div#topbar {
	text-align:center;
	font-style:italic;
	padding:0.2% 0 0.2% 0;
	border-bottom: 5px solid #b36c00;
}

div#content {
}
div#content img:not(.photo_thumbnail img) {
	padding-top:10px;
}

li ul {
	margin:0px;
}

div.caption {
	text-align:center;
	font-style:italic;
	padding-top:3px;
}

/** Photos page details */
div.limited_thumbnails_edge {
	/** This is the fade-out overlay on the no-album-selected Photos page. */
	background-image:url(processing/img/fade_ffffff.png);
	width:50%;
}
.photo_thumbnail, div.limited_thumbnails {
	height:75px;
}

div.photo_thumbnail {
	margin-right:3px;
	margin-bottom:3px;
}
span.no_can_do {
	/* Used for e.g. the Photos page faded Next "links" */
	color:lightgrey;
}

/** martinmccaffery.net specific extra rules. */
img.thumb_img {
	float:left;
	margin:5px 5px 0px 5px;
	max-height:200px;
	max-width:150px;
}
img.thumb_img_large {
    width:129px;
}
img.thumb_img_small {
    max-width:120px;
    max-height:85px;
}
div.thumb_clear {
	clear:both;
}

/** MOBILE AND OTHER SMALL DEVICE RULES */
@media (max-device-width:1024px) {
    body {
        /** Fonts should be bigger on mobile devices only, but not on resized monitors. */
        font-size:175%;
    }
}
@media (max-device-width:1024px), (max-width:768px) {
    div#topbuttons div a {
        font-size:125%;
    }
    div#topbuttons div {
        padding:3px;
    }
    div#title {
    }
    div#title img#logo {
    }
    div#footer {
        height:inherit;
    }
    
    /* Site-specific stuff for martinmccaffery.net */
    img.thumb_img {
	    max-width:40%;
	    max-height:none;
    }
    img.thumb_img_large {
        width:34%;
    }
    img.thumb_img_small {
        width:20%;
        max-height:none;
    }
}