/*--------------------------------------------
 * Support items layout
 * 
 * Copyright (c) 2013 by Jan Van Liedekerke
 * http://www.designrequest.be
 *
--------------------------------------------*/

/*--------------------------------
 	Info & support
-------------------------------*/

#supportarea		{ position: relative; width: 100%; height: calc(100vh - 400px); margin-top: 10vh; text-align: center; }
#qform			{ display: inline-block; width: 100%; width: 540px; max-width: 80vw; }
#supportarea form p	{ text-align: right; margin-top: 4px; }
#supportarea form p a	{ margin: 0 0 0 15px; }
#pagesearch p a		{ margin: 0 15px 0 0; }

/* Searchpage */
#pagesearch		{ display: inline-block; width: 100%; max-width: 600px; }
#pagesearch #qfield	{
	width: 80%; height: 25px; font-size: 1.4em;
	background: #FFF; color: #666; padding: 8px; text-indent: 3px;
	margin: 0;
	border-radius: 3px 0 0 3px;
	border-width: 1px 0 1px 1px;
}

#pagesearch_submit	{
	float: right; margin: 0; height: 31px; position: absolute; background: #FFF;
	border-width: 1px 1px 1px 0; border-style: solid; border-color: #CCC; border-radius: 0 3px 3px 0;
}


p.num_results		{ color: #999; }

#supportarea #qfield			{
	width: 100%; margin-top: 160px; height: 25px; font-size: 1.4em;

	background-color: #FFF; color: #666; border: 0px solid #999; border-radius: 10px; padding: 8px; text-indent: 3px;
	-webkit-box-shadow: 0px 0px 25px 0px rgba(165, 165, 165, 0.7);
	-moz-box-shadow:    0px 0px 25px 0px rgba(165, 165, 165, 0.7);
	box-shadow:         0px 0px 25px 0px rgba(165, 165, 165, 0.7);
}

/* Shows loading bar and contains scripting */
#supportscript2		{
	position: absolute; width: 200px; margin-top: 15px; margin-left: -8px;
}

#supportscript2	p	{ display: inline; }



.balloon		{
	position: absolute; display: inline-block; visibility: hidden;
	min-width: 30px; min-height: 30px; line-height: 30px;
	 color: #EEE; font-size: 1.3em; padding: 8px 11px 8px 11px; text-align: center;
	/*text-shadow: 1px 1px 3px #999;*/

	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 25px 0px rgba(165, 165, 165, 0.7);
	-moz-box-shadow:    0px 0px 25px 0px rgba(165, 165, 165, 0.7);
	box-shadow:         0px 0px 25px 0px rgba(165, 165, 165, 0.7);

	cursor: pointer;
}

.page_answer		{
	font-size: 1.2em; margin: 5px 0 5px 0; padding-left: 5px; list-style: none !important;
	line-height: 30px;
}


.balloon.doc		{ background-color: #06C; }
.balloon.faq		{ background-color: #F80; }
.balloon.err		{ background-color: #C00; }
.balloon.pag		{ background-color: #0C0; }

.balloon.doc:hover	{ background-color: #06E; }
.balloon.faq:hover	{ background-color: #F90; }
.balloon.err:hover	{ background-color: #E00; }
.balloon.pag:hover	{ background-color: #0E0; }

#balloon1		{ left: 20px; top: 290px; }	/* Under 2  -  Left  */
#balloon2		{ top: 0; right: 0; }		/* Top   1  -  Right */
#balloon3		{ top: 55px; }			/* Top   2  -  Left  */
#balloon4		{ top: 350px; left: 100px; }	/* Under 3  -  Left  */
#balloon5		{ top: 240px; right: 0; }	/* Under 1  -  Right  */
#balloon6		{ top: 105px; right: 20px; }	/* Top   3  -  Right  */
#balloon7		{ top: 415px; right: 0; }	/* Top   3  -  Right - Read more balloon */

#qlog			{
	font-family: monospace; white-space: pre-wrap;	
}

#supportscript4 a	{
	line-height: 20px;
}
/*--------------------------------
 	Support image
-------------------------------*/

a.support_thumb img	{
	width: 125px; height: 60px; float: right;
	border: 1px solid #CCC;
}

div#supportDiv		{

	position: fixed; width: 100%; height: 100%;
	left: 0; top: 60px;
	text-align: center;
	background-color: transparent; border: none; z-index: 15;

}

img#supportImage	{
	border: 1px solid #666; cursor: pointer; margin-top: 20px; padding: 0;
}

/*--------------------------------
 	Support form
-------------------------------*/
#ticket_form input[name="subject"], #ticket_form textarea { font-size: 1.4em; }