/**
	CAUTION: this file contains CSS which governs the basic functioning of much of the website.
	It is strongly advised not to alter its contents.
	To apply cosmetic choices to specific aspects of the site, user_style.css is recommended.
*/


/** Global basics **/
img {
	max-width:100%;
}

body {
	font-family:Arial;
	font-size:12pt;
}
div#full_page {
	margin-left:auto;
	margin-right:auto;
}

/** Header */
div#title {
	text-align:center;
	height:120px;
}
div#title img#name {
	position:relative;
	top:35px;
	height:65px;
}
div#title img#logo {
	float:left;
	position:relative;
	left:50px;
	height:100%;
	margin-right:50px;
}

/** Background & macro page formatting **/
div#title, div#topbuttons div {
	overflow:hidden;
}
div#title img {
	max-height:100%;
}

div#left_background, div#right_background {
	position:fixed;
	max-width:100%;
	background-size:auto 100%;
	height:100%;
	z-index:-1;
	background-repeat:no-repeat;
}
div#left_background {
	left:0px;
}
div#right_background {
	right:0px;
	background-position:right;
}

div#topbuttons {
	height:42px;
}
div#topbuttons div {
	float:left;
}

div#main_page {
	padding:0% 0.7% 1% 0.7%;
}

div#leftbar {
	float:left;
}
div#rightbar {
	float:right;
}
div#topbar {
	width:100%;
}

div#content {
	overflow:hidden;
	background-size:contain;
	background-repeat:no-repeat;
}

/** Photos **/
div.photo {
	clear:both;
}	
div.photo_thumbnail, div.photo {
	min-height:25px;
	position:relative;
	float:left;
}
div.photo_thumbnail img, div.photo_thumbnail a {
	max-height:100%;
}
div.photo_thumbnail form, div.photo form {
	position:absolute;
	right:2px;
	top:2px;
	z-index: 5;
}

/** Photo thumbnails **/
div.limited_thumbnails {
	position:relative;
	white-space:nowrap;
	overflow:hidden;
}
div.limited_thumbnails_line {
	width:150%;
	height:100%;
}
div.limited_thumbnails_edge {
	position:absolute;
	right:0px;
	height:100%;
	pointer-events:none;
	background-size:100%;
}

/** Footer **/
div#footer {
	text-align:center;
	clear:both;
	width:100%;
	padding-top:3px;
	height:20px;
	padding-bottom:3px;
}

/** Admin page **/
textarea.admin_panel {
	width:100%;
	height:900px;
}

div#admin_action_choice {
	border:1px dashed;
	padding:1px;
	width:100%;
	position:relative;
}
div#admin_action_choice h3{
	margin-top:0px;
}
form#admin_login, div#admin_action_choice, div.success, div.error, div.information {
	clear:both;
}
div#admin_action_choice div.information {
	font-style:italic;
}
div#admin_action_choice h3 {
	font-size:105%;
}
div#admin_action_choice form {
	float:left;
	width:33.3%;
	margin-bottom:1px;
}
h1#admin_header {
	float:left;
}
div#admin_logout {
	float:right;
	position:relative;
	top:9px;
}

/** Note: these two rules basically contain a hack for getting the information texts aligned to the bottom of the container divs.
	Because they use absolute positioning (for 2 of the 3 forms), they'll totally mess up if the forms are ever arrayed one after the other, like for a mobile device.

	In that case, simply delete the rules (and optionally the divs on admin.php which invoke them) and the text will jump back to immediately below the forms. */
div#admin_action_choice div.admin_wrapper div.information {
	position:absolute;
	bottom:2px;
}
div#admin_action_choice {
	width:946px;
}

form.admin_page_choice {
}
form.admin_new_image {
}
form.admin_new_page {
}
form.admin_file_edit {
	clear:both;
}

h1 form, h2 form, h3 form {
	display:inline;
}

input.link_button, a {
	background: none;
	border: none;
	font-size:100%;
	text-decoration: underline;
	cursor: pointer; 
}

textarea.admin_input {
	width:100%;
	position:relative;
	top:3px;
	margin-bottom:6px;
	height:100px;
}
input.admin_input {
	width:30%;
}
form.admin_input {
	display:inline;
}

/** TODO do these do anything? */
table#photos input, table#photos textarea {
	width:500px;
}
table#photos textarea {
	height:100px;
}

td textarea, td input {
	width:100%;
}

div.error, div.success {
	width:100%;
	padding:5px 0px 5px 4px;
}
div.error {
	background-color:red;
}
div.success {
	background-color:green;
}
div.error a, div.success a {
	text-decoration:none;
	font-weight:bold;
}
.clear {
	clear:both;
}


div#admin_action_choice form {
	height:160px;
	width:33%;
}
div#admin_action_choice form.admin_choice_hidden {
	visibility:hidden;
}
div#admin_action_choice form div.information {
	position:absolute;
	bottom:0px;
}

/** MOBILE AND OTHER SMALL DEVICE RULES
These rules will override the above. */
@media (max-device-width:1024px), (max-width:768px) {
    div#topbuttons {
        height:auto;
        float:right;
        width:40%;
    }
    div#topbuttons div {
        width:100%;
    }
    div#title {
        float:left;
        width:60%;
        position:absolute;
        overflow:hidden;
    }
    div#header {
        overflow:hidden;
        position:relative;
    }
    img#name {
        display:none;
    }
    div#title {
        height:100%;
    }
    div#title img#logo {
        float:none;
        left:auto;
        margin-right:auto;
    }
}
@media (max-width:1024px) {
    /** Admin page stuff */
    div#admin_action_choice {
        width:99.5%;
    }
    div#admin_action_choice form, div#admin_action_choice {
        border:1px dashed;
    }
    div#admin_action_choice form:first-child {
        border-top:none;
    }
    div#admin_action_choice form {
        width:100%;
        height:inherit;
    }
    div#admin_action_choice form div.information {
        position:relative;
        bottom:0px;
    }
    div#admin_action_choice form.admin_choice_hidden {
        display:none;
    }
    div#admin_action_choice form {
        border-bottom:none;
        border-left:none;
        border-right:none;
    }
}
@media (max-device-width:1024px) {

    /* Small devices need thicker borders in order for them to be seen. */
    div#admin_action_choice form, div#admin_action_choice {
        border:3px dashed;
    }
    /* A little space for scrolling with a finger, assuming a touchscreen. */
    textarea.admin_panel {
        height:2500px;
        width:90%;
    }
}
@media (max-width:1024px) {
    /* We only want inter-form admin-choice separators for small screens. */
    div#admin_action_choice form {
        border-bottom:none;
    }
    div#admin_action_choice form, div#admin_action_choice {
        border-left:none;
        border-right:none;
    }
}