/************************************************************
* HTML Elements                                             *
************************************************************/

/************************************************************
* Some Things MrJim Added									*
************************************************************/

.menu_item { /* This is for the menu page */
	width:50%;
	float:left;
}
@media only screen and (max-device-width: 725px) {
.menu_item {
	width:100%;
	border-top:2px solid black;
	margin-bottom:10px;
	font-size:2em;
}
}

#menu_image {
	width:115px;
	height:115px;
	border:0px;
}
@media only screen and (max-device-width: 725px) {
#menu_image {
	width:400px;
	height:400px;
}
}

/************************************************************
* ePizza Elements                                           *
************************************************************/

.container_toppings_list {
	margin-left: 20px !important /*Non-IE6*/; margin-left: 10px /*IE6*/;
	width: 39%;
	font-size: 12px;
	float: left;
}

	.container_toppings_list .topping_category_name {
		height: 10px;
		padding: 3px;
		margin: none;
		font-weight: bold;
		clear: both;
	}

	/* Topping Selection Boxes */
	.container_toppings_list .draggable_topping {
		border: 1px solid black;
		height: 14px;
		width: 170px;
		padding: 5px;
		margin: 2px;
		float: left;
		font-weight: bold;
		background-color: #f0f0f0;
		cursor: pointer;
	}

	.container_toppings_list .selectedTopping {
		background-color: #C2EFC8;
	}

	.no_subs {
		color: red;
	}

	.container_toppings_list .draggable_topping.excluded {
		background-color: #FFB7B7;
	}

	.container_toppings_list .draggable_topping span.price_adjustment {
		font-size: 10px;
		color: #009900;
	}


.container_toppings_selected {
	margin-left: 20px !important /*Non-IE6*/; margin-left: 10px /*IE6*/;
	width: 56%;
	font-size: 12px;
	float: left;
}

	.container_toppings_selected .toppings {
		width: 97%;
		height: 125px;
		border: solid black 1px;
		overflow: auto;
		padding-bottom: 5px;
		margin-bottom: 3px;
	}

	.container_toppings_selected_hover {
		background-color: #FCFBBE;
	}

		.container_toppings_selected .toppings div.heading {
			font-weight: bold;
			height: 15px;
			font-size: 12px;
			background-color: #000;
			color: #fff;
			text-align: center;
			padding: 3px 0px 3px 0px;
			border-bottom: 1px solid black;
		}

		.container_toppings_selected .toppings .selected_topping {
			height: 18px;
			width: 33%;
			float: left;
			font-size: 12px;
			vertical-align: middle;
			cursor: pointer;
		}

		.container_toppings_selected .toppings .selected_topping.h1 a {
			color: #39f;
		}

		.container_toppings_selected .toppings .selected_topping.whole a {
			color: #6c6;
		}

		.container_toppings_selected .toppings .selected_topping.h2 a {
			color: #639;
		}


.toppings_container {
	padding-left: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.main .selected_topping img {
	border: none;
	vertical-align: middle;
	margin: 0;
}

.main p.buttons img.quantity {
	cursor: pointer;
	border: none;
}

.error {
	color: red;
	border-color: #f00;

}

/************************************************************
* JSValidation Elements                                     *
***********************************************************/

.error_url {
	margin-left: 20px;
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
	font-family: "Lucida Sans Unicode", "Trebuchet MS", Tahoma, sans-serif;
}

.jsvalidation {
	margin-left: 114px;
	display: block;
	font-size: 10px;
	color: #FF0000;
	font-family: "Lucida Sans Unicode", "Trebuchet MS", Tahoma, sans-serif;
}

@media only screen and (max-device-width: 725px) {
	.jsvalidation {
		font-size: 30px;
	}
}

.jsvalidation_left {
	margin-left: 0px;
	display: block;
	font-size: 10px;
	color: #FF0000;
	font-family: "Lucida Sans Unicode", "Trebuchet MS", Tahoma, sans-serif;
}

.jsvalidation_left_clear {
	margin-left: 0px;
	display: block;
	font-size: 10px;
	color: #FF0000;
	font-family: "Lucida Sans Unicode", "Trebuchet MS", Tahoma, sans-serif;
	clear: left;
}

input.validation-failed, textarea.validation-failed {
	border: 1px solid #FF3300;
	color : #FF3300;
}
input.validation-passed, textarea.validation-passed {
	border: 1px solid #00CC00;
	color : #000;
}

.validation-advice {
	margin-left: 114px;
	display: block;
	font-size: 10px;
	color: #FF0000;
	font-family: "Lucida Sans Unicode", "Trebuchet MS", Tahoma, sans-serif;
}

.custom-advice {
	margin-left: 114px;
	display: block;
	font-size: 10px;
	color: #FF0000;
	font-family: "Lucida Sans Unicode", "Trebuchet MS", Tahoma, sans-serif;
}

/************************************************************
* Map Elements                                              *
************************************************************/

.map_container {
    width: 100%;
	height: 100%;
    position: absolute;
    top: 0;
	left: 0;
	background: #e1e1e1;
    border: 0px solid #000;
}

.map_directions {
    width: 17%;
	height: 95%;
	float: left;
	background: #e1e1e1;
	overflow: auto;
	margin-left: 0px;
}

.map_display {
    width: 80%;
	height: 100%;
    top: 0;
	left: 0;
	float: right;
}

/************************************************************
* Map Elements added by your bestest buddy                  *
************************************************************/

.map_directions_mj {
    width: 0px;
	height: 95%;
	float: left;
	background: #e1e1e1;
	overflow: auto;
	margin-left: 0px;
}

.map_display_mj {
    width: 100%;
	height: 100%;
    top: 0;
	left: 0;
	float: left;
}


/************************************************************
* Status window for CC Processing elements                  *
************************************************************/

div.processing_status {
	 width: 550px;
	 font-size: 12px;
	 margin: 35px 0px 5px 20px;
	 font-weight: bold;
}

div.processing_status div.working {
	 padding: 13px 13px 13px 40px;
	 border: 1px solid #000;
	 background-color: #6f6e6e;
	 color: #fff;
	 vertical-align: middle;
	 background-image: url(../images/ajax-loader.html);
	 background-position: left;
	 background-repeat: no-repeat;
}

div.processing_status div.approved {
	 padding: 5px;
	 border: 1px solid #000;
	 background-color: #CFFBFF;
	 color: #000;
	 font-weight: normal;
}

div.processing_status div.declined {
	 padding: 5px;
	 border: 1px solid #000;
	 background-color: #ff0;
	 color: #000;
}

div.processing_status div.error {
	 padding: 5px;
	 border: 1px solid #000;
	 background-color: #f60;
	 color: #fff;
}

/************************************************************
* Table Simulation                                          *
************************************************************/
.div_table {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #d8d8d8;
	border-left-width-value: 1px;
	border-left-style-value: solid;
	border-left-color-value: #d8d8d8;
	border-left-width-ltr-source: physical;
	border-left-width-rtl-source: physical;
	border-left-style-ltr-source: physical;
	border-left-style-rtl-source: physical;
	border-left-color-ltr-source: physical;
	border-left-color-rtl-source: physical;
	border-right-width-value: 1px;
	border-right-style-value: solid;
	border-right-color-value: #d8d8d8;
	border-right-width-ltr-source: physical;
	border-right-width-rtl-source: physical;
	border-right-style-ltr-source: physical;
	border-right-style-rtl-source: physical;
	border-right-color-ltr-source: physical;
	border-right-color-rtl-source: physical;
	width: 95%;
	font-family: Monaco,"Courier New",monospace;
	font-size: 125%;
	margin-left: auto;
	margin-right: auto;
}

.div_table .div_table_header {
	text-align: left;
	font-weight: normal;
	background-color: #eaeaea;
	color: #999999;
	padding-top: 0.5em;
	padding-right: 0.3em;
	padding-bottom: 0.5em;
	padding-left: 0.3em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #d8d8d8;
}

.div_table .div_table_row {
	background-color: #f8f8f8;
	background-image: url(../images/row_bg.html);
	background-repeat: repeat-x;
	background-attachment: scroll;
	background-position: 0pt 100%;
	padding-top: 0.5em;
	padding-right: 0.3em;
	padding-bottom: 0.5em;
	padding-left: 0.3em;
	color: #484848;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e1e1e1;
}

.div_table .voided {
	text-decoration: line-through;
}

/************************************************************
* Slider Style                                              *
************************************************************/
.slider_container {
	margin-left: auto;
	margin-right: auto;
	width: 200px;
	height: 9px;
}

.slider_track_left {
	position: absolute;
	width: 5px;
	height: 9px;
}

/* put the track and the right rounded edge on the track */
.slider_handle {
	width: 19px;
	height: 20px;
}

	.slider_handle img {
		border: none;
		float: left;
	}


/************************************************************
* Super Buttons (Regular)                                   *
************************************************************/

.buttons_container {
	margin-left: 115px !important /*Non-IE6*/; margin-left: 118px /*IE6*/;
}

.buttons_container_left {
	margin-left: 0px;
	clear: left;
	margin-bottom: 10px;
}

.buttons a, .buttons button {
    display: block;
    float: left;
    margin: 0 7px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #969696; /* dedede */
    border-top: 1px solid #969696; /* eee */
    border-left: 1px solid #969696; /* eee */
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: 100%;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
    padding: 5px 10px 6px 7px; /* Links */
}
@media only screen and (max-device-width: 725px) {
.buttons a, .buttons button {
    line-height: 100%;
}
}

.buttons button {
    width: auto;
    overflow: visible;
    padding: 4px 10px 3px 7px; /* IE6 */
}

.buttons button[type] {
    padding: 5px 10px 5px 7px; /* Firefox */
	margin-bottom:5px;
    line-height: 17px; /* Safari */
}
@media only screen and (max-device-width: 725px) {
.buttons button[type] {
    line-height: 75px; /* Safari */
}
}

*:first-child+html button[type] {
    padding: 4px 10px 3px 7px; /* IE7 */
}

.buttons button img, .buttons a img {
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
}

.buttons button img, .buttons a:hover img {
    border: none;
}

/* STANDARD */

button:hover, .buttons a:hover {
    background-color: #dff4ff;
    border: 1px solid #c2e1ef;
    color: #336699;
}
.buttons a:active {
    background-color: #6299c5;
    border: 1px solid #6299c5;
    color: #fff;
}

/* POSITIVE */

button.positive, .buttons a.positive {
    color: #529214;
}
.buttons a.positive:hover, button.positive:hover {
    background-color: #E6EFC2;
    border: 1px solid #C6D880;
    color: #529214;
}
.buttons a.positive:active {
    background-color: #529214;
    border: 1px solid #529214;
    color: #fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative {
    color: #d12f19;
}
.buttons a.negative:hover, button.negative:hover {
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
}
.buttons a.negative:active {
    background-color: #d12f19;
    border: 1px solid #d12f19;
    color: #fff;
}

/************************************************************
* Super Buttons (Toppings)                                  *
************************************************************/

.buttons_container_toppings {
	width: 350px;
	float: left;

	margin: 1.0em 0 1.0em 0;
	color:rgb(0,0,0);
	line-height:1.3em;
	padding: 0 20px 0 20px;
	font-size:131% !important /*Non-IE6*/;
	font-size:115% /*IE6*/;
}

.buttons_toppings a, .buttons_toppings button {
    float: left;
    margin: 0 7px 7px 0;
    background-color: #f5f5f5;
    border: 1px solid #969696; /* dedede */
    border-top: 1px solid #969696; /* eee */
    border-left: 1px solid #969696; /* eee */
    font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: 100%;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
    padding: 5px 10px 6px 7px; /* Links */
}

.buttons_toppings button {
    width: 167px;
    overflow: visible;
    padding: 4px 10px 3px 7px; /* IE6 */
}

.buttons_toppings button[type] {
    padding: 5px 10px 5px 7px; /* Firefox */
    line-height: 17px; /* Safari */
}

*:first-child+html button[type] {
    padding: 4px 10px 3px 7px; /* IE7 */
}

.buttons_toppings button img, .buttons a img {
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
}

.buttons_toppings button img, .buttons a:hover img {
    border: none;
}

/* STANDARD */

button:hover, .buttons_toppings a:hover {
    background-color: #dff4ff;
    border: 1px solid #c2e1ef;
    color: #336699;
}
.buttons_toppings a:active {
    background-color: #6299c5;
    border: 1px solid #6299c5;
    color: #fff;
}

/* POSITIVE */

button.positive, .buttons_toppings a.positive {
    color: #529214;
}
.buttons_toppings a.positive:hover, button.positive:hover {
    background-color: #E6EFC2;
    border: 1px solid #C6D880;
    color: #529214;
}
.buttons_toppings a.positive:active {
    background-color: #529214;
    border: 1px solid #529214;
    color: #fff;
}

/* NEGATIVE */

.buttons_toppings a.negative, button.negative {
    color: #d12f19;
}
.buttons_toppings a.negative:hover, button.negative:hover {
    background: #fbe3e4;
    border: 1px solid #fbc2c4;
    color: #d12f19;
}
.buttons_toppings a.negative:active {
    background-color: #d12f19;
    border: 1px solid #d12f19;
    color: #fff;
}