/*
main.css
Place only layout construction blocks here, you can set your
other settings in text.css, form.css or special_effects.css files.
*/

.cleared { clear: both; line-height: 0; height: 0; }

html,
body
{
	/* Make sure the document fills the whole browser window */
	width: 100%; height: 100%;
	margin: 0; padding: 0; border: 0;
}

body
{
	/* Add layout elements to document background here */
	background: #fff url(../images/bg_document.jpg) repeat-x;
	text-align: center;
}

#canvas
{
	/* This is the base for the actual page elements */
	position: relative;
	width: 900px;
	min-height: 100%; height: auto;
	margin-left: auto; margin-right: auto;
	border-left: 1px solid #ddd; border-right: 1px solid #ddd;
	background: transparent url(../images/bg_footer_middle.jpg) repeat-y;
}

/* Title */

#titleArea
{
	/* Space for logo, languages, titles and so on */
	/* Usually at the top of the page */
	position: relative;
	width: 100%; height: 113px;
	padding-top: 0;
	background: transparent url(../images/bg_titlearea.jpg) no-repeat;
}

#titleArea div#logoImage
{
	position: absolute;
	left: 40px; top: 20px;
	width: 240px; height: 70px;
	background: transparent url(../images/maxtech_logo.png) no-repeat;
}
#titleArea div#logoImage a {
	display: block; width: 240px; height: 70px; margin: 0; padding: 0; border: 0;	background: transparent;
}

#titleArea div#logoSlogan
{
	position: absolute;
	left: 65px; top: 65px;
	width: 240px; height: 20px;
	font-size: 10px;
	font-style: italic;
	font-weight: bold;
	color: #33cc00;
	text-align: left;
}

#titleArea div.buttonsBox
{
	float: right;
	margin-right: 1em; margin-top: 1em;
}

#titleArea div#pageTitle
{
/*	position: absolute;
	right: 0; bottom: 0;
	width: 345px;
	margin-bottom: 15px;*/
	float: right;
	clear: right;
	width: 345px;
	padding: 0.5em 0 0.5em 0;
	background: transparent url(../images/bg_pagetitle_fadeleft.png) repeat-y;
	text-align: right;
}

#titleArea div#navBar
{
	float: right;
	clear: right;
	padding: 8px 0;
	text-align: right;
}

/* Main */

#mainArea
{
	position: relative;
	min-height: 40%;
	padding: 1em 3em;
	background-color: #f3f3f3;
	text-align: left;
}

div.CurveLeft,
div.CurveRight
{
	clear: both;
	padding-bottom: 0.5em;
	text-align: left;
}

div.CurveLeft
{
	min-height: 116px; margin-left: -3em; padding-left: 2em;
	background: transparent url(../images/hr_curve_leftside.gif) no-repeat;
	background-position: bottom left;
}

div.CurveRight
{
	min-height: 116px; margin-right: -3em; padding-right: 2em;
	background: transparent url(../images/hr_curve_rightside.gif) no-repeat;
	background-position: bottom right;
}

/* Footer */

#footerArea
{
	/*	FooterArea appears under the content, footerBottom is the absolute bottom footer */
	/* Add enought bottom padding for the bottom footer to fit */
	position: relative;
	width: 100%;
	text-align: center;
	padding-bottom: 150px; padding-top: 100px;
	background: transparent url(../images/bg_footer_top.jpg) no-repeat;
}

#footerBottom #FacebookContainer {
	position: relative; display: block; float: left;
	height: 80px; width: 40%;
	margin: 0; padding: 0 0 0 10%;
}

#footerBottom #FooterText {
	position: relative; display: block; float: right;
	height: 80px; width: 40%;
	margin: 0; padding: 0 10% 0 0; font-size: 0.875em; color: #666;
}

#footerBottom
{
	/* Position this outside the canvas, so that it'll appear at the bottom of the content */
	/* Height should be fixed, otherwise it's hard to pull the footer up inside the screen area */
	position: relative;
	bottom: 0; left: 0;
	width: 900px; height: 90px;
	margin-left: auto; margin-right: auto; margin-top: -90px;
	border-left: 1px solid #ddd; border-right: 1px solid #ddd;
	background: transparent url(../images/bg_footer_bottom.jpg) bottom no-repeat;
}

#footerBottom div#curveBottom
{
	position: absolute;
	right: 0; bottom: 0;
	width: 161px; height: 188px;
	background: transparent url(../images/footer_curve_right.gif) no-repeat;
}

#footerArea div#footerNav
{
	margin: 0 auto;
	text-align: center;
}

#footerNav div.footerNavColumn
{
	width: 50%;
	float: left;
	text-align: left;
}

.footerNavColumn a
{
	display: block;
	padding: 0 2em;
}

/* Rollover buttons */

div.ButtonsMenu
{
	float: left;
}

/* Dynamic styled buttons */
/* Unlimited width */
.styledButton,
div.ButtonsMenu a
{
	display: block;
	border: 0; margin: 0;
	padding: 0 30px 0 0;
	cursor: pointer;
	background: transparent right top no-repeat;
	text-align: center;
}

.styledButton span,
div.ButtonsMenu a span
{
	display: block;
	position: relative;
	height: 51px; line-height: 51px;
	border: 0; margin: 0;
	padding: 0 0 0 30px;
	font-size: 0.875em;
	font-weight: bold;
	background: transparent left top no-repeat;
	white-space: nowrap;
}

.styledButton:hover,
div.ButtonsMenu a:hover
{
	background-position: right -51px;
}

.styledButton:hover span,
div.ButtonsMenu a:hover span
{
	background-position: left -51px;
}

/* PNG buttons with shadows
TODO: Fix whitespace in firefox and safari
.style1 { background-image: url(../images/dynbuttonr_var1.png); }
.style1 span { background-image: url(../images/dynbuttonl_var1.png); color: #fafafa; }
.style1:hover span { color: #fafafa; }

.style2 { background-image: url(../images/dynbuttonr_var2.png); }
.style2 span { background-image: url(../images/dynbuttonl_var2.png); color: #fafafa; }
.style2:hover span { color: #333333; }

.style3 { background-image: url(../images/dynbuttonr_var3.png); }
.style3 span { background-image: url(../images/dynbuttonl_var3.png); color: #003366; }
.style3:hover span { color: #fafafa; }

*/

.styledButton.style1 { background-image: url(../images/dynbuttonr_var1.gif); }
.styledButton.style1 span { background-image: url(../images/dynbuttonl_var1.gif); color: #fafafa; }
.styledButton.style1:hover span { color: #fafafa; }

.styledButton.style2 { background-image: url(../images/dynbuttonr_var2.gif); }
.styledButton.style2 span { background-image: url(../images/dynbuttonl_var2.gif); color: #fafafa; }
.styledButton.style2:hover span { color: #fafafa; }

.styledButton.style3 { background-image: url(../images/dynbuttonr_var3.gif); }
.styledButton.style3 span { background-image: url(../images/dynbuttonl_var3.gif); color: #003366; }
.styledButton.style3:hover span { color: #fafafa; }

div.ButtonsMenu a
{
	float: left;
	background-image: url(../images/dynbuttonr_var1.gif);
}
div.ButtonsMenu.style2 a
{
	float: left;
	background-image: url(../images/dynbuttonr_var2.gif);
}
div.ButtonsMenu.style3 a
{
	float: left;
	background-image: url(../images/dynbuttonr_var3.gif);
}

div.ButtonsMenu.NoFloat a
{
	float: none;
	display: block;
}

div.ButtonsMenu a span,
div.ButtonsMenu a:hover span
{
	background-image: url(../images/dynbuttonl_var1.gif);
	color: #fafafa;
}

div.ButtonsMenu.style2 a span,
div.ButtonsMenu.style2 a:hover span
{
	background-image: url(../images/dynbuttonl_var2.gif);
	color: #fafafa;
}

div.ButtonsMenu.style3 a span,
div.ButtonsMenu.style3 a:hover span
{
	background-image: url(../images/dynbuttonl_var3.gif);
	color: #fafafa;
}

.CurveLeft div.ButtonsMenu
{
	clear: both;
	float: right;
	margin-top: -10px;
}
.CurveRight div.ButtonsMenu
{
	clear: both;
	float: left;
	margin-top: -10px;
}
.CurveLeft div.ButtonsMenu a { float: right; }
.CurveRight div.ButtonsMenu a { float: left; }

/* Common */
hr
{
	width: 80%; height: 1px;
	margin: 0.5em 0;
	border: 0 solid #ddd;
	background-color: #ddd;
	color: #ddd;
}

#mainArea hr,
.editorArea hr
{
	width: 100%;
}

.imagepanel
{
	overflow: hidden;
	text-align: center;
}
.imagepanel img {
	margin: 3px;
	padding: 1px;
	max-width: 100px;
	border: 1px solid #fff;
}
.imagepanel a:hover img {
	border: 1px solid #060;
}

div.two-column
{
	width: 80%;
	clear: both;
	margin: 3em auto 1em;
/*	border: 1px dashed #dedede;*/
	font-size: 0.875em;
	background-color: #fafafa;
}
div.two-column .left_column {
	float: left;
	width: 43%;
	margin: 1em;
}
div.two-column .right_column {
	float: right;
	width: 43%;
	margin: 1em;
}
div.two-column .full_column {
	width: 100%;
	clear: both;
	margin: 1em;
}

div.tabbed-column {
	width: 80%;
	clear: both;
	margin: 3em auto 1em;
}
div.tabbed-column .tab_row {
	display: block;
	padding: 1em 0 0;
	margin-bottom: -3px;
}
div.tabbed-column .content_row {
	padding: 1.5em;
	/*border: 1px dashed #dedede;*/
	background-color: #fafafa;
}

/*
	Data Table styles,
	for long lists of data inside table
*/
table.data_table {
	font-size: 0.775em;
}
table.data_table th {
	padding: 5px;
}
table.data_table td {
	padding: 2px 5px;
}
table.data_table tr:hover td {
	background-color: #dedede;
}
table.data_table tr.data_table_info td {
	padding: 0;
	background: transparent;
}
table.data_table tr.data_table_info:hover td {
	background: transparent;
}
table.data_table tr.data_table_info table {
	padding: 5px;
}

table.data_table form {
	background: transparent;
	margin: 0; padding: 0; border: none;
}