/* Style sheet for www.deskproto.com */
/* copyright (c) Delft Spline Systems, NL, 2014. */
/* This stylesheet is called ONLY for the Deskproto forum pages */
/* This stylesheet is called ONLY for screens below 600 px. */
/* consider any screen below 600 to be a mobile phone, as "media handheld" is not supported by many phones */


/* Strip padding, margin and border from all table tags */
TABLE, TD, TR
{
	margin: 0;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}


/* format the forum menu, displayed in the aside area */
#forum-menu {
	position: absolute;
	top: 150px;
	width: 100%;
	left: 0;
	right: 0;
}
@media all and (max-width: 430px) {
	#forum-menu  {
		top: 115px;
		/* force two lines of two menu options each */
		width: 250px;
	}
	/* On small screens the forum menu will be in two lines */
	/* In that case override this setting from style-mobile.css */
	p.navigation-path {
		visibility: hidden;
	}
}
#above-menu {
	position: relative;
	height: 20px;
	}
#forum-menu p.forum-menu-title {
	position: absolute;
	z-index: 3; /* Z-index only works when 'position' is present */
	visibility: visible;
	color: #6C6C6C; 
	text-align: left;
	padding: 0px 0px 3px 20px; /* padding top-right-bot-left */
	margin: 0;
}
#forum-menu ul {
	font-size: 14px;
	margin: 0;
	padding: 0;
}
#forum-menu a {
	display: inline-block;
	position: relative;
	z-index: 3; /* Z-index only works when 'position' is present */
	text-decoration: none;
	text-align: center;
	padding: 6px 0px 4px 0px; /* padding top-right-bot-left */
	line-height: 200%;
	background: #034EA2; /* color of the main menu blocks non-hovered: dark blue*/
	color: #FEFFFF; /* text in the main menu blocks */
	white-space: nowrap;
	height: 25px; /* Width and height of top-level nav items */
	width: 100px; /* this is excl the padding pixels */
	border-radius: 2px 2px 2px 2px; /* top-left, top-right, bottom-right, bottom-left */
}
#forum-menu ul li {
	display: inline-block;
	margin-left: -4px; /* this will remove the empty space between the inline menu blocks */
	width: 100px;
}
#forum-menu ul li:hover, #forum-menu ul li:hover a {
	background: #FEEE1A; /* hovering on link: yellow */
	color: #034EA2; /* text hovering on link: dark blue  */
}
#forum-menu ul li a:hover {
	background: #FEEE1A; /* hovering on link: yellow */
	color: #034EA2; /* text hovering on link: dark blue  */
}



/* TABLE Forum top bar (status bar on top of each forum page) contains ForumHead and NoteArea */
TABLE.forumtopbar
{
	width: 100%;
	margin: 0;
	padding: 0;
}
TD.wide15percent {
	width: 15%;
	padding: 0px 2px 0px 5px;
}
TD.wide20percent {
	width: 20%;
	padding: 0px 2px 0px 5px;
}
TD.wide80percent {
	width: 80%;
	padding: 0px 2px 0px 5px;
}

/* TABLE ForumHead contains forum navigation */
/* Inside are called classes forumHeadLabel, forumHeadText and forumHeaderCell */
TABLE.forumhead
{
	vertical-align: top;
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	background-color: #DDEEFF;
	width: 100%;
	/*height: 64px;*/
	margin: 0; 
	padding: 3px 0px 3px 0px;
	display: inline-block;

}
TD.forumHeadLabel  /* also used in forumheadsearch */
{
	padding: 0px 10px 0px 5px; /* padding top-right-bot-left */
	/*width: 50%;*/  /* width inside the forumhead area */
	display: inline-block;
}
TD.forumHeadText
{
	padding: 0px 2px 0px 5px;
	/*width: 50%;*/
	/* April 15: for mobile these links need to be large to allow selecting */
	font-size: 150%;
	/*text-align: right;*/
	display: inline-block;
}
DIV.forumheadercell
{
	overflow: hidden;
	text-overflow: ellipsis; /* Render an ellipsis ("...") to represent clipped text */
	/*text-align: right;*/
}


/* TABLE NoteArea contains forum status */
/* Inside are called classes NoteLabel, NoteField and NoteFieldCell */
TABLE.noteArea
{
	vertical-align: top;
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	background-color: #DDEEFF;
	width: 100%;
	/*height: 64px;*/
	margin: 0; 
	padding: 3px 0px 3px 0px;
	/*text-align: right;*/
	display: inline-block;
}
TD.notelabel
{
	/*width: 70%;*/
	padding: 2px 10px 2px 5px; /* padding top-right-bot-left */
	/*font-size: 8pt;*/
	display: inline-block;
}
TD.notefield
{
	/*width: 30%;*/
	padding: 2px 5px 2px 2px;
	/*font-size: 8pt;*/
	/*font-weight: bold;*/
	text-align: right;
	display: inline-block;
}
div.notefieldcell
{
	/*font-size: 8pt;*/
	font-weight: bold;
	overflow-x: hidden;
	text-overflow: ellipsis;
	text-align: right;
}


/* TABLE ForumGrid contains the list of threads */
/* Inside are called TD classes forumIcon, forumTopic, forumReplyCount, forumViewCount and forumLastPost */
/* In forumTopic and forumLastPost a DIV with the same name is present */
TABLE.forum_grid
{
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	background-color: #DDEEFF;
	width: 100%;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}
TABLE.forum_grid TD
{
	vertical-align: top;
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	margin: 0;
	padding: 4px;
}
TABLE.forum_grid TH
{
	display: none; /* hide the headers in mobile view: now shown by before: entries in each field. */
}
TABLE.forum_grid  a:link
{
	text-decoration: none;
	font-weight: bold;
	/* color does not work here: overruled by the main CSS: content a:link */
}
TD.forumIcon
{
	display: none; /* do not display in mobile version */
	/*width: 7%;*/
	/*text-align: center;*/
}
TD.forumTopic
{
	/*width: 55%;*/
}
TD.forumTopic:before { 
	content: "Thread title: ";
	padding-right: 10px;
}
TD.forumReplyCount
{
	/*width: 9%;*/
	/*text-align: center;*/
	/*max-width: 25px;/*  /* max 25 pixels wide also when the contents are wider */
	overflow-x: hidden;
}
TD.forumReplyCount:before { 
	content: "Replies: ";
	padding-right: 10px;
}
TD.forumViewCount
{
	/*width: 9%;*/
	/*text-align: center;*/
	/*max-width: 25px;/* /* max 25 pixels wide also when the contents are wider */
	overflow-x: hidden;
}
TD.forumViewCount:before { 
	content: "Views: ";
	padding-right: 10px;
}
TD.forumLastPost
{
	/*width: 20%;*/
	/*max-width: 50px;/* /* max 50 pixels wide also when the contents are wider */
	overflow-x: hidden;
}
TD.forumLastPost:before { 
	content: "Last Post: ";
	padding-right: 10px;
}
TD.forumEmptyLine
{
	background-color: #EEEEEE;
}
div.forumTopic
{
	/*width: 100%;*/
	overflow-x: hidden;
	word-wrap: break-word;
}
div.forumLastPost
{
	/*width: 100%;*/
	/*overflow-x: hidden;*/
}


/* TABLE ForumBottomBar contains the forum navigation buttons */
/* Inside are several navigation buttons. */
TABLE.forumBottomBar
{
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	background-color: #DDEEFF;
	width: 100%;
	margin: 0;
	padding: 0; 
}
TABLE.forumBottomBar TD
{
	vertical-align: center;
	padding: 4px; 
	width: 15%;
	text-align: center;  /* center the button in the column width */
	/* reset the display property to get the buttons next to one another */
	display: inline-block;
}



/* TABLE ForumInputForm contains the forum input forms, used in Login, Register, account, addreply, search, newtopic */
/* Inside are called TD classes ... */
TABLE.forumInputForm
{
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	background-color: #DDEEFF;
	width: 100%;
	margin: 0;
	padding: 0; 
}
TABLE.forumInputForm TD
{
	vertical-align: center;
	padding: 4px; 
}
/* table cell within a form containing a label */
TD.formlabel
{
	width: 20%;
	height: 22px;
	padding: 3px 10px 0px 1px;
	text-align: right;
	vertical-align: text-top;
	border-top: 1px dashed white;
}
TD.formfootnote
{
	width: 20%;
	padding: 3px 10px 0px 1px;
	text-align: right;
}
/* table cell containing submit button */
TD.formsubmit
{
	padding: 1px 10px 1px 1px;
	text-align: right;
}

FORM
{
	display: inline;
}
/* Input field in input form */
INPUT.button
{
	width: 50px; /* 6 dec 14 for mobile 50x50 instead of 100x30 */
	height: 50px;
	white-space: normal; /* allow text warp on this small button */
	text-align: center;
	padding: 5px 0px 5px 0px; /* padding top-right-bot-left */
	}
INPUT.formedit
{
	width: 99%;  /* this will match the width of the select field at 100% */
	text-align: left;
}
/* Text field (for comments) in input form */
textarea
{
	font-size: 10pt;
	width: 98.5%;  /* this will match the width of the select field at 100% */
	height: 160px;
}
/* Select field (drop-down list with countries)) in input form */
SELECT.formedit
{
	width: 100%;
}







TABLE.forumheadsearch
{
	border-style: solid;
	border-color: #0099FF;
	border-width: 1px;
	background-color: #DDDDDD; /* light grey */
	width: 100%;
}

TD.forumHeadTextSearch
{
	vertical-align: top;
	padding: 3px 2px 2px 5px;   /* padding top-right-bot-left */
	width: 70%;
}




TD.forumSubject
{
	/*width: 50%;*/
}
TD.forumSubject:before { 
	content: "Forum title:";
	padding-right: 10px;
}

TD.forumTopicCount
{
	/*width: 50px;*/  /* This will make TopicCount and PostCount equally wide, if needed they will shrink anyway */
	/*text-align: center;*/
}
TD.forumTopicCount:before { 
	content: "Threads:";
	padding-right: 10px;
}

TD.forumPostCount
{
	/*width: 50px;*/
	/*text-align: center;*/
}
TD.forumPostCount:before { 
	content: "Posts:";
	padding-right: 10px;
}

TD.forumID
{
	background-color: #EEEEEE; /* same color as main screen background (very light grey) */
}

TD.forumAuthorInfo
{
	/*width: 15%;*/
}

div.forumAuthorInfo
{
	width: 100%;
	overflow-x: hidden;
	word-wrap: break-word;
}

TD.forumPostText
{
	/*width: 100%;*/
}
div.forumPostText
{
	font-size: 10pt;
	color: #033C7D;
	width: 90%;
	overflow-x: hidden;
	word-wrap: break-word;
	text-overflow: ellipsis;
}
.forumPostText img  /* experiment, after removing width from IMG in database */
{
	width: 100%;  /* deze alleen in de mobiele versie */
			/* nadeel is dat kleinere plaatjes nu ook 100% worden. */
			/* Echter: max-width werkt hier niet de breedte van een kolom past zich aan aan de inhoud */
	max-width: 480px;
}

div.quotedText
{
	font-size: 10pt;
	font-style: italic;
	color: #033C7D;
	border: 1px solid white;
	width: 80%;
	padding: 5px;
	margin: 10px;
	overflow-x: hidden;
	word-wrap: break-word;
	text-overflow: ellipsis;
}

.centered-text
{
	text-align: center;
}


/* same as formlabel, but not in a form */
TD.displaylabel
{
	width: 20%;
	padding: 3px 10px 0px 1px;
	text-align: right;
	border-top: 1px dashed white;
}

TD.displayfield
{
	padding: 4px 0px 0px 4px;
	text-align: left;
}