/* Global typography and design elements, stacked containers */
body { font-family: Calibri, san-serif; x-border:5px solid blue; padding:5px; }
H1 { color: green; }
a:link { color:purple; }
HR.footer { border:3px solid #9D2642; border-radius:5px; width:80%; }

.bannerImageLogin { max-width:30%; display:block; }
.bannerImagePostLogin { max-width:45%; display:block; }

.bannerImage
{ margin-left:auto; margin-right:auto; }

.errorMessage
{ display:block; color:red; width:100%; margin-left:auto; margin-right:auto; }

.intro
{ margin:5px auto; width:80%; color:#545454; text-align:center; }
DIV.intro A:link, DIV.intro A:visited
{ color:#545454; text-decoration:none; }
DIV.intro A:hover
{ text-decoration:underline; }

.buttonGroup
{ display:block; text-align:center; margin-left:auto; margin-right: auto; margin-top:20px; }
.button, #TestingModeFlag
{ border-radius:10px; background-color:#545454; color:white; font-size:16pt; padding:5px 20px; margin:0 10px; border:2px solid white; font-weight:bold; }
#TestingModeFlag
{ background-color:red; float:left; }
.button:hover
{ color:white; background-color: #9D2642; }
.button:disabled
{ opacity:0.25; }

.loginFields
{ display:table; text-align:center; margin-left:auto; margin-right:auto; margin-top:20px; color:#545454;}
.loginFieldLabel
{ display:table-cell; text-align:left; width:10em; padding:0 20px; }
.loginFieldValue
{ display:table-cell; text-align:left; }

DIV#searchIntro
{ font-weight:bold; font-size:16pt; text-align:center; margin-top:20px; }
.searchFields
{ display:table; text-align:left; margin-left:auto; margin-right:auto; margin-top:20px; color:#545454; }
.searchFieldLabel
{ display:table-cell; text-align:left; width:60px; }
.searchFieldValue
{ display:table-cell; text-align:left; width:60px; padding-left:5px; }
.searchFieldLabelStock
{ display:table-cell; text-align:left; width:150px; }
.searchFieldValueStock
{ display:table-cell; text-align:left; width:150px; padding-left:5px; }
.searchFieldRange
{ display:inline; }
.searchFieldTo
{ display:inline; }
.searchColumnSortable
{ text-decoration:underline; }
.sortArrow
{ max-width:15px; }
.moreInfo
{ max-height:15px; }

DIV#results
{ display:block; margin-left:auto; margin-right:auto; margin-top:20px; text-align:center; }
TABLE.results
{ margin-left: auto; margin-right:auto; margin-top:20px }
TABLE TH.results
{ font-weight:bold; text-align:left; padding:0 5px; text-align:center; color:#545454; }
TABLE TD.results
{ font-size:10pt; text-align:left; padding:0 5px; text-align:center; }
TD.results A:link, TD.results A:visited
{ color:#545454; text-decoration:none; }
TD.results A:hover
{ text-decoration:underline; }

TABLE TH.list
{ font-weight:bold; text-align:left; padding:0 5px; text-align:left; color:#545454; }
TABLE TD.list
{ font-size:10pt; text-align:left; padding:0 5px; text-align:center; }

TR.zebra1
{ background-color:white; }
TR.zebra0
{ background-color:#E4E5E6; }

.orderSectionHeader
{ background-color:#545454; color:white; font-weight:bold; padding:5px; width:99%; border-collapse: collapse; }
.orderEmployee, .orderDiamond
{ background-color:white; color:#545454; margin:0; width:100%; }
TR.orderEmployee, TR.orderDiamond
{ border-style:solid; border-width:0 1px 1px 1px; border-color:#545454; padding:2px; }
TD.orderEmployee, TD.orderDiamond
{ padding:2px; }
INPUT[type=text].orderEmployee
{ width:30em; }
TABLE.orderDiamond
{ border-spacing:5px 0; border-collapse:separate; }
TD.orderDiamond
{ xwidth:50%; vertical-align:top; }
DIV.orderGeneralRemarks
{ margin-top:5px; color:#545454}
TH.order
{ border-bottom:2px solid #9D2642; }

DIV.orderFinishedJewellery
{ margin-top:5px; color:#545454; font-weight:bold; }
DIV.jewelleryWrapper
{ display:block; width:100%; }
DIV.jewelleryItem, TD.jewelleryItem
{ display:inline; float:left; margin-top:20px; width:200px; font-weight:normal; }
IMG.jewelleryItem
{ width:100%; min-width:50px; max-width:200px; }
P.jewelleryItem
{ display:block; width:200px; text-align:center; }

.hidden
{ visibility:hidden; }

@media screen and (max-width:700px){
	body { max-width:700px; x-border:5px solid green; font-size:8pt; }
	DIV.jewelleryItem, TD.jewelleryItem { display:inline; float:left; margin-top:20px; width:100px; font-weight:normal; }
	IMG.jewelleryItem { width:100%; max-width:100px; }
	P.jewelleryItem { display:block; width:100px; text-align:center; }
	.button, #TestingModeFlag { border-radius:6px; background-color:#545454; color:white; font-size:8pt; padding:1px 10px; margin:0 2px; border:1px solid white; }
	#TestingModeFlag { background-color:red; float:left; }
	TABLE TD.results { font-size:8pt; text-align:left; padding:0 2px; text-align:center; }
}

@media screen and (min-width:701px) and (max-width:1000px){
	body { max-width:1000px; x-border:5px solid red; font-size:10pt; }
	DIV.jewelleryItem { display:inline; float:left; margin-top:7px; width:150px; font-weight:normal; }
/*	IMG.jewelleryItem { width:100%; max-width:200px; }*/
	.button, #TestingModeFlag { border-radius:8px; background-color:#545454; color:white; font-size:15pt; padding:3px 10px; margin:0 5px; border:2px solid white; }
	#TestingModeFlag { background-color:red; float:left; }
	TABLE TD.results { font-size:10pt; text-align:left; padding:0 3px; text-align:center; }
}

@media screen and (min-width:1001px){
	body { max-width:1300px; x-border:5px solid pink; font-size:12pt;}
	H1 { color: #545454; font-size:1.2em }
}