body
{
	font-family: LucidaGrande, HelveticaNeue-Light, Helvetica Neue Light, sans-serif;
	font-size: 24px;
	color: #2F2F2F;
	line-height: 28px;
	margin: 0px;
	overflow: hidden;
	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}

#logo
{
	background-image: url("images/logo.png");
	background-repeat: no-repeat;
	width: 90px;
	height: 90px;
	background: url('images/logo.png');
	background: -webkit-image-set( 	url('images/logo.png') 1x,
									url('images/logo@2x.png') 2x);
	background-repeat: no-repeat;
	background-size: 90px;
}

#wrapper
{
	width: 100%;
	height: 100%;
}

#wrapper.hover
{
	border-color: #BAD4FE;
}

#modellayer
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	
	background-color: #ffffff;
	opacity: 0.7;
	display: none;
}

.menu
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 25px;
	font-size: 14px;
	line-height: 24px;
	padding-left: 44px;
	background-color: #fff;
}
.menu ul
{
	list-style-type: none;
    padding: 0px;
    margin: 0px;
	padding-right: 20px;
}
.menu ul li
{
	display: inline;
}
.menu ul li a
{
	color: #000;
	text-decoration: none;
	padding: 20px;
	padding-bottom: 5px;
}
.menu ul li a:hover
{
	color: #fff;
	background-color: #979797;
}

#header
{
	position: absolute;
	top: 25px;
	left: 0px;
	right: 0px;
	height: 45px;
	background-color: #D8D8D8;
	border: 1px solid #979797;
	border-left-width: 0px;
	margin: 0px;
	padding-top: 15px;
	padding-left: 44px;
	
}

#header
{
	position: absolute;
	top: 25px;
	left: 0px;
	right: 0px;
	height: 45px;
	background-color: #D8D8D8;
	border: 1px solid #979797;
	border-left-width: 0px;
	margin: 0px;
	padding-top: 15px;
	padding-left: 44px;
	opacity: 0.8;
	overflow: hidden;
	
}



#productbar
{
	position: absolute;
	width: 184px;
	top: 87px;
	bottom: 0;
	background-color: #EEEEEE;
	border: 1px solid #979797;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	overflow-y: hidden;
	padding-left: 20px;
}

#productlist
{
	position: absolute;
	margin-top: 43px;
	width: 184px;
	top: 0px;
	bottom: 0;
	overflow-y: scroll;
}

.headersearch
{
	position: absolute;
	top: 1px;
	left: 195px;
}
.headersearch.input[type=search]
{
	position: absolute;
	top: 22px;
	left: 195px;
	width: 160px; 
}

input[type=search]
{
	float: left;
	margin-top: 20px;
	width: 160px; 
}

.productgrid
{
	float: left;
	width: 128px;
	height: 128px;
	border-radius: 5px;
	border: 2px solid #EEEEEE;
	background: none;
	margin-left: 15px;
	margin-top: 10px;
	margin-bottom: 5px;
}

.ui-draggable-helper
{
	opacity: 0.7;
}
.product
{
	margin-top: 5px;
	margin-left: 5px;
	width: 116px;
	height: 116px;
	border: 1px solid #979797;
	background-color: #fff;
	font-size: 10px;
	line-height: 11px;
	text-align: center;
}

.subproduct
{
	float: left;
	width: 32px;
	height: 32px;
	border: 1px solid #979797;
	background-color: #fff;
	margin-left: 5px;
	margin-bottom: 5px;
}

.assetgrid
{
	float: left;
	width: 128px;
	height: 128px;
	border-radius: 5px;
	border: 2px solid #F7F7F7;
	background: none;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 12px;
	margin-bottom: 2px;
}

.assettitle
{
	width: 100%;
	font-size: 10px;
	text-align:center;
	line-height: 11px;
	cursor: default;
}

#content
{
	position: absolute;
	left: 205px;
	top: 87px;
	width: 100%;
	height: 611px;
	background-color: #fff;
	font-size: 10px;
	line-height: 12px;
}

#selectbox
{
	position: absolute;
	left: 10px;
	top: 10px;
	width: 1px;
	height: 1px;
	border: 1px solid #ffffff;
	background-color: #979797;
	opacity: 0.5;
	display: none;
}

#singlepage
{
	position: absolute;
	left: 105px;
	top: 50px;
	width: 258px;
	height: 500px;
	border: 1px solid #979797;
	box-shadow: 0px 2px 16px #888888;
	background-color: #fff;
}

#doublepage
{
	position: absolute;
	left: 105px;
	top: 50px;
	width: 516px;
	height: 500px;
	border: 1px solid #979797;
	box-shadow: 0px 2px 16px #888888;
	background-color: #fff;
}

#dropcontentA
{
	position: absolute;
	left: 12px;
	top: 12px;
	width: 233px;
	height: 476px;
	background-color: #fff;
	border: 1px solid #979797;
}

#dropcontentA.hoverd
{
	background-color: #cde;
}

#dropcontentB
{
	position: absolute;
	left: 269px;
	top: 12px;
	width: 233px;
	height: 476px;
	background-color: #fff;
	border: 1px solid #979797;
}
#dropcontentB.hoverd
{
	background: #cde;
}

#pagebar
{
	position: absolute;
	left: 204px;
	top: 688px;
	bottom: 0px;
	right: 0px;
	background-color: #EEEEEE;
	border: 1px solid #979797;
	border-bottom-width: 0px;
	border-right-width: 0px;
}

#pagethumbcontainer
{
	position: absolute;
	left: 70px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	overflow-y: scroll;
}

#pagenavigation
{
	float: left;
	margin-top: 22px;
	margin-left: 20px;
	margin-right: 0px;
	width: 70px;
}

.pagethumbgrid
{
	float:left;
	margin-top: 12px;
	margin-right: 15px;
	width: 40px;
	height: 66px;
	border-radius: 5px;
	border: 2px solid #EEEEEE;
}

.pagethumbgrid.double
{
	width: 68px;
}

.pagethumb
{
	margin-top: 4px;
	margin-left: 4px;
	width: 26px;
	height: 50px;
	padding: 2px;
	background-color: #fff;
	border: 1px solid #979797;
	box-shadow: 0px 1px 5px #888888;
}

.pagethumb.double
{
	width: 52px;
}
.pagethumbnumber
{
	margin-top: 0px;
	font-size: 10px;
	text-align: center;
}

#gridtemplate_pallet
{
	position: absolute;
	right: 54px;
	top: 60px;
	width: 210px;
	height: 189px;
	background: url('images/Grid templates.png');
	display: none;
	
	background: -webkit-image-set( url('images/Grid templates.png')    1x,
                                   url('images/Grid templates@2x.png') 2x);
    padding-top: 59px;
    padding-left: 30px;
}

.gridtempclass
{
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 12px;
	margin-bottom: 4px;
	width: 80px;
	height: 151px;
	border-radius: 5px;
	border: 2px solid #4A90E2;
	background: none;
	opacity: 0;
}

#gridbutton
{
	position: absolute;
	right: 148px;
	top: 4px;
	width: 50px;
	height: 51px;
	background: url('images/Grid_templates_button.png');
	
	background: -webkit-image-set( url(images/Grid_templates_button.png)    1x,
                                   url(images/Grid_templates_button_2x.png) 2x);
}

#preview
{
	position: absolute;
	top: 100px;
	left: 200px;
	width: 100px;
	height: 100px;
	border: 1px solid #979797;
	box-shadow: 0px 2px 5px #888888;
	display: none;
}

#asset_pallet
{
	position:absolute;
	right: 20px;
	top: 60px;
	width: 217px;
	display: none;
}

#asset_pallet_top
{
	margin-left: 0px;
	margin-top: 0px;
	background: url('images/Asset browser.png');
	background: -webkit-image-set( 	url('images/Asset browser.png') 1x,
									url('images/Asset browser@2x.png') 2x);
				
	width: 217px;
	height: 12px;				
	background-repeat: no-repeat;
    background-position: 0px 0px;
}

#asset_pallet_arrow
{
	margin-left: 0px;
	margin-top:  0px;
	background: url('images/Asset browser.png');
	background: -webkit-image-set( 	url('images/Asset browser.png') 1x,
									url('images/Asset browser@2x.png') 2x);
	width: 217px;
	height: 50px;
	background-repeat: no-repeat;
    background-position: 0px -25px;
	
}

#asset_pallet_middle
{
	margin-left: 0px;
	margin-top:  0px;
	background: url('images/Asset-browser-middle.png');
	background: -webkit-image-set( 	url('images/Asset-browser-middle.png') 1x,
									url('images/Asset-browser-middle@2x.png') 2x);
	width: 217px;
	height: 100px;
}

#asset_pallet_bottom
{
	margin-left: 0px;
	margin-top: 0px;
	background: url('images/Asset browser.png');
	background: -webkit-image-set( 	url('images/Asset browser.png') 1x,
									url('images/Asset browser@2x.png') 2x);
	width: 217px;
	height: 12px;				
	background-repeat: no-repeat;
    background-position: 0px -90px;
}

#asset_pallet_content
{
	position: absolute;
	top: 10px;
	left:50px;
	width: 157px;
	height: 152px;
	overflow-y: scroll;
}




#bookshelf_pallet
{
	position: absolute;
	right: 123px;
	top: 60px;
	width: 345px;
	height: 512px;
	background: url('images/Bookshelf.png');
	display: none;
	
	background: -webkit-image-set( url(images/Bookshelf.png)    1x,
                                   url(images/Bookshelf_2x.png) 2x);
    padding-top: 46px;
    padding-left: 20px;
}

#bookshelfnavigation
{
	position: absolute;
	top: 40px;
	left: 30px;
	width: 70px;
}

#bookshelfbackground
{
	position: absolute;
	top: 71px;
	left: 10px;
	width:340px;
	height: 454px;
	background: url('images/Bookshelfbackground.png');
	background: -webkit-image-set( url(images/Bookshelfbackground.png)    1x,
                                   url(images/Bookshelfbackground_2x.png) 2x);
    background-attachment: local;
	overflow-y: scroll;
	border-radius: 5px;
	padding-left: 5px;
	padding-top: 21px;
}

.bookshelfcovergrid
{
	float: left;
	margin-left: 8px;
	margin-top: 0px;
	margin-bottom: 15px;
	width: 97px;
	height: 118px;
	border-radius: 5px;
	border: 2px solid #4A90E2;
}

.bookshelfcovergrid.off
{
	padding-left: 2px;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	border: 0px solid #4A90E2;
}

.bookshelfcover
{
	margin-left: 4px;
	margin-top: 4px;
	padding-top: 12px;
	width: 89px;
	height: 98px;
	background-color: #fff;
	box-shadow: 0px 1px 18px #D6D6D6;
	
	background-image: -o-linear-gradient(-89deg, #D6D6D6 0%, #6D6B6B 100%);
	background-image: -moz-linear-gradient(-89deg, #D6D6D6 0%, #6D6B6B 100%);
	background-image: -ms-linear-gradient(-89deg, #D6D6D6 0%, #6D6B6B 100%);
	background-image: linear-gradient(-179deg, #D6D6D6 0%, #6D6B6B 100%);
	
	text-align:center;
	font-family: LucidaGrande;
	font-size: 60px;
	color: #FFFFFF;
	line-height: 76px;
}

#bookshelfbutton
{
	position: absolute;
	right: 219px;
	top: 4px;
	width: 50px;
	height: 51px;
	background: url('images/Bookshelf_button.png');
	
	background: -webkit-image-set( url(images/Bookshelf_button.png)    1x,
                                   url(images/Bookshelf_button_2x.png) 2x); 
}


.mergebutton
{
	position: absolute;
	right: 219px;
	top: 4px;
	width: 50px;
	height: 51px;
	background: url('images/MergeButton.png');
	
	background: -webkit-image-set( url('images/MergeButton.png')    1x,
                                   url('images/MergeButton@2x.png') 2x); 
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.mergebutton.active
{
	background-position: -0px -51px;
}

.mergebutton.active.selected
{
	background-position: -0px -102px;
}

.split3button
{
	position: absolute;
	right: 290px;
	top: 4px;
	width: 50px;
	height: 51px;
	background: url('images/Split3.png');
	
	background: -webkit-image-set( url('images/Split3.png')    1x,
                                   url('images/Split3@2x.png') 2x); 
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.split3button.active
{
	background-position: -0px -51px;
}

.split3button.active.selected
{
	background-position: -0px -102px;
}

.split2button
{
	position: absolute;
	right: 361px;
	top: 4px;
	width: 50px;
	height: 51px;
	background: url('images/Split2.png');
	
	background: -webkit-image-set( url('images/Split2.png')    1x,
                                   url('images/Split2@2x.png') 2x); 
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.split2button.active
{
	background-position: -0px -51px;
}

.split2button.active.selected
{
	background-position: -0px -102px;
}