/* 
    Document   : main
    Created on : 11/06/2009, 10:52:07 AM
    Author     : cdobbs
    Description:
    Main stylesheet with default layout and styles
*/

body                                    {background-color: #000;font-size:12px;font-family:Arial,sans-serif; margin: 0px; position: relative; overflow-x: hidden }
body.d-2017 { background-color: #FFF; } 

@media screen and (max-width: 800px) {

	body {font-size:11px;}
}

@media screen and (max-width: 700px) {

	body {font-size:10px;}
}

@media screen and (max-width: 600px) {

	body {font-size:9px;}
}

@media screen and (max-width: 500px) {

	body {font-size:8px;}
}

/****************** LINKS ****************************/
a                                       {text-decoration:none;color:#000}
a:hover                                 {color:#747474}

#contentContainer a:hover               {color:#000; text-decoration: underline }
#contentContainer .button a:hover, #contentContainer  a:hover.button        {color:#747474; text-decoration: none }

a.button				{ line-height: 1.8em; font-size: 1em; height: 1.8em; width: auto; display: inline-block; padding: 0px 4px 0px 4px; color: #FFFFFF; background-color: #000; border-radius: 5px }
/****************** HEADERS **************************/
h1                                      {margin:0px;padding:0px;color:#000;font-size: 2em}
h2                                      {margin:0px;padding:0px;font-size: 1.7em}
h3                                      {margin:0px;padding:0px;font-size: 1.5em}
h4                                      {margin:0px;padding:0px;font-size: 1em}

@media screen and (max-width: 500px) {

	h1 {font-size:1.7em;}
	h2 {font-size:1.6em;}

}

/****************** MAIN TEMPLATE ********************/
#siteContainer                          {width:100%; z-index: 1;  position: absolute; top: 0px; background-image: none /*url(/images/bg.jpg)*/ }
#siteContainerNested			{max-width: 900px; width: 100%; margin-top: 10px; margin-left: auto; margin-right: auto; background-color: rgba( 155,155,155,0.8 ); border-radius: 5px; }

#contentContainer                       {margin:20px 20px 0px 20px;}
#background-1				{position: absolute; width: 100%; min-height: 800px; background-image: none /*url(/images/main_bg.png)*/;background-repeat: no-repeat; background-color: #000; z-index: 0; top: 0px; left: 0px }

#background-2017 {position: absolute; width: 100%; min-height: 800px; background-image: none /*url(/images/main_bg.png)*/;background-repeat: no-repeat; background-color: #fff; z-index: 0; top: 0px; left: 0px }

@media screen and (min-width: 900px) {

#background-1 #left-flank		{ position: absolute; background-image: url(/images/left-flank.jpg);background-repeat: no-repeat; width: 273px; height: 100%; left: calc( 50% - 723px ); z-index: 2; top: 10px  }
#background-1 #right-flank		{ position: absolute; background-image: url(/images/right-flank.jpg);background-repeat: no-repeat; width: 262px; height: 100%; right: calc( 50% - 712px ); z-index: 2; top: 10px  }


#background-2017 #left-flank		{ position: fixed; background-image: url(/images/left-flank-03-2017.jpg);background-repeat: no-repeat; width: 271px; height: 100%; left: calc( 50% - 721px ); z-index: 2; top: 10px  }
#background-2017 #right-flank		{ position: fixed; background-image: url(/images/right-flank-03-2017.jpg);background-repeat: no-repeat; width: 262px; height: 100%; right: calc( 50% - 712px ); z-index: 2; top: 10px  }

#background-2017 #right-flank:after { content: " "; display: block; height: 100%; width: 262px; position: fixed; z-index: 10; background: linear-gradient(to right, rgba( 255,255,255,0 ), rgba( 255,255,255,1 ) ); }
#background-2017 #left-flank:after { content: " "; display: block; height: 100%; width: 271px; position: fixed; z-index: 10; background: linear-gradient(to right, rgba( 255,255,255,1 ), rgba( 255,255,255,0 ) ); }


}

#boxWrappers				{ position: relative; min-height: 230px; width: 100%;  }
#boxWrappers .textBox			{ float: left; width:30%;width: calc( 33.3% - 20px ); max-width: 265px; height: 210px ; border: none /*1px solid #AAA*/; border-radius: 5px; margin: 0px ; /*box-shadow: 5px 5px 5px #888;*/ padding: 10px}
#boxWrappers .textBox .textBoxText	{ height: 140px; width: 100%; overflow: hidden; margin: 0px 0px 10px 0px }
#boxWrappers .textBox .textBoxText img  { border: none; float: left; margin: 4px 8px 4px 0px }

@media screen and (max-width: 550px) {

	#boxWrappers .textBox	{ width:45%;width: calc( 50% - 20px ); height: 140px; }
	#boxWrappers .textBox .textBoxText	{ height: 80px;  }

}

.shipping_promotion { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); max-width: 206px; width: 40% }
.shipping_promotion img { border-radius: 4px; width: 100%; height: auto  }

@media screen and (max-width: 400px) {

	.shipping_promotion { left: 120px; transform: translateX(0px); -ms-transform: translateX(0px); -webkit-transform: translateX(0px);}

}

#header					{ padding: 0px; background-color: rgba(35,31,21,0.8); border-radius: 5px; position: relative; min-height: 120px; z-index: 10  }
#header .logo                           { position: absolute; top: 0px; left:  0px; height: 85px; width: 200px; z-index: 1; color: #FFFFFF; }
#header .logo img                       {border-width:0px;}
#header .logo                           {margin: 0px 0px 0px 0px;}
#header  div.logoText			{ position: absolute; top: 10px; right:  20px; color: #FFF; font-size: 1em; z-index: 20}
#header  div.logoText a			{color: #FFF}
#header  div.logoText a:hover		{color: #CCC}

#header .banner-container		{width: 100%; max-width: 900px; padding: 85px 0 0px 0;} 
#header .banner                         {text-align: center;  /*background-color:rgba(191,191,191,0.8); border-radius: 15px;*/ z-index: 0; height: auto; }
#header .banner span.phone		{ font-size: 19px; margin-right: 10px; color: #ffffff }

#footer                                 {margin-top:10px;padding:0px;background-color: #333333;height:64px; width: 100%; z-index: 1}
#footerContent				{ max-width: 900px; width: 100%; margin-top: 10px; margin-left: auto; margin-right: auto;  }

#topNav                                 {height:60px}
#topNav ul                              {padding:0px;margin:0px; }
#topNav li                              {list-style:none;display: inline-block; vertical-align: top; height: 100%; padding: 0px 10px 0px 10px; margin: 0px }
#topNav li a                            {display:block; font-size:1.3em; line-height: 2.2em;font-weight:bold;color:rgb(255,255,255);}
#topNav li a:hover                      {color:#747474 }

#footerNav                                 {margin-top:10px; height:2.6em; float: left}
#footerNav ul                              {padding:0px;margin:0px}
#footerNav li                              {list-style:none;float:left;}
#footerNav li a, #copyright a                             {display:block;padding:4px 8px;font-size:1em;color:#fff;}
#footerNav li a:hover , #footerNav li a.hold, #copyright a:hover   {color:#ffffff}

#footerContent	 #copyright			{ float: right; text-align: right; color: white; margin: 10px 20px 0px 0px }


#sideNav                                {float:left;width:143px;border:1px solid #723983}
#sideNav ul                             {padding:0px;margin:0px}
#sideNav li                             {list-style:none}
#sideNav li a                           {padding:5px;width:133px}

/************************** FORMS *********************************/
.label                                  {float:left;width:100px;margin-top:3px}
.input                                  {float:left;margin-top:3px}
.buttons                                {margin:10px 0px 0px 0px}
.field                                  {margin-top:3px}

input[type=text],
input[type=password]                    {width:160px}

/*                                  {width:164px}
input.required,
select.required,
textarea.required                       {color:#b11111}
*/

div.error				{color:#b11111}

input,select,textarea					{ font-size: 1em; max-width: 100% }

input[type="text"], textarea, select,  input[type="password"], input[type="button"] 		{ border: 1px solid #CCCCCC;  border-radius: 5px;  box-shadow: 2px 2px 2px #888; }
input[type="text"], select, input[type="password"]			{ width: 200px; height: 2.09em }
input[type="submit"] { background-color: #000; color: #FFF; border-radius: 5px; border: none; /*line-height: 1.83em; */font-size: 1em; height: 1.83em; width: auto; }

input.digits	{ width: 60px }

input.error,
input.validation-failed,
select.validation-failed,
textarea.validation-failed             {border:2px solid #b11111;background-color:#f1bbbb;color:#000}

input.validation-passed,
select.validation-passed,
textarea.validation-passed              {border:2px solid #0F0;}

input.disabled                          {color:#AAA}

.errorMessage                           {border:1px solid #b11111;padding:10px;background-color:#f1bbbb;font-size:10px;margin-bottom:10px}
.validation-advice                      {color:#b11111}

#contactLeft				{float: left; min-width: 240px; width:46.5%  }
#contactRight				{float: left; min-width: 240px; width:40% }
#contactRight iframe			{ border: none; border-radius: 5px;  box-shadow: 5px 5px 5px #888;}
/******************** POPUPS *************************************/
.popupWindow                            {border:1px solid #723983}
.popupWindow h2                         {border-bottom:1px solid #723983;font-size:12px;padding:5px 10px;background-color:#b293b9}
.popupWindow .container                 {padding:10px;background-color:#f3eff5}
.popupWindow .buttons                   {margin:10px 0px 0px 0px;text-align:center}

.content                                {padding:.83em;min-height:450px}

div.clear                               {margin:0px;padding:0px;height:0px;font-size:0px;overflow:hidden;clear:both}

div                                     {border-collapse:collapse}
img                                     {border-width:0}

/******************************* MISC ***********************************/
.imgButton                              {cursor:pointer}
div.button, input.button		{ background-color: #000; height: 2.08em; text-align: center; line-height: 2.08em; color: #FFFFFF; border: none; border-radius: 1em; font-size: 1em; display: inline; padding: 5px 10px 5px 10px;  }
input[type=submit].button		{ padding: 0px 10px 5px 10px }
div.button a				{ font-size: 1em; line-height: 1.1em; color: #FFFFFF; text-decoration: none }

/************************
*                       *
* MENU          *
*                       *
************************/

div.mega_menu           { background-color: #3a362e; border-radius:  0px 0px 5px 5px; border:1px solid #FFF;  border-right: 1px solid #FFF; position: absolute; top: 36.4px; display: none }

@media screen and (max-width: 800px) {

	div.mega_menu 	{ top: 34.2px }
}

@media screen and (max-width: 700px) {

	div.mega_menu 	{ top: 32px }
}

@media screen and (max-width: 600px) {

	div.mega_menu 	{ top: 29.8px }
}

@media screen and (max-width: 500px) {

	div.mega_menu 	{ top: 27.6px }
}


#topNav li.sub_title    { border-right:1px solid #FFF;  height: 2.17em; line-height: 1.33em; display: table-cell; text-align: left; padding: 0px; min-width: 6em; white-space: nowrap;  }

@media screen and (max-width: 500px) {

	#topNav li.sub_title    {  min-width: 4em; }
}


#topNav li.sub_title:last-child { border-right: none; }
#topNav div.mainNav		{position: relative; }
#topNav div.parentNav		{}
#topNav li.sub_title a          {font-weight: bold; text-transform:none; color: #FFF; font-size: 1em; line-height: 1.33em;}
#topNav li.sub_title a:hover    { color:#747474 } 
#topNav li.mega_item a, #topNav li.sub_title a          { padding:5px; }