/* Minification failed. Returning unminified contents.
(1439,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '+'
(1485,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '+'
(1957,45): run-time error CSS1030: Expected identifier, found '#printConfirm'
(1957,45): run-time error CSS1031: Expected selector, found '#printConfirm'
(2773,26): run-time error CSS1019: Unexpected token, found ':'
(2773,26): run-time error CSS1042: Expected function, found ':'
(2773,26): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
(2774,6): run-time error CSS1062: Expected semicolon or closing curly-brace, found '/'
(2781,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '/'
(5359,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '+'
 */
/*============================================================
	7/27/12 GESP  (Stands for GES PPE project, use this moniker for ppe
	changes)
	-Octothorp -- just a cool term.
	--TODO --
	Fix comments and TOC Section for PPE.
	-Refactor to clean out Cosco/NewWay/Staples Advantage
	extra items.

	-Refactor to take better advantage of cascade and or remove un needed
	classes.  E.G. Review and replace with descendent selectors if it makes
	sense.


	"Cosco" theme CSS styles

	:: Contents ::

	TBD .. fix and improve.

	1) Global
			default text
            default border
			drop indicator
            hover canvas
	2) Buttons
			Primary Button (Orange)
			Action Button (Grey)

	3) Footer

	4) Window
			Dialog
    5) Layout
			drop line
			drag placeholder
			splitbar (resizebar)
	6) TabSet
			tab titles
	7) SectionStack
			image SectionHeaders
			CSS SectionHeaders
	8) Forms
			general
			headerItem
			text items
			selectItem
			checkbox & radioButton
			ColorChooser
			DateChooser
	9) Slider & Rangebar
	10) DetailViewer
	11) ListGrid
			parts
			headers
			cells
    12) ToolStrip
    13) Tools
    14) TileGrid
	------------
	internal/unused styles
============================================================*/

body {
    color: #3b3d40;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

a {
    color: #006699;
    text-decoration: none;
}

a:hover { text-decoration: underline; }

a:link {
    cursor: pointer;
    cursor: hand;
    font-size: 12px;
    text-decoration: none;
}

/*============================================================
    1)  Global Constants
============================================================*/



/* from staples 2/18/2011 */

ol, ul {
    list-style: none;
    vertical-align: baseline;
}




.horizontalRule {
    background: url(/_designer/_images/horizontalRule_726px.png);
    height: 1px;
    margin: 25px 0px;
    width: 726px;
}

form, input, textarea, input, select {
    color: #3b3d40;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 11px;
}





/***************************************************************************
 IE Issues/Hacks  --
 Use the ../_css/ie6.css, ie7.css, ie8.css &  ../scripts/write_styles.js
**************************************************************************/



/********************************************
 Generic operational items
*********************************************/



/********************************************
 List Items
*********************************************/

/*updated*/

.standard_list li, .user_generated_content ul li {
    background: url(/_designer/_images/standard_bullet.png) no-repeat 15px 6px;
    color: #4d4d4e;
    line-height: 16px;
    padding-bottom: 6px;
    padding-left: 26px;
}


/********************************************
 Custom Items from stapleslink_ie-WITHCHANGES.CSS
*********************************************/

/* for national stamp stuff */

.previewCustomItem {
    border: 1px dashed #666;
    max-width: 350px; /* Circular stamps were sticking out on the Select a Layout Page */
}

.previewCustomItemMax300 {
    border: 1px dashed #666;
    max-width: 300px; /* Circular stamps.  Smaller then 350 to account for check box's on manage layout pages! */
}



.boldtxt { font-weight: bold; }

/* gesx added for signage error messing bug */

div .error { margin: 10px 0px; }

.error {
    color: #cc0000;
    font-weight: bold;
}

.errorSpacer { /* maybe re-name as generic spacer for stdBodyVSpacer */
    height: 10px;
}


/*----------------------------------------------------------------*/

/*--StaplesLink 4.0 Style Guide--*/

/*----------------------------------------------------------------*/

/* Strategy.. re-name it so you can just re-style using css and target selectors
 rather then changing classes in the code. e.g. Divider. */

/* Classes:

designBasicContainerLgcyTbl
  tableMainContentLgcyRow
  enterTextLegcyCol
  enterAlignmentLgcyCol
  enterColorLgcyCol
  divider

*/

.wrapperLgcyTbl {
    margin-left: 10px; /* 15px but margin already 5px due to legacy tables */
}



.designBasicContainerLgcyTbl td, .designBasicContainerLgcyTbl th, .designBasicContainerLgcyTbl a, .designBasicContainerLgcyTbl li,
.designBasicContainerLgcyTbl ol, .designBasicContainerLgcyTbl pre, .designBasicContainerLgcyTbl span { font-size: 12px; }

.designBasicContainerLgcyTbl form, .designBasicContainerLgcyTbl textarea, .designBasicContainerLgcyTbl input, .designBasicContainerLgcyTbl select {
    color: #3b3d40;
    font-size: 11px;
}

.designBasicContainerLgcyTbl th {
    font-weight: bold;
    text-align: left;
}

/* Legacy Note the image is specified in html under <img src="/images/1x1_drkgray_spacer.gif" width="1" height="1">
because we can't specify the src of an image in css */

.designBasicContainerLgcyTbl .divider {
    background-color: #000000;
    width: 1px; /* 1px seemed to be needed */
}

inputWrapperLgcyCol { width: 500px; }

/*============================================================
    X) Page Body Section
============================================================*/

/********************************************
 From CCA 16.0
  body Header Footers

*********************************************/

#contentTopSpacer { /* maybe re-name as generic spacer for stdBodyVSpacer */
    height: 25px;
}

#pageBodyWrapper {
    border-bottom-style: none;
    border-color: #dedede;
    /* needed to put Border cause can't modify grid_13 container */
    border-style: none;
    border-top-style: none;
    border-width: 0px;
    /*GES960*/
    width: 100%;
    /*background:url(/_designer/_images/body_border1.png) repeat-y  0px 0px;*/
    /*background:url(/_designer/_images/horiz_border_s1.png) repeat-y  0px 0px;*/
    /*background: url(/_designer/_images/section_borders_960.png) repeat-y 0px 0px;*/
    /* [disabled]margin-left: auto; */
    /* [disabled]margin-right: auto; */
}

/* #uploadBodyWrapper
{
	border-style:none;
	border-top-style:none;
	border-bottom-style:none;
	border-width:0px;
	border-color:#dedede;*/

/*GES960*/

/*width:780px;
	height:500px;
	background-color:#ffffff;
}*/

.pageBodyHeader {
    border-style: none;
    font-size: 16px;
    /*border-bottom: #dedede solid 1px;*/
    font-weight: bold;
    height: 60px;
    overflow: hidden;
    /*background: url(/_designer/_images/body_header2.png) no-repeat; */
    /*background: url(/_designer/_images/section_top_960.png) no-repeat;*/
    /*GES960*/
    width: 100%;
}

.pageBodyUP {
    border: 1px solid #DEDEDE;
    display: none;
    width: 958px;
}

.pageBodyFooter {
    /*background: url(/_designer/_images/body_footer2.png) no-repeat;*/
    background: url(/_designer/_images/section_bottom_960.png) no-repeat;
    border-style: none;
    font-size: 16px;
    font-weight: bold;
    height: 60px;
    overflow: hidden;
    /*GES960*/
    width: 100%;
}

.pageBodyHeader h2, .pageBodyHeader h1 {
    color: #3b3d40;
    /* v-align technique */
    display: inline;
    float: left;
    font-size: 16px;
    line-height: 30px; /* 60/2=30 from pageBodyHeader height */
    margin-top: 16px; /* TOOD investigate why needed to v Center */
    /*padding-top:19px; from Staples */
    padding-left: 16px;
}

h3.subtitle, h2.subtitle {
    color: #0083c5;
    font-size: 16px;
    margin-bottom: 10px;
}

.pageBodyHeader .vCenterAlignLeft, .pageBodyFooter .vCenterAlignLeft {
    display: inline;
    float: left;
    line-height: 30px; /* 60/2=30 from bodyHeader height */
    margin-left: 17px;
    margin-top: 16px; /* TOOD investigate why needed to v Center */
}

.pageBodyHeader .vCenterAlignRight, .pageBodyFooter .vCenterAlignRight {
    display: inline;
    float: right;
    line-height: 30px; /* 60/2=30 from bodyHeader height */
    margin-right: 17px;
    margin-top: 16px; /* TOOD investigate why needed to v Center */
}




.pageBodyHeader .primaryText, .pageBodyFooter .primaryText { color: #3b3d40; }

.pageBodyHeader .secondaryText, .pageBodyFooter .secondaryText {
    color: #c66802;
    font-size: 16px;
}

/********************************************
  END body Header Footers
*********************************************/



/********************************************
 From CCA 15.0
  Page Body Styles
*********************************************/

.bodyPageParagraphs {
    margin-bottom: 25px;
    margin-left: 17px;
    margin-right: 17px;
    margin-top: 25px;
    padding: 0px;
    text-align: left;
}

.bodyPageParagraphsCenter {
    margin-bottom: 25px;
    margin-left: 17px;
    margin-right: 17px;
    margin-top: 25px;
    padding: 0px;
    text-align: center;
}

.paragraphText {
    color: #3b3d40;
    font-size: 14px;
    text-align: left;
}

.uploadHeadingText {
    color: #3b3d40;
    font-size: 14px;
    text-align: left;
}


.paragraphLabelText {
    color: #3b3d40;
    font-size: 14px;
    line-height: 16px;
    margin-left: 5px;
    text-align: left;
    vertical-align: top;
}

.inksLabel {
    display: block;
    margin-left: 5px;
    padding-top: 10px;
}

.subHeadingsText {
    color: #0083c5;
    font-size: 16px;
    padding: 0px;
}

.twoColContainerCol1 {
    border-style: none;
    /*width:362px; *//* 760/2 = 380; 380 - 17=363; -1px for left border=362 */
    display: inline-block;
    /* GES960*/
    width: 447px; /*  960/2 = 465 = 17 = 448; -1px for left border =447px */
    /* for debug background-color:red; */
}

.twoColContainerCol2 {
    border-style: none;
    display: inline-block;
    margin-left: 17px;
    padding: 0px;
    width: 341px; /* 362 - 17 = 345;  but changed to 341 to wrk w safari. */
    /* for debug background-color:blue; */
}

.solidImageContainer {
    border: 1px;
    border-style: solid;
    /* [disabled]width:300px; */
}

.dashedImgContainer {
    border: 1px;
    border-style: dashed;
}


/* just to support the display web page */

.cccDisplayHeading {
    color: #0083c5;
    font-size: 12px;
}

/********************************************
  Added with Dream Weaver Post 1/1/2011
*********************************************/

#divHeader {
    background: url('../_images/bg_header.gif') repeat-x;
    height: 80px;
    padding: 0px 0px; /* used to center and re-size box to be 49px high and for image to show */
    width: 100%;
}

#divHeader span {
    background: transparent url(/_designer/_images/staples.gif) no-repeat scroll right;
    color: inherit;
    display: block;
    height: 46px;
    margin-left: 150px;
    padding: 20px;
    width: 190px;
}

#wrapper {
    margin-left: auto;
    margin-right: auto;
    /* GES960 */
    width: 100%;
}


#coscoMainContent #pageBodyWrapper li { }

#studioContainer {
    background: transparent;
    margin: 0px;
    /*border:thin dotted #C66;   just to show borders*/
    /* was 760 - 25 - 15 + 6   ---WTF  wrong, but maybe to coddle legacy cosco layout*/
    /*width:  726px; *//*960 - 760 = 170px to add ? */
    /*width: 938px;  */
    /* 960 -(15 *2  + 1*2) = 928   subtract for border and padding */
    overflow: hidden;
    padding: 0px;
}

.imageGridLeft {
    float: left;
    margin-bottom: 10px;
}

.imageGridRight {
    float: left; /* then make equal spacing for the second row image. */
    margin-bottom: 10px;
    margin-left: 92px; /* 756 - 286 (w of image 'return to sender') = 471.  then 471-286 = 185 then 185/2=92 */
}

.imageGridContainer {
    margin-top: 25px;
    overflow: hidden;
}

/* Manage Layout Image Grids with Check Boxes */

.imageGridWCbLeft {
    float: left;
    margin-bottom: 10px;
}

.imageGridWCbRight {
    float: left; /* then make equal spacing for the second row image. */
    margin-bottom: 10px;
    margin-left: 52px; /* 93 - 20X2 to add for the new margin of 20 on left and right of the container*/
}

.imageGridWCbContainer {
    margin: 0 20px; /* to compact them more to the center */
    margin-top: 25px;
    overflow: hidden;
}


/*  Basic Positioning */

.centerAnyWidthDiv {
    display: table; /* Needed cause if a width is not specified it will take entier container */
    margin: 0 auto;
    text-align: center; /* ie center bug as margin:auto dosn't work */
}


/*============================================================
      END Page Body Styles
============================================================*/


/*============================================================
      X) Tab Styles
============================================================*/

/*
	Sliding Doors example from main site:  http://www.alistapart.com/articles/slidingdoors/
	The tricks that make it work are:
		-background _images don't re-size anything.  they are just along for the ride. size is determied by content and padding.
		-background _images in <divs> or containers will overried those in previouise containers.  (previouse meaning where it shows in html)
		-The trick or key to making the bottom tab border display for non -selected items, and show for selected items is
		  the fact that the selected item has an extra px of padding at bottom which makes it bleed over the bottom background border
		  and the standard tabs only have 1 px less at the bottom, and thus their background only goes that far down, not dovering the
		  main background.


		  10/19/2010  Modified from original example.  Adding _images, and styles.

*/

#header {
    float: left;
    /*  Removed from Sliding doors implementation as we are using top of the section
	header with margin-top:-1 to be the baseline for the tabs!!
	*/
    /*font-size:93%;*/
    line-height: normal;
    width: 726px;
}

#header ul {
    list-style: none;
    margin: 0;
    /*padding: 10px 10px 0; */
    padding: 0px 0px 0; /* this fixed the left alignmen problem. */
}

#header li {
    /* background:url("/_designer/_images/tab_right_off1.png") */
    /* background:url("/_designer/_images/tab_shdw_rht_s2.png")*/
    background: url("/_designer/_images/tabs_shdw3_rht_off.png") no-repeat right top;
    float: left;
    margin: 0;
    padding: 0;
    text-align: left;
}

#header li.rightEdge { /* only edge shadows on edges as we don't want shadows horiz space btwn adjacent tabs */
    background: url("/_designer/_images/tabs_shdw3_rht_edg_off.png") no-repeat right top;
}

#header a {
    /*background:url("/_designer/_images/tab_left_off1.png")*/
    /*background:url("/_designer/_images/tab_shdw_lft_s2.png")*/
    background: url("/_designer/_images/tabs_shdw3_lft_off.png") no-repeat left top;
    color: #006699;
    display: block;
    font-size: 12px;
    font-weight: normal;
    /*padding:8px 17px 7px;  */
    /* 5,17,4 -> 8,17,7 to match NWSG   TODO get the top and bottom padding.  **Make Sure padding-bottom -1 then for " #header #current a"
							or it will break the Tab Base */
    /* custom styles for NWSG */
    padding: 9px 17px 6px; /* 4/25/11 uat changed from 9 17 7 to 7 17 6 for FF Win. 4/21/11 account for drop shadow images */
    text-decoration: none;
}


#header li.leftEdge a { /* only edge shadows on edges as we don't want shadows horiz space btwn adjacent tabs */
    background: url("/_designer/_images/tabs_shdw3_lft_edg_off.png") no-repeat left top;
}

/*****************************************
	*
	* Styles for the currently selected Tab
	*
	*******************************************/

#header #current {
    /*background-image:url("/_designer/_images/tab_right_on1.png");*/
    /* background-image:url("/_designer/_images/tab_shdw_rht_s1.png");*/
    background-image: url("/_designer/_images/tabs_shdw3_rht_on.png");
}


#header #current.rightEdge { background-image: url("/_designer/_images/tabs_shdw3_rht_edg_on.png"); }


#header #current a {
    /*background-image:url("/_designer/_images/tab_left_on1.png");*/
    /*background-image:url("/_designer/_images/tab_shdw_lft_s1.png");*/
    background-image: url("/_designer/_images/tabs_shdw3_lft_on.png");
    color: #3b3d40;
    font-weight: bold;
    padding-bottom: 7px; /*4/25/11 ch fro 8px to 7px for FF Windows to   ** Make sure +1 then "#header a" or it will break the Tab Base. 5->8 */
}

#header #current.leftEdge a { background-image: url("/_designer/_images/tabs_shdw3_lft_edg_on.png"); }

.tabTableTop {
    background: #FFFFFF url(/_designer/_images/tab_box_top1.png) no-repeat top left;
    border: none #dedede 1px;
    height: 10px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px; /* key to get it to bleed into the Tabs */
    padding: 0px;
    width: 726px;
}

.tabTableContent {
    /* height:250px; /*Adjust when working with the Drop Shadow -- Also configuable for content later!! */
    border: solid #dedede 1px;
    border-bottom: none;
    border-top: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px; /* key to get it to bleed into the Tabs */
    width: 724px;
}

.tabTableBottom {
    background: #FFFFFF url(/_designer/_images/tab_box_top1.png) no-repeat bottom left;
    border: none #dedede 1px;
    height: 5px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 726px;
}

/* Simple table top and bottom for non tabbed boxex */

.plainTableTop {
    background: #FFFFFF url(/_designer/_images/rounded_box_760.png) no-repeat top left;
    border: none #dedede 1px;
    height: 10px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px; /* key to get it to bleed into the Tabs */
    padding: 0px;
    width: 726px;
}

.plainTableBottom {
    background: #FFFFFF url(/_designer/_images/rounded_box_760.png) no-repeat bottom left;
    border: none #dedede 1px;
    height: 5px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 726px;
}

.shadowTableTop {
    background: #FFFFFF url(/_designer/_images/rounded_box_shdw_760.png) no-repeat top left;
    border: none #dedede 1px;
    height: 15px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px; /* key to get it to bleed into the Tabs */
    padding: 0px;
    width: 726px;
}

.shadowTableBottom {
    background: #FFFFFF url(/_designer/_images/rounded_box_shdw_760.png) no-repeat bottom left;
    border: none #dedede 1px;
    height: 15px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 726px;
}

.shadowTableContent {
    background: url(/_designer/_images/box_border_shdw_760_s1.png) repeat-y top left;
    /* height:250px; /*Adjust when working with the Drop Shadow -- Also configuable for content later!! */
    border: none; /*
	border:solid #dedede 1px;
	border-top:none;
	border-bottom:none;*/
    margin-left: auto;
    margin-right: auto;
    margin-top: -1px; /* key to get it to bleed into the Tabs */
    width: 726px;
}

.shadowTabTableTop {
    background: #FFFFFF url(/_designer/_images/rounded_tab_box_shdw_760.png) no-repeat top left;
    border: none #dedede 1px;
    height: 15px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    margin-top: -3px; /* key to get it to bleed into the Tabs */
    padding: 0px;
    width: 726px;
}

.shadowTabTableBottom {
    background: #FFFFFF url(/_designer/_images/rounded_tab_box_shdw_760.png) no-repeat bottom left;
    border: none #dedede 1px;
    height: 15px; /*Adjust when working with the Drop Shadow */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 726px;
}

/*============================================================
      END Tab Styles
============================================================*/






/*============================================================
      Added PPE Tab Tables Multi-Width GESP 7/5/12

	   TODO:  See if we can make more dynamic..
	   e.g. by width of the container.
	   -Rename Left and Right.

	   Technique: Add css anchors and show the right corners
	     of the image.. only like 15px.
============================================================*/

.shadowTableContent200px {
    background: url(/_designer/_images/box_border_shdw_760_s1.png) repeat-y top left;
    border: none;
    float: left;
    margin-top: -1px; /* key to get it to bleed into the Tabs */
    /*margin-left:auto;
	margin-right:auto;*/
    width: 200px;
}

/* NEW goes inside the left one */

.shadowTableContentRight200px {
    background: url(/_designer/_images/box_border_shdw_760_s1.png) repeat-y top right;
    border: none;
    float: right;
    margin-top: -1px; /* key to get it to bleed into the Tabs */
    /*margin-left:auto;
	margin-right:auto;*/
    width: 195px; /* TODO we can change to generic 15 or 20px I'm guessing. */
}


.shadowTabTableTop200px {
    background: #FFFFFF url(/_designer/_images/rounded_tab_box_shdw_760.png) no-repeat top left;
    border: none #dedede 1px;
    height: 15px; /*Adjust when working with the Drop Shadow */
    margin-top: -3px; /* key to get it to bleed into the Tabs */
    /*margin-left:auto;
	margin-right:auto;*/
    padding: 0px;
    width: 200px; /* so it dosnt write over the parent */
}

/* NEW goes inside the left one */

.shadowTabTableTopRight200px {
    background: #FFFFFF url(/_designer/_images/rounded_tab_box_shdw_760.png) no-repeat top right;
    border: none #dedede 1px;
    float: right;
    height: 15px; /*Adjust when working with the Drop Shadow */
    margin-top: -3px;
    /*margin-left:auto;
	margin-right:auto;*/
    padding: 0px;
    width: 5px;
}

.shadowTabTableBottom200px {
    background: #FFFFFF url(/_designer/_images/rounded_tab_box_shdw_760.png) no-repeat bottom left;
    border: none #dedede 1px;
    height: 15px; /*Adjust when working with the Drop Shadow */
    /*margin-left:auto;
	margin-right:auto;*/
    padding: 0px;
    width: 200px;
}

/* NEW goes inside the left one */

.shadowTabTableBottomRight200px {
    background: #FFFFFF url(/_designer/_images/rounded_tab_box_shdw_760.png) no-repeat bottom right;
    border: none #dedede 1px;
    float: right; /*to push to far right duee */
    height: 15px; /*Adjust when working with the Drop Shadow */
    /*margin-left:auto;
	margin-right:auto;*/
    padding: 0px;
    width: 100px; /* so it dosn't write over the parent */
}

/*============================================================
      END       Added PPE Tab Tables Multi-Width
============================================================*/


/*============================================================
  Table  Styles

    -todo move more items to classes
   create class for header, then footer.
   you will need two footers. Grey, and white.
   -use the header tag
============================================================*/


/*
took out for cosco legacy tables !!

table {
	border-collapse:collapse;
}

tr.body {
	border-left:1px #dedede solid;
	border-right:1px #dedede solid;
	padding:0px;
}
*/


/*============================================================
      END Table Styles
============================================================*/





/*============================================================
    2) Buttons
	-Context.. e.g. Left, Right, Center Justify
	-Actual buttons using -Use <a> tag and 2 <span> tags.
		-Float bg image left and then right in the
		 <a> block container to handle re-sizing.
============================================================*/




/*************************************
  Button Context Selectors
	-Just targets btnSections
	assumes page body headers
	and footers.
**************************************/

.btnSectRight a.btn_primary, .btnSectRight a.btn_action, .btnSectLeft a.btn_primary, .btnSectLeft a.btn_action {
    margin-top: 10px; /* V-CENTER BTN Added 6 to Staples 13 = 19 to center as Staples had that extra 6px top hdr cap */
}

.btnSectRight a.btn_primary, .btnSectRight a.btn_action {
    float: right;
    margin-right: 15px;
}

.btnSectLeft a.btn_primary, .btnSectLeft a.btn_action {
    float: left;
    margin-left: 15px;
}

.btnSectCenter a.btn_primary, .btnSectCenter a.btn_action {
    display: table;
    margin: 0px auto;
    text-align: center;
}


.link a.link {
    margin-left: 0px;
    margin-top: 5px;
}

/*************************************
 Actual Buttons
**************************************/

/* 4/14/11 for disabled primary */

.disabled { color: #ccc !important; }

.btnNewButton {
    background-color: inherit;
    border: 0px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    font-weight: bold;
    height: 13px;
    width: auto;
}

a.btn_action {
    cursor: pointer;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

a.btn_action span {
    background-color: #0a74c7;
    border-radius: 3px;
    color: inherit;
    display: block;
    float: left;
    font-weight: 700;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
}

a.btn_action span:hover {
    background-color: #06508a;
    border-radius: 3px;
}

a.btn_action span.left {
    background-position: left top;
    font-size: 14px;
    font-weight: bold;
    font-weight: bold;
    line-height: 35px;
    line-height: 35px;
    padding: 0 15px;
    text-align: center;
    width: auto;
}

a.btn_action span.advanced {
    background-position: left top;
    font-size: 14px;
    font-weight: bold;
    font-weight: bold;
    line-height: 35px;
    line-height: 35px;
    padding: 5px 10px;
    text-align: center;
    width: auto;
}

a.btn_action:link, a.btn_action:visited { color: #ffffff; }

a.btn_action:hover {
    color: #fff;
    text-decoration: none;
}

a.btn_action:active { color: #ffffff; }

a.btn_action.disabled { cursor: default; }

a.btn_action.disabled span {
    background: transparent url(/_designer/_images/btn_orange_disabled.png) no-repeat scroll right top;
    color: #ffffff;
}

a.btn_action.disabled span.left { background-position: left top; }

a.btn_primary {
    cursor: pointer;
    display: block;
    overflow: hidden;
    text-decoration: none;
}

a.btn_primary span {
    border-radius: 3px;
    color: #0a74c7;
    font-size: 14px;
    font-weight: 700;
    height: 35px;
    line-height: 35px;
    text-align: center;
    text-decoration: none solid rgb(10, 116, 199);
}

a.btn_primary span:hover {
    background-color: #0a74c7;
    background-color: rgba(10, 116, 199, 0.3);
    background-size: auto 35px;
    display: block;
    font-weight: bold;
    font-weight: 700;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    text-align: center;
}

a.btn_primary span.left {
    background-position: left top;
    color: #0a74c7;
    font-size: 14px;
    font-weight: bold;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    text-align: center;
    width: auto;
}

a.btn_primary:link, a.btn_primary:visited { color: #333333; }

a.btn_primary:hover {
    color: #ffffff;
    text-decoration: none;
}

a.btn_primary:active { color: #333333; }

a.btn_primary_unsupport_browser span:hover { background-color: white; }

a.link:link {
    color: #006699;
    cursor: pointer;
    cursor: hand;
    display: block;
    font-size: 12px;
    overflow: hidden;
    text-decoration: none;
}

a.link span {
    color: inherit;
    display: block;
}

a.link:visited { text-decoration: none; }

a.link:hover { text-decoration: none; }

a.link:active { text-decoration: none; }

/*============================================================
  End Button Styles
============================================================*/

/*============================================================
    2.b ) Staples Text Box
	-Use on image.  with float left, and float right to size it.
============================================================*/




/*************************************
  Text Box Notes.
**************************************/

.input_content_text input {
    border: none;
    color: #6d7078;
    font-family: Lato;
    font-size: 14px;
    text-decoration: none solid rgb(109, 112, 120);
    width: 100%;
}

.p_label_input {
    float: left;
    margin: 0;
}

/* Custom sizes for Cosco web site */

.input_newstyle_200 { /*add new width 2010_9_21*/
    width: 200px;
}

.input_newstyle_200 input { width: 188px; }

.input_newstyle_300 { /* replaces the size=50 */
    width: 300px;
}

.input_newstyle_300 input { width: 288px; }

.input_newstyle_233 { /* replaces the size=38 */
    width: 193px;
}

.input_newstyle_233 input { width: 181px; }

.input_newstyle_40 { /* replaces the size=4   Should be 24?  e.g. 6*4=24 */
    width: 50px;
}

.input_newstyle_40 input { width: 28px; }

.input_newstyle_60 { /* replaces the size=4   Should be 24?  e.g. 6*4=24 */
    width: 60px;
}

.input_newstyle_60 input { width: 40px; }

.input_newstyle_152 { /* replaces the file upload in upload_nw.jsp */
    width: 140px;
}

.input_newstyle_182 { /* replaces the file upload in upload_nw.jsp */
    width: 170px;
}

.input_newstyle_152 input { width: 128px; }

.input_newstyle {
    height: 22px;
    /*margin-top:5px;  Fix for cosco as it's in tables and this was adding too much size */
}

.input_content_text {
    background-color: #ffffff;
    border: 1px solid #cfd3d6;
    border-radius: 4px;
    display: flex;
    height: 35px;
    padding: 0px 10px 0px;
    width: 500px;
}

.input_right_side {
    background: url(/_designer/_images/bg_input.png) no-repeat right;
    float: left;
    height: 22px;
    width: 4px;
}

.clear {
    clear: both;
    display: block;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
    width: 0px;
}


/*============================================================
  End Staples Text Box
============================================================*/



/*============================================================
    3) Footer Section
============================================================*/



#sub_footer {
    background: url('../_images/bg_sub_footer.gif') repeat-x;
    font-size: 10px;
    margin-top: 50px;
    padding: 20px 0px; /* used to center and re-size box to be 49px high and for image to show */
    width: 100%;
}

#sub_footer p {
    color: #FFFFFF;
    font-size: 10px;
    text-align: center;
}

#sub_footer p a {
    color: #FFFFFF;
    text-decoration: none;
}

#sub_footer p a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}


/*============================================================
  End Footer Section
============================================================*/


/*============================================================
  GESP Layout Added for PPE 7/15/12
============================================================*/

#sideBar {
    float: left;
    margin: 0px;
    padding: 0px;
    /*height: 300px; */
    width: 246px;
    /*border: 1px solid #CCC; */
}

#MainContent_sideBar {
    float: left;
    margin: 0px;
    padding: 0px;
    /*height: 300px; */
    width: 233px;
    /*border: 1px solid #CCC; */
}

#toolBarContainer {
    /*background: no-repeat url(/_designer/_images/tool_bar_bg_text.png) -14px -7px;*/
    /*border: 1px dashed #999; */
    background-color: #f3f3f3;
    background-size: cover;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    /*background: #A0CDF4;*/
    float: left;
    height: 108px;
    margin-right: 0px;
    position: relative;
    /*width:699px*/
    width: 100%;
}

/* 30px height.  12 + 9*2 = 30px.   12px text, then 9px padding top/bottom.  0px border */

#userMsg {
    background: #FFF;
    float: left;
    height: 12px;
    margin-bottom: 10px;
    margin-right: 0px;
    margin-top: 10px;
    padding: 9px 6px;
    width: 100%;
}

#canvasContainer {
    background: #FFF;
    float: right;
    height: auto;
    margin: 0 auto;
    min-height: 231px;
    overflow: auto;
    position: relative; /* Ref Point.. So we can start placing items like sissors etc. */
    width: 695px;
}


#bleedLineContainer {
    border: 1px dashed #999;
    height: 386px;
    left: 20px;
    /* [disabled]margin-left:20px; */
    /* [disabled]margin-top:10px; */
    position: absolute;
    top: 10px;
    width: 643px;
}


#pageBoundryContainer {
    /* [disabled]margin:20px 20px; */
    /*
	margin-left:20px;
	margin-top:10px; */
    background: #CBE082;
    /*width: 623px; */
    border: 2px solid #999;
    height: 340px;
    left: 42px;
    position: absolute;
    top: 32px;
    width: 598px;
}

#safeZoneLightBoxContainer {
    /* [disabled]margin:20px 20px; */
    border: 1px dotted #999;
    height: 297px;
    left: 64px;
    position: absolute;
    top: 54px;
    width: 556px;
}

#sissorsContainer {
    background-image: url(/_designer/_images/scissors.png);
    height: 33px;
    left: 634px;
    position: absolute;
    top: 8px;
    width: 36px;
}


/*============================================================
  GESP SideBar Initial Styles 7/15/12
============================================================*/

.sideBarHeaderFirst {
    background: #015f90;
    background: url("/_designer/_images/blue-heading-233.png") no-repeat scroll left top transparent;
    height: 40px;
}

.sideBarHeader { height: 40px; }

/* from paragraphText .. only White. */

.sideBarHeader p, .sideBarHeaderFirst p {
    color: #3b3d40;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 12.5px;
}

/* Add paddng TODO figure out inheratence */

/* from paragraphText .. only White. */

.sideBarContentSection p { padding: 2px 0; }

.sideBarContentSection {
    /*border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    border-left: 1px solid #dedede;*/
    background-color: #fff;
    padding: 10px;
}

/* Upload Image Warning Content */

.dtWarningContent {
    background-color: #ffd364;
    border: 1px solid #CCC;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
    display: none;
    margin: 25px auto;
    margin: 0px, auto;
    min-height: 60px;
    padding: 10px 0px 10px 10px;
    text-align: center;
    text-align: left;
    width: 100%;
}

.dtWarningContent p { padding: 2px 0; }

.dtWarningContentBig {
    background-color: #ffd364;
    border-radius: 4px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
    display: none;
    height: 78px;
    margin: 0px auto;
    margin: 0px, auto;
    padding: 8px;
    text-align: center;
    text-align: left;
    width: 100%;
}

.dtWarningContentBig p { padding: 3px 0; }

.dtWarningContentLeft {
    background-image: url(/_designer/_images/errorMessage.svg);
    background-repeat: no-repeat;
    background-size: 80% 60%;
    float: left;
    font-weight: bold;
    height: 60px;
    line-height: 32px;
    padding-left: 10px;
    width: 35px;
}

.dtWarningContentRight {
    overflow: auto;
    width: 360px;
    width: calc(100% - 60px);
    word-wrap: break-word;
}

.dtWarningContentRight .paragraphWarningText {
    color: #3b3d40;
    font-size: 12px;
    text-align: left;        
}

/* dtwarningWordExcel */

.dtwarningWordExcel {
    height: 130px !important;
    height: 155px !important;
    +
    margin: 5px auto !important;
    width: 100% !important;
}

.dtwarningWordExcel .dtWarningContentRight { width: calc(100% - 60px) !important; }

.dtwarningWordExcel p { padding: 2px 0; }

.dtWarningContentRight .liTop { padding-top: 5px !important; }

.dtWarningContentRight .liBottom { padding-bottom: 4px !important; }

/* dtwarningWordExcel end */

/* dtWarningPdf */

.dtWarningPdf {
    height: 80px !important;
    margin: 5px auto !important;
    width: 100% !important;
}

.dtWarningPdf .dtWarningContentRight { width: calc(100% - 60px) !important; }

/* warningPdf end */

.paragraphTextBlue {
    color: #0A74C7;
    font-size: 14px;
    font-weight: normal;
}

.paragraphTextRed {
    color: #000000;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
}


.designTemplateHeader {
    font-size: 12px;
    font-weight: bolder;
    line-height: 20px;
    margin-top: 7px;
    +
    margin-top: 0px;
    padding-top: 3px;
    width: 165px;
}

.designTemplateClearDiv {
    float: right;
    font-size: 10px;
    margin-right: 5px;
    margin-top: -17px;
    text-align: right;
    width: 40px;
}

.imgDesignTemplate { border: 1px solid #CCCCCC; }

/* Std Items */

select { width: 150px; }

/* Handle Tabs in Tool Bar  Pos Absolute, and just change the BG Image
when selected.  -- How to know which one is selected ?maybe dont matter */

.nav li a {
    color: #3b3d40;
    display: block !important;
    font-size: 14px;
    font-weight: normal;
    height: 28px;
    padding-top: 7px; /* Vert Center */
    text-align: center;
    text-decoration: none;
}


#tabText {
    height: 28px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 75px;
    /*	border:red dashed thin;
*/
}

#tabImages {
    height: 28px;
    left: 90px;
    position: absolute;
    top: 0;
    top: 2px;
    width: 75px;
    /*	border:blue dashed thin;
*/
}

#tabAlignment {
    height: 28px;
    left: 192px;
    position: absolute;
    top: 2px;
    width: 75px;
    /*	border:orange dashed thin;
*/
}

.nav li { border: none; }

.nav li.selected {
    border: solid 1px #f3f3f3;
    border-bottom-color: rgb(10, 116, 199);
    border-bottom-width: 2px;
}

.nav li.selected a { }

/*
        <div id="tabText"> hi </div>
        <div id="tabImages"> hi </div>
        <div id="tabAlignment"> hi </div>
		*/




/* CSS 3 Tests */

.roundedTop {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}


/*============================================================
  GESP 7/23/12 safeZoneLightBoxContainer Absolute
  Positioned Elements. Draggable
============================================================*/

#safeZoneLightBoxContainer div {
    border: dashed 1px #999;
    font-size: 12px;
    padding: 2px;
    width: 225px;
}

/* Calcs: 12px + 2p*2 padding, 2px for border = 18px.
 Now add 5px vertical for 18 + 5 = 23px for each one. */

#addressLine1 {
    left: 10px;
    position: absolute;
    top: 225px;
}

#addressLine2 {
    left: 10px;
    position: absolute;
    top: 248px;
}

#addressLine3 {
    left: 10px;
    position: absolute;
    top: 271px;
}



#companyName {
    left: 325px;
    position: absolute;
    top: 20px;
}

#message {
    left: 325px;
    position: absolute;
    top: 43px;
}

#fullName {
    left: 325px;
    position: absolute;
    top: 66px;
}

#jobTitle {
    left: 325px;
    position: absolute;
    top: 89px;
}




#emailOther {
    left: 325px;
    position: absolute;
    top: 202px;
}

#webOther {
    left: 325px;
    position: absolute;
    top: 225px;
}

#phoneOther {
    left: 325px;
    position: absolute;
    top: 248px;
}

#faxOther {
    left: 325px;
    position: absolute;
    top: 271px;
}

/*============================================================
  GESP 7/23/12 Image Elements and Decorations for Canvas Area
============================================================*/



#bleedLineBubble {
    /*7/27/12 GESP Changed Bubbles from gif to .png from Creatvie for Testing*/
    /*background-image:url(/_designer/_images/BLUEQuestionMarkBubble.gif);*/
    background-image: url(/_designer/_images/BLUEQuestionMarkBubble.png);
    background-repeat: no-repeat;
    height: 22px;
    left: 665px;
    position: absolute;
    top: 60px;
    width: 25px;
}

#pageBoundryBubble {
    background-image: url(/_designer/_images/BLUEQuestionMarkBubble.png);
    background-repeat: no-repeat;
    height: 22px;
    left: 644px;
    position: absolute;
    top: 120px;
    width: 25px;
}

#safeZoneBubble {
    background-image: url(/_designer/_images/BLUEQuestionMarkBubble.png);
    background-repeat: no-repeat;
    height: 22px;
    left: 621px;
    position: absolute;
    top: 180px;
    width: 25px;
}

#rulerTop {
    background-image: url(/_designer/_images/ruler-top.png);
    background-repeat: no-repeat;
    height: 21px;
    left: 40px;
    position: absolute;
    top: -10px;
    width: 625px;
}

#rulerLeft {
    background-image: url(/_designer/_images/ruler-left.png);
    background-repeat: no-repeat;
    height: 351px;
    left: 0px;
    position: absolute;
    top: 40px;
    width: 22px;
}




/*============================================================
  GESP 7/24/12 toolBarContainer Controls

  Design Notes:
  -Make position absolute with in div's for Text,
  Images, Alignment

  -Height of Tool Bar Inner section is 29px.
    -Icons are 22px High, e.g. bold is 20 x 22.
	-Adjust as you go along.
	-Maybe break ths out into seperate css for prototyping.

 Test Technique:  Add test class to body! then use the cascade
  to Outline wth borders .. isolate to tool bar div's etc.
  -- TODO toggle with jquery for clients.
  -- TODO Refactor and Make adjustments as needed.
  -- TODO Add jQuery test on Highlight or Click Handlers!
     -- Cool to add some basic behavior!

	 -- Try 5px margin between each icon..
============================================================*/

/* Thus any div in test mode for tool bar will have these styles */

/*
.testMode #toolBarContainer div {
	border:1px solid red;
	height:22px;
}
*/

/* Temp Hover behavior.  TODO Fix Text boxes. */

/*#toolBarContainer div :hover {
	border:#666 dotted 1px;
	margin-left:1px;
	margin-top:1px;

}*/


/* Tool Bar Top Section --Magnifying Glass etc. */

#toolBarTopSection {
    position: absolute;
    right: 8px;
    top: 5px;
    width: 400px;
}

#magnifyMinusCtrl {
    background-image: url(/_designer/_images/magnifyMinus.png);
    background-repeat: no-repeat;
    float: right;
    height: 22px;
    position: relative;
    top: 3px;
    width: 25px;
}

#magnifySliderCtrl {
    background-image: url(/_designer/_images/magnifySlider.png);
    background-repeat: no-repeat;
    float: right;
    height: 22px;
    width: 90px;
}

#magnifyPlusCtrl {
    background-image: url(/_designer/_images/magnifyPlus.png);
    background-repeat: no-repeat;
    float: right;
    height: 22px;
    position: relative;
    top: 3px;
    width: 25px;
}

#magnifyPlusCtrl.toolBarFrontBack { left: 520px; }

#frontBackContainer {
    float: right;
    overflow: hidden;
    right: 0px;
    top: 0px;
}

/*
#frontBackContainer .active {
	font-weight:bold;
	background:url(/_designer/_images/front-back-bg.png) top left no-repeat;
}
*/

#frontBackContainer p {
    background-size: cover;
    border: 1px solid transparent;
    border-radius: 3px;
    box-sizing: border-box;
    color: #0a74c7;
    float: left;
    font-family: Lato;
    font-size: 13px;
    font-weight: 700;
    height: 25px;
    line-height: 25px;
    margin-left: 5px;
    text-align: center;
    text-decoration: none solid rgb(10, 116, 199);
    /*
	font-size:12px;
	width:60px;
	padding:4px;
	border:1px solid #CCC;
	background:#efefef;
	text-align:center;
	*/
    width: 60px;
}

#frontBackContainer p.active {
    background-color: #ffffff;
    border-color: #0a74c7;
}

#frontBackContainer p:hover {
    background-color: #b4d6ee;
    border-color: transparent;
}

#frontSideText:before { content: 'Front'; }

#frontSideText.active { }

#backSideText:before { content: 'Back'; }

#backSideText.active { }

#insideText:before { content: 'Inside'; }

#insideText.active { }

#frontText:before { content: 'Front'; }

#frontText.active { }

/* End Tool Bar Top Section */

/* Tool Bar Text Controls Tab */

#textCtrls {
    left: 6px;
    position: relative;
    top: 32px;
}

/* End Tool Bar Text Controls Tab */


/* Tool Bar Image Controls Tab */

#imageCtrls {
    display: none; /* hide on start up to show text tab */
    left: 6px;
    position: relative;
    top: 32px;
}

/* End Tool Bar Image Controls Tab */

/* Tool Bar Alignment Controls Tab */

#alignmentCtrls {
    display: none;
    left: 6px;
    position: relative;
    top: 32px;
}

/* End Tool Bar Alignment Controls Tab */


/* Tool Bar Bottom Section */

#toolBarBottomSection {
    left: 6px;
    position: absolute;
    top: 66px;
}

/* End Tool Bar Bottom Section */

/*============================================================
  END toolBarContainer Controls
============================================================*/





/*============================================================
  Generic for jQuery UI
  -- Also see jquery-ui-1.8.x.custom.css
============================================================*/

/* Fix buttons in Dialog -- to do make for generic jQuery Dialogs --REFACTOR later and beAgile man.. You won't get it all at once,
if you try you will go toooo Slow and be :(.. so go FAST and be :) and refactor */

/*#pcContentWrapper */

/* .. Now, fix for custom dialog !...*/

#designTemplate .btnSectLeft a.btn_primary, #designTemplate .btnSectLeft a.btn_action {
    margin-left: 0px;
    margin-top: 0px;
}

#designTemplate .btnSectRight a.btn_primary, #designTemplate .btnSectRight a.btn_action {
    margin-right: 35px;
    margin-top: 0px;
}

#printConfirm {
    height: calc(100% - 50px);
    position: absolute;
}

#printConfirm .btnSectLeft a.btn_primary, #printConfirm .btnSectLeft a.btn_action { margin-left: 0px; }

#printConfirm .btnSectRight a.btn_primary, .#printConfirm .btnSectRight a.btn_action { margin-left: 0px; }

#printConfirm {
    height: calc(100% - 50px);
    position: absolute;
}



/*============================================================
  END  Generic for jQuery UI
============================================================*/


/*============================================================
  Custom Dialog Support
  --  8/24/12 Custom Dialog
  -- IE7 not playing with rounded corners
  -- Need more customization!
============================================================*/



#ppe-dialog-top {
    background-color: #ffffff;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    color: #3b3d40;
    height: 47px;
    margin-bottom: 10px;
}

#ppe-dialog-top-right {
    background-color: #ffffff;
    height: 47px;
    margin-right: 0px;
}

#ppe-dialog-bottom {
    background: url(/_designer/_images/ppe-dialog-footer-l.png) bottom left no-repeat;
    height: 10px;
    /*margin-left:-1px;*/
}

#ppe-dialog-bottom-right {
    background: url(/_designer/_images/ppe-dialog-footer-r.png) bottom right no-repeat;
    height: 10px;
    /*margin-right:-1px; */
}

#printConfirm #ppe-dialog-bottom { height: 20px; }

#printConfirm #ppe-dialog-bottom-right {
    height: 20px;
    /*margin-right:-1px; */
}

#ppe-dialog-top h1 {
    float: left;
    font-size: 16px;
    padding-left: 20px;
    padding-top: 15px;
}

.ppe-dialog-toph1 {
    float: left;
    font-size: 16px;
    padding-left: 20px;
    padding-top: 10px;
}

/* Style Title Close Button */

#ppe-dialog-top h2 {
    background: url('/_designer/_images/close.svg') no-repeat left 50%;
    cursor: pointer;
    float: right;
    font-size: 13px;
    height: 25px;
    margin-right: 10px;
    padding-right: 30px;
    padding-top: 18px;
}

.ppe-dialog-toph2 {
    background: url('/_designer/_images/close25.png') no-repeat right 50%;
    float: right;
    font-size: 13px;
    height: 25px;
    margin-right: 10px;
    padding-right: 25px;
    padding-top: 13px;
}

/* quick for testing. They might like something else..nothing specified */

#ppe-dialog-top a {
    color: #3b3d40;
    right: 0;
    z-index: 1;
}

/* quick for testing. They might like something else..nothing specified */

#ppe-dialog-top a :hover { color: #777; }

/* TODO no work. not in spec, but would make extra nice. */

#dtIndustry a img :hover { margin-left: 6px; }

/* Z-index of #mask must lower than #boxes .window */

#divMask {
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    /*background:#000; */
    background: url("/_designer/_images/ui-bg_diagonals-thick.png") repeat scroll 50% 50% #666666;
    /* hide it by default */
    display: none;
    /* transparency for different browsers */
    filter: alpha(opacity=50);
    height: 100%;
    left: 0;
    opacity: 0.5;
    /* make sure it appear behind the dialog box but above everything else */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 900;
}

/* Actual Dialog */


#divPopUp {
    background-color: #ffffff;
    display: none;
    padding: 0px;
}

#divPopUpImage {
    background-color: #ffffff;
    display: none;
    padding: 0px;
}

/* Next to Fine Tune it */

#dialog_overlay-2 {
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    /*background:#000; */
    background: url("/_designer/_images/ui-bg_diagonals-thick_20_666666_40x40.png") repeat scroll 50% 50% #666666;
    /* hide it by default */
    display: none;
    /* transparency for different browsers */
    filter: alpha(opacity=50);
    height: 100%;
    left: 0;
    opacity: 0.5;
    /* make sure it appear behind the dialog box but above everything else */
    position: absolute;
    top: 0;
    /* set it to fill the whil screen */
    width: 100%;
    z-index: 3000;
}

/*dialog wide class items */

.ppe-dialog { }

.designTemplate {
    /* background:red;  Great for Debugging ie7 etc.*/
    color: #3b3d40;
    /*width: 880px;*/
    /* height:770px; let it auto size */
    display: none;
    padding: 0px; /* so we can get the dialog headers and footers in */
    position: fixed;
    z-index: 10000;
}

/*============================================================
  Print Confirm Dialog/LightBox (Jquery UI Dialog)
  -- Also see jquery-ui-1.8.x.custom.css
============================================================*/

#pcContentWrapper {
    background: #FFF;
    padding-left: 20px;
}

#pcPageWrapper {
    background: #FFF;
    /*margin:10px;  ?? place holder for now dude.*/
    /*border: 1px solid orange; */
    padding-left: 20px;
}

#pcImageContainer {
    position: relative;
    width: 350px;
}

#pcImage { border: 1px solid #CCCCCC; }

#pcImageHeader {
    margin: 7px 0px 5px 0px;
    width: 350px;
}

#pcImageHeader h1 {
    float: left;
    font-size: 16px;
    margin-bottom: 5px;
}

#pcImageHeader p {
    float: right;
    margin-bottom: 5px;
}

#pcContentWrapper .paragraphText { margin: 0px 0px 10px 5px; }

#pcBottomText { margin: 10px 0px 10px 0px; }

/* Need to isolate the text at the bottom */

#pcBottomText .paragraphText { margin: 0px 0px 10px 5px; }

#pcBottomText .paragraphTextBlue { margin: 20px 0px 0px 5px; }



/*============================================================
  END Print Confirm Dialog
============================================================*/





/*============================================================
  Design Template (dt) Dialog/LightBox (Jquery UI Dialog)
  -- Also see jquery-ui-1.8.x.custom.css
============================================================*/


/****************************
* Main Page Structural
* Containers
****************************/

.dtHorizontalRule {
    background: url(/_designer/_images/horizontalRule_726px.png);
    float: left; /* Since were in the mix */
    height: 1px;
    margin: 10px 0px;
    width: 160px;
}

#dtPageWrapper { padding-right: 20px; }

.stockLogoTab #ppe-dialog-top a { position: absolute; }

.stockLogoTab #dtPageWrapper {
    max-width: none;
    padding-right: 0;
    padding-top: 52px;
    position: absolute;
    top: 0;
    width: 100%;
}

.stockLogoTab #dtPageWrapper > .logoTabs {
    position: relative;
    z-index: 1;
}

.stockLogoTab #dtPageWrapper > #divStockLogo {
    position: absolute;
    top: 0;
    width: 100%;
}

.stockLogoTab #dtPageWrapper > #divStockLogo > iframe { background: transparent !important; }

.uploadImageBodyNew.searchTop #dtSearch.stockLogoSearch {
    margin-top: 0;
    position: relative;
}

.uploadImageBodyNew.searchTop { background: transparent; }

.uploadImageBodyNew.searchTop > form { padding-top: 80px; }

.uploadImageBodyNew.searchTop > form .input_newstyle > .input_content_text { width: 550px; }

@media screen and (min-width: 601px) {
    .uploadImageBodyNew.searchTop > form .input_newstyle {
        position: absolute;
        top: -100px;
    }

    .uploadImageBodyNew.searchTop #dtSearch.stockLogoSearch { margin-left: 270px; }
}

#dtHeader {
    height: 20px;
    padding-bottom: 6px;
    padding-left: 20px;
    width: 850px;
}

#dtSearch {
    margin-left: 330px;
    margin-top: -77px;
    position: absolute;
}

#dtSearchIcon {
    background: url('/_designer/_images/search.svg') no-repeat right 50%;
    height: 25px;
    margin-right: 10px;
    padding-top: 13px;
    width: 25px;
}

#dtContentWrapper {
    height: 535px;
    /*overflow-y:scroll;*/
    margin-top: 10px;
    padding-left: 10px;
    /*border: 1px solid red; */
    width: 865px;
}

#dtContentWrapperBig {
    height: 535px;
    margin-top: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-left: 10px;
    /*border: 1px solid red; */
    width: 885px;
}

#dtLeftSideBar {
    /*height:650px; */
    display: inline-block; /* ie double margin bug */
    float: left;
    margin: 0px;
    width: 180px;
}

#dtLeftSideBarBig {
    /*height:650px; */
    display: inline-block; /* ie double margin bug */
    float: left;
    margin: 0px;
    width: 200px;
}

#dtMainContent {
    /*border: 1px solid #FF3; */
    float: right;
    margin-left: -20px;
    /*width:650px;*/
}

#dtMainContentBig {
    /*border: 1px solid #FF3; */
    float: right;
    margin-left: -20px;
    /*width:650px;*/
}

/****************************
* Details for Each Container
****************************/

/*
* Details for dtHeader
*/

/* to get the text box to be right justified. */

#dtHeader .input_newstyle { float: right; }

#dtHeader #dtInstructions {
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin-top: 10px;
}

#dtHeader #dtSearchCount {
    float: right;
    font-size: 12px;
    font-weight: bold;
    margin-right: 7px;
    margin-top: 4px;
}


/* Override the fonts and text for Jquery Form elements for this container.  TODO maybe need for entire page! Or jquery custom line 58  */

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size: 0.7em; }


/*
*Details for leftSideBar
-- more generic at the top
*/

/* so the More fits */

#dtLeftSideBar ul li.dtLastItem { margin-bottom: 0px; }

#dtLeftSideBar .more { margin-bottom: 0px; }

#dtLeftSideBarBig ul li.dtLastItem { margin-bottom: 0px; }

#dtLeftSideBarBig .more { margin-bottom: 0px; }

#dtRefineBy {
    background: #f0f0f0;
    height: 35px;
    margin: 0px;
    position: absolute;
    width: 180px;
}

#dtRefineByBig {
    background: #f0f0f0;
    height: 35px;
    margin: 0px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.onlyHeight {
    height: 35px;
    width: 100%;
}

#dtRefineBy h1 {
    float: left;
    font-size: 17px;
    margin: 5px;
}

#dtRefineByBig h1 {
    float: left;
    font-size: 17px;
    margin: 5px;
}

#dtRefineBy .paragraphTextBlue {
    float: right;
    margin: 8px;
}

#dtRefineByBig .paragraphTextBlue {
    float: right;
    margin: 8px;
}

#dtLeftSideBar .expandSection {
    background: #f0f0f0;
    margin-top: 10px;
}

#dtLeftSideBar ul li {
    font-size: 9px;
    /* Custom for IE7, IE8.  See specfic css for them, as double margin bug */
    margin: 8px 0px 0px 10px;
}

#dtLeftSideBar h2 {
    float: left;
    font-size: 16px;
    margin: 5px;
}

.dtLeftSideBarh2 {
    float: left;
    font-size: 16px;
    margin: 5px;
}

#dtLeftSideBar .paragraphTextBlue {
    float: right;
    margin: 8px;
}

#dtLeftSideBar .paragraphTextBlue.more { /*margin-top:0px; */ }

#dtLeftSideBarBig .expandSection {
    background: #f0f0f0;
    margin-top: 10px;
}

#dtLeftSideBarBig ul li {
    font-size: 9px;
    /* Custom for IE7, IE8.  See specfic css for them, as double margin bug */
    margin: 8px 0px 0px 10px;
}

#dtLeftSideBarBig h2 {
    float: left;
    font-size: 16px;
    margin: 5px;
}

#dtLeftSideBarBig .paragraphTextBlue {
    float: right;
    margin: 8px;
}

#dtLeftSideBarBig .paragraphTextBlue.more { /*margin-top:0px; */ }

/*
* Details for dtMainContent
*/

#dtControlBar {
    /* Should closley Match dtRefneBy */
    background: none repeat scroll 0 0 #F0F0F0;
    color: #3b3d40;
    font-size: 12px;
    height: 35px;
    margin: 10px 0;
    margin: 0px;
    position: absolute;
    text-align: left;
    width: 646px;
}

#dtControlBarLeftContent {
    float: left;
    font-weight: bold;
    line-height: 32px;
    padding-left: 10px;
}

#dtControlBarRightContent {
    float: right;
    font-size: 10px;
    font-weight: bold;
    line-height: 32px;
    padding-left: 0px;
    padding-right: 11px;
}


#dtPageTitle {
    float: left;
    height: 20px;
    margin-left: 0px;
    padding-right: 5px;
}

#dtPage {
    background: url(/_designer/_images/current-page.png) 0px 7px no-repeat;
    float: left;
    padding-left: 7px;
    width: 23px;
}

#dtPageOf {
    float: left;
    padding-right: 5px;
}

#dtLeftArrow {
    float: left;
    height: 20px;
    margin-top: 8px;
    padding-right: 2px;
    width: 20px;
}

#dtRightArrow {
    float: left;
    height: 20px;
    margin-top: 8px;
    padding-left: 2px;
    width: 20px;
}

#dtRightSearch {
    float: right;
    margin-right: 5px;
}

/*
* Details for Actual Templates
*/

#dtTemplatesContainer {
    float: left;
    height: auto;
    overflow: auto; /* to get the Scroll Bars */
    /*border:1px blue solid;*/
    width: 650px;
}

#dtVerseContainer { }

#dtTemplatesContainerBig {
    float: left;
    height: auto;
    overflow: auto; /* to get the Scroll Bars */
    /*border:1px blue solid;*/
    width: 660px;
}

.dtTemplate {
    float: left;
    margin: 10px 20px 10px 0px;
    width: 190px; /* fix ie7 */
}

.dtTemplateImage {
    height: 108px;
    width: 190px;
}

.dtTemplateName {
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin: 5px 0px;
}

.dtTemplatePrice {
    float: right;
    font-size: 13px;
    font-weight: bold;
    margin: 5px;
}

.dtTemplates {
    float: left;
    margin-top: 13px;
    width: 214px;
}

.dtTemplatesNew {
    float: left;
    margin-top: 13px;
}

.dtTemplateImages {
    float: left;
    width: 100%;
    /*text-align:center;*/
}

.dtTemplateNames {
    font-size: 13px;
    /*float: left;*/
    font-weight: bold;
    /*padding-left: 5px;*/
    line-height: 15px;
    overflow: hidden;
    padding-top: 3px;
    text-align: center;
}

.dtStockLogoOrVerseNames {
    float: left;
    font-size: 13px;
    font-weight: bold;
    line-height: 15px;
    overflow: hidden;
    padding-left: 5px;
    padding-top: 3px;
}

.dtTemplateborder {
    height: 5px;
    width: 100%;
}

.dtStockLogo {
    float: left;
    margin-left: 0px;
    /*margin:10px 20px 10px 0px; */
    margin-top: 10px;
    width: 145px; /* fix ie7 155 to get 4 per line */
    /* vert center http://blog.themeforest.net/tutorials/vertical-centering-with-css/ */
}

.dtStockLogoImage {
    /*width:190px;*/
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.dtStockLogoName {
    font-size: 13px;
    /*float:left; */
    margin: auto;
    margin: 5px 0px;
    text-align: center;
}

.dtStockLogoImage img {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/*
FILE UPLOAD STYLES

help from: quirksmode.org/dom/inputfile.html
Note:
Different then the original :
	-change input.file to pos absolute
	-ie did not ack the z-index, and the absolute, so made button handle event.
	-FireFox did not handle button, but the absolute, and zorder worked.
	-TODO Clean up and move to style sheet after intial testing.
 */

.input_newstyle_152_dialog { }

#uploadMessageBar {
    background: none repeat scroll 0 0 #F0F0F0;
    font-size: 12px;
    font-weight: 600;
    height: 15px;
    margin-top: 10px;
    padding: 8px 6px;
    padding-left: 10px;
    width: 740;
}

#uploadBottomText {
    padding-left: 10px;
    padding-top: 5px;
}

#uploadBottomText .paragraphText { margin: 5px 0px 0px 0px; }

#uploadHeading .paragraphText {
    color: #3b3d40;
    font-size: 12px;
    font-weight: bold;
    padding-top: 20px;
}


div.fakefile {
    left: 0px;
    position: absolute;
    top: 0px;
    z-index: 1;
}

#divThumbnailLoader {
    color: red;
    display: none;
    font-size: 12px;
    font-weight: bold;
    margin: 10px 40px 10px auto;
    text-align: left;
}

#divCropHolder {
    display: none;
    left: 0pt;
    position: absolute;
    top: 0pt;
    visibility: visible;
    z-index: 3;
}

#divCrop {
    cursor: move;
    left: 0pt;
    position: absolute;
    top: 0pt;
    visibility: visible;
    z-index: 3;
}

#divCropHolder .divDragger {
    background-image: url(/_designer/_images/uploadImage/fill.gif);
    height: 100%;
    left: 0pt;
    overflow: hidden;
    position: absolute;
    top: 0pt;
    width: 100%;
    z-index: 2;
}

#divCropHolder #divlftImgB {
    background-image: url(/_designer/_images/uploadImage/marqueeLineV.gif);
    height: 0px;
    left: 0pt;
    position: absolute;
    top: 0pt;
    width: 1px;
    z-index: 3;
}

input.file {
    -moz-opacity: 0; /* comment out to test alignment of buttons */
    filter: alpha(opacity: 0);
    */
    height: 25px;
    left: 0px;
    opacity: 0;
    /* to cover button */
    /*position: relative; Hmm. not cool.  Made it abaolute. */
    text-align: right;
    /
    /*z-index: 1000; GESX-PPE
	z-index: 1000;
	position:absolute; /*making it relative had problems.. seems intuative that it should be absolute */
    top: 0px;
    width: 205px; /* Hack for IE8.. as the c:\fakefile security issue.  Make hidden button over the styled button!*/
}

/* ie6 hack */

* html input.file {
    height: 25px;
    text-align: top;
    width: 50px; /* to get it align over button for ie6, and fix ie security bug. */
}

#divUploadImage {
    display: none;
    height: 300px;
    overflow: auto;
    position: absolute;
    width: 95%;
}

#divUploadHtml {
    align-items: center;
    display: flex;
}


/* upload Progress Bar
 */

#uploadProgressBarContainer { padding-left: 5px; }

#uploadProgressBarImage { /* if needed for more control */ }

#uploadProgressBarText {
    color: #006699;
    font-size: 10px;
}

/* upload Crop
*/

#uploadCenterButtonRow {
    display: none;
    margin: auto;
    overflow: auto;
    padding-bottom: 20px;
    padding-top: 10px;
    text-align: center; /* for ie */
    width: 300px;
}

#warningLeaveCenterButtonRow {
    margin: auto;
    overflow: auto;
    padding-bottom: 20px;
    padding-top: 10px;
    text-align: center; /* for ie */
    width: 300px;
}

.warningLeaveCenterButtonRowRight {
    float: right;
    margin: auto;
    overflow: auto;
    padding-bottom: 20px;
    padding-top: 0px;
    text-align: center; /* for ie */
    width: 200px;
}

.uploadPreviewCropImageContainer {
    margin: auto;
    text-align: center; /* for ie */
    width: 550px;
}

.uploadCropImageContainer {
    margin: auto;
    text-align: center; /* for ie */
    width: 550px;
}

#choiceDescriptionOnWarningPage { margin-top: 10px; }

/* Upload Warning Container and contents :)
*/

#uploadWarningContainer {
    border: 1px solid #CCC;
    margin: auto; /* center */
    overflow: auto; /* for floats */
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    text-align: center; /* center for ie */
    width: 400px;
}

#uploadWarningImageContainer { padding-top: 10px; }

#uploadWarningTextContainer {
    float: left;
    padding: 5px;
    text-align: left;
    width: 340px;
}

.divUploadSwf { display: none; }

/* END FILE UPLOADS */

/* Warning Message Page */

.warnHeaderText { font-size: 14px; }

.warnContentText {
    font-size: 12px;
    padding-top: 4px;
}

.warnChoiceContentText {
    font-size: 12px;
    margin-top: 10px;
}

#warningRGBContainer {
    border: 1px solid #CCC;
    border-radius: 4px;
    margin: auto; /* center */
    overflow: auto; /* for floats */
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    text-align: center; /* center for ie */
}


#warningContainer, #PPIWarnContainer {
    background-color: #ffd364;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px 1px rgba(0, 0, 0, 0.2);
    margin: auto; /* center */
    overflow: auto; /* for floats */
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    text-align: center; /* center for ie */
}

#warningImageContainer {
    float: left;
    padding-top: 10px;
    width: 50px;
}

#warningTextContainer {
    float: left;
    padding: 5px;
    text-align: left;
    width: calc(100% - 70px);
}

#warningPageWrapper { padding-top: 10px; }

#warningCenterButtonRow {
    margin: auto;
    overflow: auto;
    padding-bottom: 20px;
    padding-top: 10px;
    text-align: center; /* for ie */
    width: 100px;
}

#warningContentWrapper {
    background: #FFF;
    padding-left: 20px;
    padding-right: 20px;
}


.warningImages {
    display: flex;
    flex-direction: row;
    height: auto;
    min-height: 160px;
    min-width: 300px;
    width: 100%;
}

.warningImage { float: left; }

/* Warning Message Page */

/* Numbering Location */

#numberingLocationContentWrapper {
    background: #FFF;
    padding: 0px 20px 10px 20px;
}

#numberingLocationPageWrapper { padding-top: 20px; }

#numberingLocationContainer {
    border: 1px solid #CCC;
    margin: auto; /* center */
    overflow: auto; /* for floats */
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    text-align: center; /* center for ie */
}

#numberingLocationTextContainer {
    float: left;
    max-height: 586px;
    padding: 10px;
    text-align: left;
}

.numberingLocationContentText {
    font-size: 12px;
    padding-top: 4px;
}

#warningImageContainer {
    float: left;
    padding-top: 5px;
    width: 60px;
}

#numberingLocationCenterButtonRow {
    margin: auto;
    overflow: auto;
    padding-top: 10px;
    text-align: center; /* for ie */
    width: 105px;
}

.helpText {
    color: #3b3d40;
    float: right;
    font-size: 14px;
    height: 35px;
    margin-top: 5px;
    text-align: left;
}

/* End Numbering Location*/

/* Actual Dialog */

#divWarningMask {
    -moz-opacity: 0.7;
    background: url("/_designer/_images/ui-bg_diagonals-thick.png") repeat scroll 50% 50% #666666;
    display: none;
    filter: alpha(opacity=70);
    height: 100%;
    left: 0%;
    opacity: .70;
    position: absolute;
    top: 0%;
    width: 100%;
    z-index: 1001;
}

#divWarningPopUp {
    background-color: #ffffff;
    display: none;
    left: calc(50% - 330px);
    max-width: 660px;
    overflow: hidden;
    position: absolute !important;
    top: 10%;
    width: 100%;
    z-index: 1002;
}

/* End Warning Message Page*/

/* Inspect Screen */

#inspectScreenContent {
    margin: auto;
    padding: 10px;
    text-align: center; /* for IE */
    width: 600px;
}

#inspectScreenFront h1 {
    color: #666;
    padding-bottom: 10px;
    text-align: left;
}

#inspectScreenFrontImageContainer { border: solid 1px #666; }

#inspectScreenBack h1 {
    color: #666;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: left;
}

#inspectScreenFrontImageContainer { border: solid 1px #666; }

/* END FILE UPLOADS */

/*============================================================
  END Popup Dialog
============================================================*/

.PopupLeftText {
    float: left;
    line-height: 15px;
    padding-top: 3px;
    width: 120px;
}

.PopupLeftCheckBox { float: left; }

.PopupLeftTextBig {
    float: left;
    line-height: 15px;
    padding-top: 2px;
}

.PopupLeftCheckBoxBig {
    float: left;
    padding: 1px 5px;
}

.scolldiv {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

#sideBar a { text-decoration: none; }

/*********************************
Form Numbering Light Boxes
 -- Note only really use <label>
 for basic forms.. this is to custom
 -NO <BR>
*********************************/

.numberingRadioRow {
    height: 3px;
    padding-bottom: 8px;
}

.overTopControlLabel { padding: 3px 0 5px 0; }

#formNumberingContainer select { width: 200px; }

#formNumberingContainer label {
    color: #3b3d40;
    font-size: 12px;
    padding-left: 10px;
}

#formNumberingTypeContainer { padding: 10px 0 0 10px; }

label.radio { color: red; }

/*
none
consecutive
*/

.formNumberingDetailsContainer {
    display: none;
    margin-left: 50px;
}

/* trick height palce holder for show hide */

#formNumberingDetailsContainerStatic { height: 94px; }

.customFormNumbering #formNumberingDetailsContainerStatic { height: 140px; }

.formNumberingDetailsContainer label { padding: 0px 0px 5px 0px !important; }

.startRequired {
    color: #eda774;
    float: left;
    font-size: 12px;
    height: 15px;
    margin-left: 10px;
    margin-top: 10px;
}

.input_FormNumbering_content_text { /*update new logic 2010_9_7*/
    float: left;
    height: 22px;
    width: 160px;
}

.input_FormNumbering_content_text input {
    background: transparent;
    border: 0 none;
    color: #3b3d40;
    font-size: 11px;
    margin: 4px;
    outline: none;
}

#pcContentWrapper .paragraphText_FormNumbering {
    margin: 0px 0px 10px 0px;
    padding: 0px;
    padding-bottom: 5px;
}

/***********************
END FORM NUMBERING
***********************/

/* Z-index of #mask must lower than #boxes .window */

#dialog-overlay {
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    /*background:#000; */
    background: url("/_designer/_images/ui-bg_diagonals-thick_20_666666_40x40.png") repeat scroll 50% 50% #666666;
    /* hide it by default */
    display: none;
    /* transparency for different browsers */
    filter: alpha(opacity=50);
    height: 100%;
    left: 0;
    opacity: 0.5;
    /* make sure it appear behind the dialog box but above everything else */
    position: absolute;
    top: 0;
    /*
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
  */
    width: 100%;
    z-index: 1900;
}

/***********************
HELP DIALOG
-id=helpDialog
-Additions to the std
-design template css
***********************/

#helpDialog {
    background-color: #ffffff;
    display: none;
    padding: 0px;
}


#helpDialog #dtMainContent {
    width: 710px;
    /*height:100px; */
}

/* for now same as editDesignOptionLink TODO refactor */

.helpLinks {
    color: #006699;
    font-size: 10px;
    text-decoration: none;
}

/***********************
Help Left Sidebar
***********************/

#helpDialog #dtLeftSideBar { width: 120px; }

#helpDialog #dtLeftSideBar h2 {
    font-size: 13px;
    margin: 10px 5px 5px 5px;
}

#dtHelpExpandControl {
    float: left;
    height: 12px;
    margin: 10px 5px 5px 5px;
    width: 12px;
}

#helpDialog #dtLeftSideBar ul { padding-bottom: 10px; }

/***********************
End Help Left Sidebar
***********************/

/***********************
Help Main Content Area
***********************/

#helpDialog #dtTemplatesContainer {
    height: 500px;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 700px;
}

.helpContentSection { margin-bottom: 30px; }


.helpHeading {
    font-size: 14px;
    margin: 10px 0px;
}

h3.helpHeading { font-size: 12px; }

.helpImages {
    margin: 10px;
    margin-left: 20px;
    /*border:1px solid #EEE; */
    padding: 10px;
}

.helpImagesFullWidth { width: 600px; }

.helpParagraphText {
    color: grey;
    margin: 0px 10px 0px 10px;
    padding: 10px 0px;
}

.helpNumber { }

#helpDialog .dtHorizontalRule { float: none; }

/* Orderd List for Help Dialog - vs. the OL with images dispersed
 -- Note, undo the reset.css with list-style-type - Decimal*/

#helpDialog ol {
    counter-reset: item;
    margin-left: 20px;
}

#helpDialog ol li {
    list-style: decimal;
    margin-left: 30px;
    padding: 3px;
}





/* *****************
INDIVIDUAL SECTIONS  of Content Area
-- for easy customization and scaling when needed
Notice Naming is imageName{Box}
 -Each sectio had ID for reference from Nav
 -Notice how Sections and class headings match
 requiremetns doc for traceability.
 -Notice naming conventions for future Programability.
*********/

/* Text Entry/Edits
*/

#textEntryEditsBox { /*height:211px;*/ }

#textEntryEditsImageBox {
    /*width:600px; */
    margin-left: 0px;
}

#symbolsBox { /*height:278px;*/ }

/* Text Selection
*/

#textSelectionBox { /*height:552px;*/ }

#textSelection1ImageBox { width: 200px; }

#textSelection2ImageBox { width: 200px; }

#textSelection3ImageBox { width: 200px; }


/* Text Resizing
*/

#textResizingEditsBox { /*height:448px;*/ }

#textResizing1ImageBox { width: 200px; }

#textResizing2ImageBox { width: 200px; }

#textResizing3ImageBox { width: 100px; }

/* Text Edits
*/

#textEditsBox { /*height:494px;*/ }

#textEditsTabImageBox {
    /*width:600px; */
    margin-left: 0px;
}

#imagestextAlignmentNewHelpImageBox {
    margin-left: 50px;
    width: 100px;
}

/* Images
*/

#imagesBox { /*height:872px;*/ }

#imagesTabImageBox {
    /*width:600px; */
    margin-left: 0px;
}

#imagesAddStockLogosImageBox {
    border: none;
    margin-left: 100px;
    text-align: center;
    width: 400px;
}

#imagesAddShapesImageBox {
    margin-left: 50px;
    width: 100px;
}

/* Text/Image MOvement:
 */

#textImageMovementBox { /*height:377px;*/ }

#textImageMovementMouseImageBox { width: 50px; }

#textImageMovementKbdImageBox { width: 100px; }

/* Alignment
*/

#alignmentBox { /*height:776px;*/ }

#alignmentTabImageBox {
    /*width:600px; */
    margin-left: 0px;
}

#alignmentTextAlignImageBox { width: 100px; }

#alignmentPositionImageBox { width: 150px; }

#rotateNewHelpImageBox { width: 150px; }

#alignmentRotate1ImageBox {
    float: left;
    height: 25px;
    width: 75px;
}

#alignmentRotate2ImageBox {
    float: left;
    height: 25px;
    width: 150px;
}

/* Uploading Custom Images/Crop:
*/

#uploadCustomImagesCropBox p { padding: 5px; }


#uploadCustomimagesImageBox {
    /*width:600px; */
    margin-left: 0px;
}

#uploadReviewArtworkImageBox {
    /*width:600px; */
    margin-left: 0px;
}

#uploadEditButtonImageBox { width: 100px; }

/* Resizing Images
*/

#resizingImagesBox { }

#resizingImages1ImageBox { width: 150px; }

#resizingImages2ImageBox { width: 175px; }

#resizingImages3ImageBox {
    float: left;
    width: 200px;
}

#resizingImages4ImageBox {
    float: left;
    width: 200px;
}

/* Layering
*/

#layeringBox { }

#layering1ImageBox { width: 150px; }

#layering2ImageBox {
    float: left;
    width: 100px;
}

#layering3ImageBox {
    float: left;
    width: 100px;
}

#layering4ImageBox {
    float: left;
    width: 100px;
}

#layering5ImageBox {
    float: left;
    width: 100px;
}


/* Undo/Redo
*/

#undoRedoBox { }

#undoRedoImageBox { width: 150px; }

/* Zoom In/Out
*/

#zoomInOutBox { }

.helpZoomImageBox {
    margin-left: 10px;
    width: 35px;
}

.bcZoom { width: 500px; }



/* Product Margins
*/

#productMarginsBox { }

#productMarginsImageBox {
    border: none;
    margin-left: 0px;
}

/* Front Back
*/

#helpFrontBack { }

#frontBackImageBox {
    margin-left: 0px;
    width: 200px;
}



/***********************
END Help Main Content Area
***********************/



/***********************

END HELP DIALOG

***********************/


/***********************
END Help Main Content Area
***********************/

#simpleToolbarContainer, #basicToolbarContainer {
    background-color: #f3f3f3;
    background-size: cover;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    margin-right: 0px;
    /*background: #A0CDF4;*/
    /*float: left;*/
    min-height: 38px;
    padding-left: 15px;
    position: relative;
    width: 100%;
}

#simpleToolbar li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#simpleToolbar li a.color-direct {
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    display: block;
    margin: 4px;
    text-indent: -9999px;
}

#gotoAdvancedEditing {
    bottom: 0px;
    color: #069;
    font-weight: 700;
    position: absolute;
    right: 20px;
}

.paragraphDaqText {
    color: #C66802;
    font-size: 16px;
    margin-bottom: 8px;
}

.divOrientation {
    border: 1px solid #F0F0F0;
    height: 90px;
    margin: 0px;
    padding: 0px;
    width: 98%;
}

.divOrientationItem {
    float: left;
    width: 90px;
}

.divOrientationRadio {
    float: left;
    height: 20px;
    padding: 0px 5px;
    width: 20px;
}

.divOrientationText {
    float: left;
    height: 20px;
    padding-top: 5px;
    width: 50px;
}

.divOrientationDiv {
    float: left;
    padding-left: 20px;
    width: 55px;
}

.aspNetDisabled { cursor: default; }

.section {
    background: #f0f0f0;
    margin-top: 5px;
}

.divFormNumberRadio { margin-top: -3px; }

/* QR Code Warning Content */

#pcQRCodeContentWrapper {
    background: #FFF;
    color: #3b3d40;
    font-size: 12px !important;
    padding-left: 20px;
    text-align: left;
}

#pcQRCodeContentWrapper input { font-size: 12px; }

#pcQRCodeContentWrapper .spanText {
    padding-bottom: 5px;
    padding-top: 5px;
}

.qrCodePreviewArea {
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.qrCodeReviewCenterButtonRow {
    margin: auto;
    overflow: auto;
    text-align: center; /* for ie */
    width: 300px;
}

.qrCodeWarningContent {
    border: 1px solid #d2d2d2;
    height: 60px;
    margin: 25px auto;
    margin: 0px, auto;
    padding: 10px;
    text-align: center;
    text-align: left;
    width: 450px;
}

.qrCodeWarningContent p { padding: 2px 0; }

.qrCodeWarningContentLeft {
    background-image: url(/_designer/_images/uploadImage/Exclamation.gif);
    background-repeat: no-repeat;
    float: left;
    font-weight: bold;
    height: 60px;
    line-height: 32px;
    padding-left: 20px;
    width: 55px;
}

.qrCodeWarningContentRight {
    overflow: auto;
    width: 360px;
    word-wrap: break-word;
}

.qrCodeWarningContentRight .paragraphWarningText { color: #3b3d40; }

.qrCodeWarningContentRight .paragraphTextRed {
    color: #ff0000;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
}

.qrCodeSelectHeaderContainer { position: relative; }

.qrCodeSelectHeader {
    background-color: #ffffff;
    margin-left: 10px;
    padding-bottom: 5px;
    padding-right: 2px;
    position: absolute;
    top: -5px;
}

.qrCodeSelectDetails {
    padding-bottom: 5px;
    padding-top: 15px;
}

.qrCodeReviewHeader { padding-top: 15px; }

/* QR Code Warning Content End*/


.dtLeftSideBarBig {
    /*height:650px; */
    display: inline-block; /* ie double margin bug */
    float: left;
    margin: 0px;
    width: 23%;
}

.dtLeftSideBarBig .expandSection {
    background: #f0f0f0;
    margin-top: 10px;
    width: 100%;
}

.dtLeftSideBarBig ul li {
    font-size: 9px;
    /* Custom for IE7, IE8.  See specfic css for them, as double margin bug */
    margin: 8px 0px 0px 10px;
}

.dtLeftSideBarBig h2 {
    float: left;
    font-size: 16px;
    margin: 5px;
}

.dtLeftSideBarBig .paragraphTextBlue {
    float: right;
    margin: 8px;
}

.dtLeftSideBarBig .paragraphTextBlue.more { /*margin-top:0px; */ }

/* QR Code Warning Content End*/

.dtMainContentBig {
    float: right;
    margin-left: 0px;
    width: 76%;
}

.dtMainContentBigWithoutLeftSection { margin-right: 100px; }

.dtMainContentBig .dtControlBar {
    /* Should closley Match dtRefneBy */
    background: none repeat scroll 0 0 #F0F0F0;
    color: #3b3d40;
    font-size: 12px;
    height: 35px;
    margin: 10px 0;
    margin: 0px;
    position: absolute;
    text-align: left;
    width: 646px;
}

.dtMainContentBig .dtTemplatesContainer {
    float: left;
    height: auto;
    overflow: auto; /* to get the Scroll Bars */
    /*border:1px blue solid;*/
    width: 660px;
}



.dtMainContentBig .leftSearch { width: 450px; }

.dtNewMainContentBig {
    /*border: 1px solid #FF3; */
    float: left;
    margin-left: 6px;
    /*width:650px;*/
}


.dtNewMainContentBig .dtControlBar {
    /* Should closley Match dtRefneBy */
    background: none repeat scroll 0 0 #F0F0F0;
    color: #3b3d40;
    font-size: 12px;
    height: 35px;
    margin: 10px 0;
    margin: 0px;
    position: absolute;
    text-align: left;
    width: 846px;
}

.dtNewMainContentBig .leftSearch { width: 630px; }

.dtNewMainContentBig .dtTemplatesContainer {
    float: left;
    height: auto;
    overflow: auto; /* to get the Scroll Bars */
    /*border:1px blue solid;*/
    width: 850px;
}

.leftBtn {
    background: url(/images/previousPage.png) -3px -3px no-repeat;
    background-color: #ffffff;
    border: 1px solid #cfd3d6;
    border-radius: 3px;
    cursor: pointer;
    float: left;
    height: 20px;
    width: 20px;
}

.leftBtnDisabled {
    background: url(/images/previousPage.png) -3px -3px no-repeat;
    border: 1px solid #cfd3d6;
    border-radius: 3px;
    cursor: default;
    float: left;
    height: 20px;
    width: 20px;
}

.rightBtn {
    background: url(/images/nextPage.png) -3px -2px no-repeat;
    background-color: #ffffff;
    border: 1px solid #cfd3d6;
    border-radius: 3px;
    cursor: pointer;
    float: left;
    height: 20px;
    width: 20px;
}

.rightBtnDisabled {
    background: url(/images/nextPage.png) -3px -2px no-repeat;
    border: 1px solid #cfd3d6;
    border-radius: 3px;
    cursor: default;
    float: left;
    height: 20px;
    width: 20px;
}

.paging_lbl { height: 15px; }

.paging_txt { height: 15px; }

#pageOfValue input {
    background-color: #ffffff;
    border: 1px solid #cfd3d6;
    border-radius: 4px;
    color: #6d7078;
    font-size: 12px;
    height: 20px;
    width: 25px;
}

#totalPages input {
    background-color: #F0F0F0;
    border: none;
    font-size: 12px;
    height: 20px;
    width: 25px;
}

.pagerIndex {
    float: left;
    height: 21px;
    line-height: 21px;
    margin-top: 6px;
}

.verseDivShadow {
    -moz-box-shadow: 3px 3px 4px #CCCCCC;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
    -webkit-box-shadow: 3px 3px 4px #CCCCCC;
    background-color: White;
    border: solid 1px #CCCCCC;
    box-shadow: 3px 3px 4px #CCCCCC;
    display: none;
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC');
    height: 380px;
    margin: 50px 100px 50px 100px;
    text-align: center;
    width: 400px;
    z-index: 100;
}

.closeBtn {
    background: url('/_designer/_images/close25.png') no-repeat right 50%;
    float: right;
    font-size: 13px;
    height: 25px;
    margin-right: 10px;
    padding-right: 25px;
    padding-top: 13px;
}

.verseZoomOutBtn {
    background: url(/_designer/_images/magnifyProductBtn.png) repeat-x scroll 0 0;
    float: right;
    height: 30px;
    width: 25px;
}

/* Bundle product popup Content start*/

#bundleContentWrapper {
    background: #FFF;
    color: #3b3d40;
    font-size: 12px !important;
    padding-left: 20px;
    text-align: left;
}

.bundleFrontImageArea {
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5px;
    text-align: center;
}

.bundleFrontImageArea #imgDesignTemplate { border: 1px solid #CCCCCC; }

/* Bundle product popup Content End*/


.fakefiles {
    border: solid 1px rgb(183, 186, 188);
    font-size: 11px;
    height: 20px;
    margin: 0px 6px 0px 0px;
    padding-top: 3px;
    width: 240px;
    z-index: 1;
}

.files {
    display: none;
    height: 25px;
    left: -3px;
    text-align: right;
    top: -7px;
    width: 60px;
}

#progress_info { font-size: 10pt; }

#progress {
    background: #FFFFFF url(/_designer/_images/btn_orange.png) repeat-x scroll 0 0;
    border: 1px solid #ccc;
    display: none;
    float: left;
    height: 14px;
}

#progress_percent { float: right; }

#upload_response {
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    background: -moz-linear-gradient(#bbb, #eee);
    background: -ms-linear-gradient(#bbb, #eee);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));
    background: -webkit-linear-gradient(#bbb, #eee);
    background: -o-linear-gradient(#bbb, #eee);
    background: linear-gradient(#bbb, #eee);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 5px #ccc;
    display: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');
    margin-top: 10px;
    overflow: hidden;
    padding: 20px;
}

.progressClass {
    background-color: rgb(243, 243, 243);
    border-bottom: 1px solid rgb(173, 176, 176);
    border-left: 1px solid rgb(173, 176, 176);
    border-right: 1px solid rgb(173, 176, 176);
    border-top: 1px solid rgb(128, 130, 131);
    height: 5px;
    width: 260px;
}

/*.progressClass::-moz-progress-bar { background: rgb(224,118,2); }
.progressClass::-webkit-progress-bar { background: #e6e6e6; }
.progressClass::-webkit-progress-value  { background: rgb(224,118,2)} */

.progressClass span {
    background-color: rgb(224, 118, 2);
    border: solid 1px red;
    float: left;
    height: 4px;
    width: 1px;
}

.uploadProgress {
    display: none;
    float: left;
    left: 0px;
    margin-top: 20px;
    width: 80%;
}

.progress_info {
    color: rgb(57, 90, 97);
    font-size: 10px;
    margin-top: 8px;
    width: 95%;
}

.progress_info span {
    color: rgb(57, 90, 97);
    font-size: 10px;
}

.pcSaveContentWrapper {
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 550px;
}

.qrSaveContentArea {
    color: #3b3d40;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    text-align: center;
    width: 550px;
}

#pcSaveContentWrapperLeft {
    background-color: #ffffff;
    height: 115px;
}

.qrSaveContentAreaLeft {
    color: #3b3d40;
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-top: 10px;
    text-align: left;
    width: 590px;
}

.qrSaveContentAreaLeft .divTop {
    padding-bottom: 4px;
    padding-top: 4px;
}

.qrSaveContentAreaLeft .divBottom {
    padding-bottom: 4px;
    padding-top: 7px;
}

.qrSaveContentArea div { padding-top: 5px; }

.btnSectRightSave a.btn_primary, .btnSectRightSave a.btn_action, .btnSectLeftSave a.btn_primary, .btnSectLeftSave a.btn_action {
    margin-top: 9px; /* V-CENTER BTN Added 6 to Staples 13 = 19 to center as Staples had that extra 6px top hdr cap */
}

.btnSectRightSave a.btn_primary, .btnSectRightSave a.btn_action {
    float: right;
    margin-right: 15px;
}

.btnSectLeftSave a.btn_primary, .btnSectLeftSave a.btn_action {
    float: left;
    margin-left: 15px;
}

.divStudioMask {
    -khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    /*background:#000; */
    background: url("/_designer/_images/ui-bg_diagonals-thick.png") repeat scroll 50% 50% #666666;
    /* hide it by default */
    display: none;
    /* transparency for different browsers */
    filter: alpha(opacity=50);
    height: 100%;
    left: 0;
    opacity: 0.5;
    /* make sure it appear behind the dialog box but above everything else */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 900;
}

.maskTextDiv {
    background-color: rgb(0, 0, 0);
    border: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: rgb(255, 255, 255);
    cursor: default;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    height: 50px;
    left: 46%;
    line-height: normal;
    margin: 0px;
    opacity: 0.8;
    padding: 20px;
    position: fixed;
    text-align: center;
    top: 42%;
    width: 120px;
    z-index: 1011;
}

.uploadFileFilter {
    -moz-opacity: 0;
    cursor: pointer;
    filter: alpha(opacity=0);
    height: 27px;
    margin-top: -30px;
    opacity: 0;
    position: absolute;
    width: 60px;
}

.sideBarContentSection select:hover { border: solid 1px #000000; }

.blueBoder { border: solid 1px #7dB2EA; }

.dtControlBarBottom {
    /* Should closley Match dtRefneBy */
    background: none repeat scroll 0 0 #F0F0F0;
    color: #3b3d40;
    float: left;
    font-size: 12px;
    height: 35px;
    position: relative;
    text-align: left;
    width: 98%;
}

.dtControlBarLeftContentBottom {
    float: left;
    font-weight: bold;
    line-height: 32px;
    padding-left: 10px;
}

.flipTitle3D {
    height: 18px;
    position: relative;
    width: 165px;
}

.flipTitle3D div {
    -moz-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    height: 100%;
    position: absolute;
    transition: 1s ease-in-out; /*defined animation speed */
    width: 100%;
}

.flipImage3D { position: relative; }

.flipImage3D div {
    -moz-transition: 1s ease-in-out;
    -webkit-transition: 1s ease-in-out;
    height: 100%;
    position: absolute;
    transition: 1s ease-in-out; /*defined animation speed */
    width: 100%;
}

.frontDesign3D {
    -moz-backface-visibility: hidden; /*set div hidden when it rotate toback */
    -moz-transform: perspective(800px) rotateY(0deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateY(0deg);
    backface-visibility: hidden;
    cursor: pointer;
    transform: perspective(800px) rotateY(0deg); /* set 0 angle when it is front*/
}

.backDesign3D {
    -moz-backface-visibility: hidden;
    -moz-transform: perspective(800px) rotateY(180deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateY(180deg); /* set -180 angle when it is back*/
    backface-visibility: hidden;
    cursor: pointer;
    transform: perspective(800px) rotateY(180deg);
}

.flipped .frontDesign3D {
    -moz-transform: perspective(800px) rotateY(-179.9deg);
    -webkit-transform: perspective(800px) rotateY(-179.9deg);
    transform: perspective(800px) rotateY(-179.9deg); /* set -179 angle when it is back*/
}

.flipped .backDesign3D {
    -moz-transform: perspective(800px) rotateY(0deg);
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg);
    /* set 0 angle when it is front */
}

.flipImage div {
    height: 100%;
    width: 100%;
}

.frontDesign { display: block; }

.frontDesign input[type="image"] { border: 1px solid #CCCCCC; }

.backDesign { display: none; }

.backDesign input[type="image"] { border: 1px solid #CCCCCC; }

.FilpIcon img { display: none; }

.FilpIconFlip img { display: block; }

.dtSearchCountBottom {
    float: left;
    font-size: 12px;
    font-weight: bold;
    margin-left: 20px;
    margin-right: 7px;
    margin-top: 4px;
    width: 300px;
}

.dtControlBarRightContentBottom {
    float: right;
    font-size: 10px;
    font-weight: bold;
    line-height: 32px;
    padding-right: 47px;
}

.dtTemplateFlipNames {
    font-size: 13px;
    font-weight: bold;
    line-height: 15px;
    overflow: hidden;
    padding-top: 3px;
    /*padding-left: 5px;*/
    text-align: center;
}

#sliderControlContainer {
    height: 47px;
    margin-left: 30px;
    width: 696px;
}

#sliderControl {
    background: url("/images/sliderBg.jpg") no-repeat scroll 0 0 #FFFFFF;
    height: 47px;
    margin-top: 10px;
    width: 696px;
}

#sliderControl .ui-slider .ui-slider-handle {
    background: url("/images/sliderTriangle.jpg") no-repeat scroll 0 0 transparent;
    border-style: none;
    height: 15px;
    margin-top: 40px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 15px;
}

#sliderControl .ui-slider-horizontal {
    background: none repeat scroll 0 0 transparent;
    border: 0px;
    height: 10px;
    margin: 0;
    margin-left: 176px;
    padding: 0;
    position: absolute;
    width: 352px;
}

.selectable-wrap {
    height: 20px;
    line-height: 20px;
    margin-top: 4px;
}

.selectable-wrap a {
    background-image: url(/images/arrow_drop_down.svg);
    background-position: right 6px;
    background-repeat: no-repeat;
    border: solid 1px #888;
    box-sizing: border-box;
    color: #333;
    display: block;
    height: 38px;
    line-height: 38px;
    padding-left: 4px;
    padding-right: 23px;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
}

.selectable-wrap a:hover { border: solid 1px #000000; }

.selectable-wrap a:focus { border: 2px solid rgb(10, 116, 199); }

.selectable-wrap a:focus + p { color: rgb(10, 116, 199); }


.hidden { display: none; }

.imageItem-data-wrap {
    border: solid 1px rgb(10, 116, 199);
    display: none;
    margin-top: 1px;
}

.imageItem-data-container {
    box-sizing: border-box;
    height: 45px;
    padding-top: 10px;
    width: 152px;
}

.imageItem-data-container a {
    border: solid 1px #888;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 12px;
    height: 38px;
}

.imageItem-data-container-title {
    background-color: #ffffff;
    font-size: 12px;
    margin-left: 6px;
    margin-top: -52px;
    width: 112px;
}

.imageItem-data {
    background: #fefefe;
    padding: 4px;
    width: 150px;
}

.imageItem-data td { vertical-align: top; }

.imageItem-data a {
    color: #4e4e4e;
    display: block;
    font: 12px/18px;
    line-height: 40px;
    padding: 2px;
    text-decoration: none;
}

.imageItem-data a:hover {
    background: rgb(10, 116, 199);
    border: solid 1px #ccc;
    color: #fefefe;
    padding: 1px;
}

.imageItem-data span {
    font: 12px/18px;
    vertical-align: top;
}

.leftFileCabinet {
    float: left;
    height: 580px;
    padding-left: 5px;
    width: 265px;
}

.fileCabinetTr {
    height: 60px;
    width: 250px;
}

.searchInput {
    height: 20px;
    margin: 7px;
    width: 150px;
}

.filesDelete {
    display: block;
    float: right;
    height: 18px;
    margin-right: 50px;
    margin-top: 5px;
    width: 30px;
}

.filesList {
    background-color: white;
    float: left;
    height: 470px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 265px;
}

.uploadImageBodyNew {
    background: #FFFFFF url(/images/bg_white.png) repeat-x scroll 0 0;
    height: 710px;
}

/* tabs css for file manager widget of image upload page */

#tabs {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

#tabs li {
    float: left;
    margin: 0 0 10px 0;
}

#tabs a {
    color: #3b3d40;
    float: left;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    position: relative;
    text-decoration: none;
    text-decoration: none solid rgb(59, 61, 64);
}

#tabs a:hover, #tabs a:focus {
    border-bottom: 2px solid #0a74c7;
    filter: alpha(opacity=100);
    opacity: 1;
}

#tabs a:focus { outline: 0; }

#tabs #current {
    border-bottom: 2px solid #0a74c7;
    filter: alpha(opacity=100);
    opacity: 1;
    z-index: 3;
}

.sideBarSectionTitle { display: none; }

.btn_advanced {
    margin-right: 3px !important;
    margin-top: 1px !important;
    width: 145px;
}

.ds-canvas-mobile::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

.ds-canvas-mobile::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .1); }

.firstLineLogo { top: 35px; }

.firstLine { top: 38px; }

.secondLine { top: 74px; }

.simpleLine {
    margin-right: 5px;
    top: 8px;
}

.previous-page-button {
    background-image: url(/images/previousPage.png);
    display: none;
    height: 24px;
    position: absolute;
    width: 24px;
}

.next-page-button {
    background-image: url(/images/nextPage.png);
    display: none;
    float: right;
    height: 24px;
    position: absolute;
    right: 0px;
    width: 24px;
}

.simple-previous-page-button {
    background-image: url(/images/previousPage.png);
    display: none;
    height: 24px;
    position: absolute;
    width: 24px;
    z-index: 999;
}

.simple-next-page-button {
    background-image: url(/images/nextPage.png);
    display: none;
    float: right;
    height: 24px;
    position: absolute;
    right: 140px;
    width: 24px;
    z-index: 999;
}

.studioRightContainer { min-height: 35px; }

.redesignRadio { display: none; }

.redesignRadio + label {
    -webkit-appearance: none;
    background-color: #ffffff;
    border: 1px solid #99a1a7;
    border-radius: 50px;
    display: inline-block;
    padding: 9px !important;
    position: relative;
}

.redesignRadio:checked + label { border: 1px solid #4b8400; }

.redesignRadio:checked + label:after {
    background: #4b8400;
    border-radius: 50px;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
    content: ' ';
    height: 14px;
    left: 2px;
    position: absolute;
    text-shadow: 0px;
    top: 2px;
    width: 14px;
}

.redesignCheckbox { display: none; }

.redesignCheckbox + label {
    background: #fff;
    border: 1px solid #6d7078;
    border-radius: 2px;
    display: inline-block;
    height: 14px;
    margin-right: 5px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 14px;
}

.redesignCheckbox:checked + label:after {
    background-color: #4b8400;
    background-image: url(/images/checkmark.svg);
    content: ' ';
    height: 14px;
    left: 0px;
    position: absolute;
    width: 14px;
}

.dropDownContainer {
    background: #FFFFFF;
    padding: 13px 3px 13px 3px;
    position: relative;
}

.dropDownContainer p,
.dropDownContainerTitle {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    background-color: #ffffff;
    font-size: 12px;
    left: 10px;
    position: absolute;
    top: 4px;
    user-select: none;
}

.dropDownContainer select,
.qrCodeSelectHeaderContainer select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(/images/arrow_drop_down.svg) no-repeat scroll right center #fff;
    border: 1px solid rgb(109, 112, 120);
    border-radius: 4px;
    font-size: 12px;
    height: 36px;
    max-width: 100%;
    padding: 5px 1px 1px 5px;
    padding-right: 20px;
    text-decoration: none solid rgb(59, 61, 64);
}

.dropDownContainer select::-ms-expand,
.qrCodeSelectHeaderContainer select::-ms-expand { display: none; }

.dropDownContainer select:hover,
.qrCodeSelectHeaderContainer select:hover {
    border: 1px solid rgb(0, 0, 0);
    cursor: pointer;
}

.dropDownContainer select:focus,
.qrCodeSelectHeaderContainer select:focus { border: 2px solid rgb(10, 116, 199); }

.dropDownContainer select:focus + p,
.qrCodeSelectHeaderContainer select:focus + div { color: rgb(10, 116, 199); }


.dropDownContainer select option,
.qrCodeSelectHeaderContainer selectoption {
    border: none;
    font-size: 12px;
    width: 100%;
}

.reinput,
.qrcode-option-item {
    box-sizing: border-box;
    margin-top: 2px;
    position: relative;
    width: auto;
}

.reinput { height: 60px; }

.reinput input:hover,
.qrcode-option-item input:hover { cursor: pointer !important; }


.reinput input::-ms-clear,
.qrcode-option-item input::-ms-clear {
    height: 0;
    width: 0;
}

.reinput input, .qrcode-option-item input {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgb(109, 112, 120);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 12px;
    height: 36px;
    max-width: 100%;
    padding: 0px 5px 0px 10px;
    padding-right: 20px;
    text-decoration: none solid rgb(59, 61, 64);
}

.reinput .title,
.qrcode-option-item .title {
    display: none;
    padding-top: 0px !important;
}

.reinput .foucsTitle,
.qrcode-option-item .foucsTitle {
    background-color: #ffffff;
    color: rgb(10, 116, 199);
    display: block;
    left: 10px;
    padding-top: 0px !important;
    position: absolute;
    top: 5px;
}

.reinput .blurTitle,
.qrcode-option-item .blurTitle {
    background-color: #ffffff;
    color: rgb(109, 112, 120);
    display: block;
    left: 10px;
    padding-top: 0px !important;
    position: absolute;
    top: 5px;
}

.reinput input:focus,
.qrcode-option-item input:focus { border: 2px solid rgb(10, 116, 199); }

.reinput .errorInput,
.qrcode-option-item .errorInput {
    background: url(/images/error.svg) no-repeat scroll right center #fff;
    border: 1px solid #e31f2d !important;
}

.reinput .errorTitle,
.qrcode-option-item .errorTitle {
    background-color: #ffffff;
    color: #e31f2d !important;
    display: block;
    left: 10px;
    padding-top: 0px !important;
    position: absolute;
    top: 5px;
}


.reinput .clearInput,
.qrcode-option-item .clearInput {
    background: url(/images/clear.svg) no-repeat scroll right center #fff;
    display: none;
    height: 20px;
    position: absolute;
    top: 18px;
    width: 20px;
}

#StartNumber {
    margin-left: 0px;
    width: 150px;
}

.formnumberInput {
    background: #FFFFFF;
    display: flex;
    height: 55px;
    padding: 13px 0px 0px 0px;
    position: relative;
}


@media screen and (max-width: 599px) {
    #frontBackContainer p {
        float: left;
        /*
	font-size:12px;
	width:60px;
	padding:4px;
	border:1px solid #CCC;
	background:#efefef;
	text-align:center;
	*/
        height: 24px;
        width: 38px;
    }

    #logoBoxToolbar, #photoBoxToolbar { height: 136px !important; }

    #toolBarContainer {
        /*background: no-repeat url(/_designer/_images/tool_bar_bg_text.png) -14px -7px;*/
        /*border: 1px dashed #999; */
        background-color: #f3f3f3;
        background-size: cover;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
        /*background: #A0CDF4;*/
        float: left;
        height: 136px;
        margin-right: 0px;
        position: relative;
        /*width:699px*/
        width: 100%;
    }

    /* Tool Bar Text Controls Tab */
    #textCtrls {
        left: 6px;
        position: relative;
        top: 60px;
    }

    /* End Tool Bar Text Controls Tab */


    /* Tool Bar Image Controls Tab */
    #imageCtrls {
        display: none; /* hide on start up to show text tab */
        left: 6px;
        position: relative;
        top: 60px;
    }

    /* End Tool Bar Image Controls Tab */



    /* Tool Bar Alignment Controls Tab */
    #alignmentCtrls {
        display: none;
        left: 6px;
        position: relative;
        top: 60px;
    }

    /* End Tool Bar Alignment Controls Tab */


    /* Tool Bar Bottom Section */
    #toolBarBottomSection {
        left: 6px;
        position: absolute;
        top: 94px;
    }

    /* End Tool Bar Bottom Section */

    #magnifyMinusCtrl {
        background-image: url(/_designer/_images/magnifyMinus.png);
        background-repeat: no-repeat;
        float: left;
        height: 22px;
        margin-left: 33px;
        position: relative;
        top: 3px;
        width: 25px;
    }

    #magnifyPlusCtrl {
        background-image: url(/_designer/_images/magnifyPlus.png);
        background-repeat: no-repeat;
        float: left;
        height: 22px;
        margin-left: -55px;
        position: relative;
        top: 3px;
        width: 25px;
    }

    #toolBarTopSection {
        position: absolute;
        right: 0px;
        top: 35px;
        width: 100%;
    }

    .firstLine { top: 66px; }

    .secondLine { top: 99px; }

    #logoBoxToolbar
#photoBoxToolbar { height: 136px; }
}

/* redesign popup pages: Page container */

.divPopupParent {
    align-items: center;
    display: none;
    height: 100%;
    justify-content: center;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 999;
}

.popup_sizebase { width: 900px; }

.popup_sizebaseWarningPopup { width: 660px; }

.popup_DesignTemplates { height: 710px; }

.popup_StockLogoList { height: 710px; }

.popup_StockVerseList { height: 710px; }

.popup_LogoBoxUpload { height: 710px; }

.popup_Preview { height: 650px; }

.popup_ImageUpload { height: 710px; }

.popup_EditCmykColor { height: 440px; }

@media screen and (max-width: 540px) {
    .popup_EditCmykColor { height: 580px; }
}

.popup_QRCode { height: 630px; }

.popup_QRCodeReview { height: 380px; }

.popup_FormNumbering { height: 360px; }

.popup_WarningPageSmall { height: 215px; }

.popup_WarningPage { }

.popup_WarningLeavePageSmall { height: 215px; }

.popup_WarningLeavePage { }

.popup_WarningBleedMargin { height: 215px; }

.popup_WarningAddBacksideNotification { height: 190px; }

.popup_WarningFrontAndBackWithArrow { }

.popup_UnsupportedBrowserWarningPage { height: 475px; }

.popup_PPIWarningPage { height: 320px; }

.popup_SaveItems { height: 185px; }

.popup_PreColorSelect { height: 500px; }

.popup_WarningRGBArtwork { }

.popup_WarningSpotColorArtwork { }

.popup_ReadOnlyDesignTemplate { height: 700px; }

.popup_ConsecutiveNumberingLocation { height: 260px; }

.popup_WarningChoices { }

.popup_HelpDialog { height: 610px; }

.fakefilesContainer { }

.popup_Barcode { height: 630px; }

@media screen and (max-width: 959px) and (min-width: 600px) {
    .popup_sizebase { width: 600px; }

    .popup_sizebaseWarningPopup { width: 600px; }

    .popup_Preview { height: 700px; }
}

@media screen and (max-width: 599px) {
    .divPopupParent { align-items: flex-start; }

    .popup_sizebase { width: 100%; }

    .popup_sizebaseWarningPopup { width: 100%; }

    .popup_Preview { height: 700px; }

    #sliderControlContainer {
        height: 47px;
        margin-left: 0px;
        text-align: center;
        width: 100%;
    }

    #sliderControl {
        background: url("/images/sliderBg360.jpg") no-repeat scroll 0 0 #FFFFFF;
        height: 47px;
        margin: auto;
        margin-top: 10px;
        width: 324px;
    }

    #sliderControl .ui-slider .ui-slider-handle {
        background: url("/images/sliderTriangle.jpg") no-repeat scroll 0 0 transparent;
        border-style: none;
        height: 15px;
        margin-top: 40px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 15px;
    }

    #sliderControl .ui-slider-horizontal {
        background: none repeat scroll 0 0 transparent;
        border: 0px;
        height: 10px;
        margin: 0;
        margin-left: 85px;
        padding: 0;
        position: absolute;
        width: 170px;
    }

    .dtWarningContentBig { height: 88px; }
}

/* redesign popup pages: Secondary warning popups */

@media screen and (max-width: 601px) and (min-width: 599px) {
    #divWarningPopUp { left: 0px; }

    #sliderControlContainer {
        height: 47px;
        margin-left: 30px;
        width: 696px;
    }

    #sliderControl {
        background: url("/images/sliderBg600.jpg") no-repeat scroll 0 0 #FFFFFF;
        height: 47px;
        margin-left: 0px;
        margin-top: 10px;
        width: 524px;
    }

    #sliderControl .ui-slider .ui-slider-handle {
        background: url("/images/sliderTriangle.jpg") no-repeat scroll 0 0 transparent;
        border-style: none;
        height: 15px;
        margin-top: 40px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 15px;
    }

    #sliderControl .ui-slider-horizontal {
        background: none repeat scroll 0 0 transparent;
        border: 0px;
        height: 10px;
        margin: 0;
        margin-left: 121px;
        padding: 0;
        position: absolute;
        width: 242px;
    }
}

@media screen and (max-width: 599px) {
    #divWarningPopUp {
        left: 0px;
        top: 0px;
    }

    .uploadHeadingText { width: calc(100% - 60px); }
}

/* redesign popup pages: Page content inside popup */

/* In iframe, media screen width depends on popup width */

/* screen width >= 960: popup width = 900 */

/* screen width >= 600: popup width = 600 */

/* screen width < 600: popup width = 100% */

.pcContentWrapperPreview {
    box-sizing: border-box;
    height: 95%;
    padding-bottom: 80px;
    width: 100%;
}

.pcContentWrapperPreviewMain {
    height: 100%;
    overflow-y: auto;
}

.pcPreviewImage {
    display: flex;
    justify-content: space-around;
    padding-left: 20px;
}

.pcPreviewSurface {
    padding-bottom: 10px;
    width: 340px;
}

.pcPreviewSurfaceTitle {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.pcBottomTextSection {
    margin-top: 10px;
    padding-left: 60px;
    padding-right: 40px;
}

@media screen and (max-width: 601px) and (min-width: 599px) {
    #dtHeader { width: 550px; }

    .dtLeftSideBarBig { display: none; }

    #dtContentWrapperBig {
        height: 505px;
        margin-top: 10px;
        width: 565px;
    }

    .dtMainContentBig {
        float: left;
        width: 100%;
    }

    .dtMainContentBigWithoutLeftSection { margin-right: 0px; }

    .dtMainContentBig .dtControlBar { width: 540px; }

    .dtMainContentBig .leftSearch { width: 350px; }

    .dtMainContentBig .dtTemplatesContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 50px;
        width: 500px;
    }

    .dtVerseContainer {
        margin-left: calc(50% - 165px) !important;
        width: 330px !important;
    }

    .dtMainContentBig .dtControlBarBottom { width: 540px; }

    #dtSearch {
        height: 40px;
        margin-left: 20px;
        margin-top: 10px;
        position: relative;
    }

    .input_content_text { width: 520px; }

    .pcPreviewImage {
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 130px;
    }

    .pcBottomTextSection {
        padding-left: 20px;
        padding-right: 10px;
    }

    #warningTextContainer {
        float: left;
        padding: 5px;
        text-align: left;
        width: 460px;
    }
}

@media screen and (max-width: 599px) {
    #dtHeader {
        max-width: 95%;
        min-width: 330px;
    }

    .dtLeftSideBarBig { display: none; }

    #dtContentWrapperBig {
        height: 505px;
        margin-top: 10px;
        max-width: 100%;
        min-width: 345px;
        padding-left: 20px;
    }

    .dtMainContentBig {
        float: left;
        width: 100%;
    }

    .dtMainContentBigWithoutLeftSection { margin-right: 0px; }

    .dtMainContentBig .dtControlBar {
        max-width: 90%;
        min-width: 344px;
    }

    .dtMainContentBig .leftSearch {
        min-width: 180px;
        width: 100%;
    }

    .dtMainContentBig .dtTemplatesContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: calc(50% - 190px);
        width: 380px;
    }

    .dtMainContentBig .dtControlBarBottom {
        max-width: 100%;
        min-width: 344px;
    }

    #dtSearch {
        height: 40px;
        margin-left: 0px;
        margin-top: 10px;
        max-width: 95%;
        padding-left: 20px;
        position: relative;
    }

    .input_content_text {
        max-width: 100%;
        min-width: 300px;
    }

    #dtPageWrapper {
        display: flex;
        flex-direction: column;
        max-width: 95%;
        overflow-x: auto;
    }

    .pcPreviewImage {
        flex-direction: column;
        justify-content: flex-start;
        margin-left: calc(50% - 160px);
        padding-left: 0px;
    }

    .pcContentWrapperPreview { padding-bottom: 110px; }

    .pcBottomTextSection {
        padding-left: 20px;
        padding-right: 10px;
    }

    #warningTextContainer {
        float: left;
        min-width: 220px;
        padding: 5px;
        text-align: left;
        width: calc(100% - 135px);
    }

    .warningImages {
        height: auto;
        min-width: 300px;
        width: 100%;
    }

    .warningImage {
        float: left;
        width: 50%;
    }

    .warningImage img {
        height: auto;
        width: 100%;
    }

    .pcPreviewSurfaceTitle {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        padding-right: 20px;
    }

    .fakefilesContainer { width: calc(100% - 225px) }

    .fakefiles {
        border: solid 1px rgb(183, 186, 188);
        font-size: 11px;
        height: 20px;
        margin: 0px 10px 0px 0px;
        max-width: 240px;
        padding-top: 3px;
        width: 95%;
        z-index: 1;
    }

    .dtwarningWordExcel {
        height: 180px !important;
        height: 155px !important;
        +
        margin: 5px auto !important;
        width: 100% !important;
    }

    .dtWarningPdf { height: 120px !important; }

    dtWarningPdf { height: 100px !important; }
}

/* redesign flyout menu */

.canvasMain { position: relative; }

#toolBarContainer { float: none; }

.canvasLeftCol, .canvasRightCol { }

.canvasLeftCol {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    height: 100%;
    position: absolute;
    z-index: 1;
}

.canvasLeftCol > div {
    background: #fff;
    display: inline-block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.canvasLeftCol .sideBarUnfoldButton,
.canvasLeftCol .sideBarFoldButton {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: none;
    padding: 10px 10px;
    width: 26px;
}

.canvasLeftCol .sideBarFoldButton {
    box-shadow: none;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
}

.canvasLeftCol #MainContent_sideBar { height: auto; }

.canvasLeftCol .sideBarSection { }

.canvasLeftCol .sideBarMain { position: relative; }

.canvasRightCol { margin-left: 235px; }

.canvasLeftCol.foldSideBar {
    background: transparent;
    box-shadow: none;
    height: auto;
    width: auto;
}

.canvasLeftCol.foldSideBar > div {
    background: transparent;
    padding: 0 10px 10px 0;
}

.canvasLeftCol.foldSideBar + .canvasRightCol { margin-left: 0; }

.canvasLeftCol.foldSideBar .sideBarUnfoldButton {
    background: #fff;
    display: inline-block;
}

.canvasLeftCol.foldSideBar .sideBarMain { display: none; }

@media screen and (max-width: 959px) {
    .canvasLeftCol {
        background: rgba(0, 0, 0, .5);
        width: 100%;
    }

    .canvasRightCol { margin-left: 0; }
}

.inspectImageContainer {
    display: inline-block;
    max-width: 100%;
    width: auto;
}

.inspectImageContainerTitle {
    float: left;
    font-size: 12px;
    height: 20px;
    margin-left: 20px;
    text-align: left;
    width: 90%;
}

.inspectImageContainer img {
    height: auto;
    margin: auto;
    max-width: calc(100% - 30px);
    width: auto;
}

.uploadCropImageContainer img,
.colorImage img { width: 100%; }