HTML { height:100%; width:100%; margin:0; }
Body {
	position:relative;
	height:100%;
	width:100%;
	margin:0;
}
.NoLinkCSS {
	text-decoration:none;
	color:black;
}
.NoLinkCSS:visited { color:black; }
.BodyArea { } /* -- Oddly if this is removed it wont use the next class so left it here --- */
.BodyArea { 
	background-color:#FFFFFF; 
	color:#000000 !important;
	font-family:Geneva, Arial, Helvetica, sans-serif;
}
A { color:#6600FF; }
A:Hover { color:#9933FF; }
A:Active { color:#FF00FF; }
A:Visited { color:#FF5050; }
H1, H2, .ShopItemLabel, .ShopItem A, .ShopDetail, .ShopDetail_Colorway A, .DeptLabel { color:#000000 !important; }

/* ---- Menu Bar ---- */
.MenuBar { 
	color:#FFFFFF !important;
	font-family:Geneva, Arial, Helvetica, sans-serif!important;

	background: #1D2B63;
	background: linear-gradient(top,  #1D2B63,  #7A7A7A);
	background: -ms-linear-gradient(top,  #1D2B63,  #7A7A7A);
	background: -webkit-gradient(linear, left top, left bottom, from(#1D2B63), to(#7A7A7A));
	background: -moz-linear-gradient(top,  #1D2B63,  #7A7A7A);
}
.MenuBar-User A {
	color:#FFFFFF !important;
	font-family:#Geneva, Arial, Helvetica, sans-serif!important;
}
.MenuBar A:Hover {
	color:#FFFFFF !important;
	background: #FF0000;
}
.CartIcon A:Hover { 
	color:#FFFFFF !important;
}

/* ---- Form Input ---- */
.input__field {
	background: #FFFFFF;
	color: #000000;
	font-family: Geneva, Arial, Helvetica, sans-serif !important;
}
.input__label--ruri::after {
	background: #1D2B63;
}
.input__field--ruri:focus + .input__label--ruri::after,
.input--filled .input__label--ruri::after {
	background: #1D2B63;
}

.input__label--minoru::after {
	background: #1D2B63;
}
.input__field--minoru:focus + .input__label--minoru::after,
.input--filled .input__label--minoru::after {
	background: #1D2B63;
}
.ColorBox {
	display:inline-block;
	width: 150px;
	text-align:center;
	margin: 5px;
	padding: 10px 5px 5px 5px;
	border:thin solid black;
}

/* ---- Menu Bar ---- */
.MenuBar { 
	position:relative;
	height:40px;
	width:100%;
	line-height:20px;
	padding:0;

    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
		
	z-index:999;
}
.MenuBar-User {
	display: table;
	width: 100%
}
.MenuBar-User A {
	display: table-cell;
    vertical-align: middle;
    width: auto;

	text-decoration:none;
	line-height:40px;
	width:auto;
	text-align:center;
	padding: 0px 10px 0px 10px;
}

@media only screen and (min-width : 501px) {
	.FormArea { width: 80%; }
	.MobileOnly { display:none; }
	.FullPageOnly { display:block; height:100%; }
	.PageMenuArea { 
		width: 490px; 
		margin: 10px;
	}
}
@media only screen and (max-width : 770px) {
	.MenuLabel { display:none; }
	.MenuItem { height:40px; }
}
@media only screen and (max-width : 500px) {
	H1 { font-size:6vw; }
	H2 { font-size:5vw; }
	.FormArea { width: 100%; }
	.MobileOnly { display:block; }
	.FullPageOnly { display:none; }
	.PageMenuArea { 
		width: 100%; 
		margin: 0px;
	}
}
.FloatRight { float:right; }
.FloatLeft { float:left; }

.LoginArea {
	margin:auto;
}	
.PageContentArea {
	position:relative;
	min-height:100%;
	margin: 0px 10px 10px 10px;
}

.CenterContent {
	margin: auto;
	text-align:center;
	vertical-align:top;
}
.PageMenuArea { 
	display:inline-block;
}
.PageMenu {
}
.PageMenu-Header {
	-webkit-border-top-left-radius: 10px; 
	-moz-border-top-left-radius: 10px;
	border-top-left-radius: 10px;

	-webkit-border-top-right-radius: 10px; 
	-moz-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	
	height: 20px;
	padding: 3px;
	line-height: 20px;
	font-size: 20px;
	text-align:center;
}
.PageMenu-Items {
	border:thin solid gray;
	padding: 10px;
}
.PageMenu-Items input {
	width:90%;
	margin: 10px;
}
.PageMenu-Items button {
	width:90%;
	margin: 10px;
}



.FormArea {
	text-align:center;
	margin:auto;
}
.FormContent {
	text-align:left;
}
.DragSort {
	border: thin solid black;
	padding: 5px;
	margin: 5px;
	width: 300px;
	cursor:grab;
}


/* ---- Data Table ----*/
.DataTable {
	width:100%;
	border-collapse:collapse;
	border:thin solid grey;
}
.DataTable thead tr .header {
	background-image: url(bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
.DataTable thead tr th.headerSortUp { 
    background-image: url(/GFX/asc.gif); 
}
.DataTable thead th.headerSortDown { 
    background-image: url(/GFX/desc.gif); 
}
.DataTable TBody TR:nth-child(odd) TD {
	background-color:#CCCCCC;
	border:thin solid grey;
}
.DataTable TBody TR:nth-child(even) TD {
	border:thin solid grey;
}
.DataTable A {
	display:inline-block;
	width:100%;
	text-decoration:none;
}
.DataTable TH {
	color:#FFFFFF;
	background: #1D2B63;
}
.DataTable A { color:#000000; }





.AreaBorder {
	border: medium solid black;
	padding: 10px;
}


.BlackBorderBox {
	display:inline-block;
	border:medium solid black;
	padding:20px;	
	margin: 15px;
	height:100%;
	cursor:pointer;
}



/* ---- Notification Window ---- */
.NotifyWindow {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
		
	background:white;
	width:300px;
	border:thin solid black;
	text-align:center;
	-webkit-border-radius: 1em; 
	-moz-border-radius: 1em;
	padding-bottom: 10px;
	border-radius: 1em;
	z-index:10000;
}
.NotifyWindow NotifyMessage {
	margin: 20px;
	display:block;
}
.NotifyWindow NotifyTitle {
	display:block;
	font-weight:bold;
	font-size:120%;
	width:100%;

	-webkit-border-top-right-radius: .6em; 
	-moz-border-top-right-radius: .6em;
	border-top-right-radius: .6em;

	-webkit-border-top-left-radius: .6em; 
	-moz-border-top-left-radius: .6em;
	border-top-left-radius: .6em;
 }

.NotifyWindowDetailed {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	background:white;
	border:thin solid black;
	text-align:center;
	-webkit-border-radius: 1em; 
	-moz-border-radius: 1em;
	padding: 5px 5px 10px 5px;
	border-radius: 1em;
	z-index:10000;
}
.NotifyWindowDetailed IMG { padding-right:10px; }
.NotifyWindowDetailed NotifyMessage {
	margin: 20px;
	display:block;
}
.NotifyWindowDetailed NotifyTitle {
	display:block;
	font-weight:bold;
	font-size:120%;
	width:100%;

	-webkit-border-top-right-radius: .6em; 
	-moz-border-top-right-radius: .6em;
	border-top-right-radius: .6em;

	-webkit-border-top-left-radius: .6em; 
	-moz-border-top-left-radius: .6em;
	border-top-left-radius: .6em;
 }
.NotifyWindow, .NotifyTitle { 
	color:#FFFFFF;
	background: #1D2B63;
}
.NotifyMessage {
	color:#000000;
	background: #FFFFFF;
}

.NotifyWindowDetailed, .NotifyTitleDetailed { 
	color:#FFFFFF;
	background: #1D2B63;
}
.NotifyMessageDetailed {
	color:#000000;
	background: #FFFFFF;
}

.pulse {
	animation-name: pulse_animation;
	animation-duration: 5000ms;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes pulse_animation {
	0% { transform: scale(1) rotate(0deg); }
	25% { transform: scale(0.7) rotate(12deg); }
	50% { transform: scale(1) rotate(0deg); }
	75% { transform: scale(0.7) rotate(-12deg); }
	100% { transform: scale(1) rotate(0deg); }
}


.PageMenu-Header {
	color:#FFFFFF;
	background: #1D2B63;
	background: linear-gradient(top,  #1D2B63);
	background: -ms-linear-gradient(top,  #1D2B63,  #7A7A7A);
	background: -webkit-gradient(linear, left top, left bottom, from(#1D2B63), to(#7A7A7A));
	background: -moz-linear-gradient(top,  #1D2B63,  #7A7A7A);
}