/*** Template Gallery ***/

/* Structure */
.templateGallery #left-column                 {float:left; width:190px; position:absolute;}
.templateGallery #right-column                {float:right; margin:0 0 0 20px; width:690px; min-height:700px}
.templateGallery #right-column :hover          {text-decoration: none !important;}

#templateDisplay                              {height:100%; min-height:700px;}
#templateDisplay h1                           {font-size:23px !important; margin-bottom:10px !important;}

.templateFamilyTitle                          {width: 100%; height: 36px; overflow: hidden; }

.searchCriteria                               {background-color:#fff !important; border:#c6c6c6 solid 1px; list-style:none; margin:1px 0 20px -1px; padding:7px; width:160px; -moz-border-radius: 10px; -moz-box-shadow:0 2px 3px #ccc; -webkit-border-radius:10px !important; -webkit-box-shadow:0 2px 3px #ccc;}

#content .searchCriteria h2                   {border-bottom:1px solid #cecece; color:#484848; font:normal 20px Verdana; margin:0 0 10px 0; padding:0 0 5px 0;}
#content .searchCriteria h3                   {color:#484848; font:normal 16px Verdana;}
.searchCriteria h3#addCategoriesButton        {color:#2799d8; cursor: pointer; font-size: 14px; margin: 3px 5px;}
.searchCriteria a                             {color:#868484;}

.searchCriteriaFilter                         {cursor:pointer; margin:3px 3px 5px 0; padding:5px; -moz-border-radius:5px !important; -webkit-border-radius:5px !important;}
.searchCriteriaFilter.selected,
.searchCriteriaFilter.selected:hover          {color:#fff;}
.searchCriteriaFilter:hover                   {color:#2899d7;}

/* Sort Templates */
#sortTemplates                                {width:300px; float: right;}
#sortTemplates .sort                          {color:#000; float:left;font-size: 14px; margin:3px 5px 0 30px;}
#sortTemplates a                              {text-decoration: none !important;}
#sortTemplates .sortButton                    {margin-right:5px; color:transparent;float: left; width: 71px; height: 24px;}

#sortTemplates .sortButton.new                {background:transparent url(../images/sprite-templates.png) no-repeat scroll -86px -112px}
#sortTemplates .sortButton.popular            {background:transparent url(../images/sprite-templates.png) no-repeat scroll -86px -173px}
#sortTemplates .sortButton.relevance          {background:transparent url(../images/sprite-templates.png) no-repeat scroll -86px -235px}

#sortTemplates a:hover .sortButton.new        {background:transparent url(../images/sprite-templates.png) no-repeat scroll -86px -83px}
#sortTemplates a:hover .sortButton.popular    {background:transparent url(../images/sprite-templates.png) no-repeat scroll -86px -144px}
#sortTemplates a:hover .sortButton.relevance  {background:transparent url(../images/sprite-templates.png) no-repeat scroll -86px -203px;}

/* Mini-Template Browser */
.mini-template-gallery .templateFamily        {margin: 0px 17px 10px; }
.mini-template-gallery .templateFamilyTitle h1 span   {font-size: 22px; }


/* New Tag */
.new-template .newTag                         {background:transparent url(../images/sprite-templates.png) no-repeat scroll -93px -11px;}
.newTag                                       {height:65px; left:0; position:absolute; top:0; width:70px; z-index:999;}

/* Categories */
#categoryList .searchCriteriaFilter           {float:left; margin:2px; padding:5px 20px 5px 5px;}
#categoryList .searchCriteriaFilter:hover     {background:#e7e7e7 url(../images/cat-add.gif) no-repeat scroll right 7px; display:block;}
#selectedCategories .searchCriteriaFilter     {background:#2899D7 url(../images/x-blue.gif) no-repeat scroll right 7px; color:#FFFFFF !important; display:block; float:left; margin:2px; padding:5px 20px 5px 5px;-moz-border-radius:5px !important; -webkit-border-radius:5px !important;}
#selectedCategories .searchCriteriaFilter:hover  {text-decoration:none;}

/* Category Popup */
#floatingCategoryBox                          {background-color:#1B1B1B; color:#2699DC; display:none; left:186px !important; padding:0 10px 10px; position:absolute; top:0px !important; width:240px; z-index:999999; -moz-border-radius:10px !important; -moz-box-shadow:0 4px 14px 0 black; -webkit-border-radius:10px !important; -webkit-box-shadow:0 4px 14px 0 black;} 
#floatingCategoryBox .titleBar                {cursor:pointer; font-size:11px; margin:4px; text-align:right; width:100%;}
#floatingCategoryBox .searchCriteriaFilter    {float: left; }

#categoryBoxArrow                             {background:transparent url(../images/sprite-templates.png) no-repeat scroll -2px -393px; float:right; height:32px; left:-18px !important; position:absolute; top:48px !important; width:20px; z-index:21;}

/* Colors */
.colorPickerWrapper                           {width: 100%; height: 100%;-moz-border-radius:4px !important; -webkit-border-radius:4px !important;-moz-box-shadow:0px 1px 3px #1B1B1B; -webkit-box-shadow:0px 1px 3px #1B1B1B;}

#colorPickerPreview                           {width: 100%; height: 100%;-moz-border-radius:4px !important; -webkit-border-radius:4px !important;-moz-box-shadow:0px 1px 3px #1B1B1B; -webkit-box-shadow:0px 1px 3px #1B1B1B;}
#colorPicker                                  {background: #FFFFFF url(../images/sprite-templates.png) no-repeat scroll -128px -354px; float:left; height:23px; margin:3px 2px 3px 0; padding:3px; width:23px;}

#colorPicker:hover                            {background: #FFFFFF url(../images/sprite-templates.png) no-repeat scroll -128px -355px; border: 1px solid #c7c7c7; margin: 2px 2px 2px 0; padding:3px 2px; -moz-border-radius:4px !important; -webkit-border-radius:4px !important; cursor: pointer;}

.selected .swatchHover                        {background:transparent url(../images/sprite-templates.png) no-repeat scroll 0 -9px; height:11px; left:15px; position:absolute; width:13px;}
.colorButton                                  {float:left; height:23px;margin:3px 2px 3px 0; padding:3px; width:23px;}
.colorButton:hover                            {background:#e6e6e6; border: 1px solid #c7c7c7; margin: 2px 2px 2px 0; padding:3px 2px; -moz-border-radius:4px !important; -webkit-border-radius:4px !important; cursor: pointer;}

#colorPicker.selected:hover, 
.colorButton.selected:hover                   {background:#1376b6; border: none !important; margin:3px 2px 3px 0; padding:3px;}

#colorPicker.selected, 
.colorButton.selected                         {background:#1376b6; position: relative; -moz-border-radius:4px !important; -webkit-border-radius:4px !important;}

/*IE Only*/
#colorPickerPreview                           {border:1px solid #000\9; width:21px\9; height: 21px\9;}

/* Key Words */
.templateGallery input[id="addkeywordbutton"] {background: url(../images/sprite-templates.png) -131px -397px; float:left; height:27px !important; margin:0 0 0 -1px; padding:0 !important; width:30px; -moz-border-radius:0px 6px 6px 0; -webkit-border-radius:0px 6px 6px 0; -moz-box-shadow: none; -webkit-box-shadow:none;}

.templateGallery input[id="keywordinput"]     {background: url(../images/sprite-templates.png)  no-repeat scroll -3px -434px; float:left; margin:0 0 10px 0; padding-left: 15px; width:108px;}

#currentKeyWords .searchCriteriaFilter        {background:#2899D7 url(../images/x-blue.gif) no-repeat scroll right 7px; color:#FFFFFF !important; display:block; float:left; margin:2px; padding:5px 20px 5px 5px;-moz-border-radius:5px !important; -webkit-border-radius:5px !important;}
#currentKeyWords .searchCriteriaFilter:hover  {text-decoration:none;}

/* Autocomplete */
.autocomplete                                 {border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:1px 6px 6px 0px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden;}
.autocomplete .selected                       {background:#F0F0F0; }
.autocomplete div                             {padding:2px 5px; white-space:nowrap; overflow:hidden;}
.autocomplete strong                          {font-weight:normal; color:#3399FF;}

/*Related Articles*/
#relatedArticles ul li                        {list-style: none; padding-bottom: 10px;}
#relatedArticles ul                           {margin: 0; padding: 0;}
/* Sizes */
#sizeOptions .searchCriteria                  {float:left; margin-right:3px; width:35px;}
#sizeSmall                                    {background:url(../images/sprite-templates.png )#e6e6e6 top right no-repeat;}

/* Template Swatches */
.templateFamily                               {float:left; margin:0 20px 40px; width:190px;}
.templateFamily .previewTemplate              {background: no-repeat; border:1px solid #CCCCCC; height: 267px; position: relative; width: 190px;}

.templateFamilySwatchBrowser                  {background:#E6E6E6 none repeat scroll 0 0; border:1px solid #CACACA; margin:15px 0; padding:7px 5px; width:180px;-moz-border-radius:7px !important; -webkit-border-radius:7px !important;}

.swatchButtonLeft                             {background:transparent url(../images/sprite-templates.png) no-repeat scroll -4px -476px; float:left; height:17px; margin:1px 0 0 0; width:17px;}
.swatchButtonRight                            {background:transparent url(../images/sprite-templates.png) no-repeat scroll -46px -475px; float:right; height:17px; margin:1px 0 0 0; width:17px;}

.swatchButtonLeft.disabled                                     {background:transparent url(../images/sprite-templates.png) no-repeat scroll -103px -476px; float:left; height:17px; margin:1px 0 0 0; width:17px;}
.swatchButtonRight.disabled                   {background:transparent url(../images/sprite-templates.png) no-repeat scroll -146px -475px; float:right; height:17px; margin:1px 0 0 0; width:17px;}


.templateSwatch                               {cursor:pointer; float:left; height:14px; margin:2px 5px; width:14px; -moz-border-radius:2px !important; -moz-box-shadow:0 2px 2px #000000;-webkit-border-radius:2px !important; -webkit-box-shadow:0 2px 2px #000000;}

.templateSwatch.selected                      {border:#1376b6 1px solid; -moz-border-radius:2px !important; !important; -moz-box-shadow:0 2px 2px #000000;-webkit-border-radius:2px !important; -webkit-box-shadow:0 2px 2px #000000; width:12px; height: 12px;}

/*IE Only*/
.templateSwatch                               {border:1px solid #000\9; margin:2px 4px\9;}
.templateSwatch.selected                      {width:14px\9; height: 14px\9;}

/* Pagination */
#pagination                                  {color:#fff; cursor: pointer; margin:50px 0 0 auto; width:66%;}
#pagination div                              {background:#2B2B2B none repeat scroll 0 0; float:left; font-size:11px; height:15px; margin:4px; padding:5px; text-align:center; width:15px;-moz-border-radius:5px !important; -webkit-border-radius:5px !important;}
#pagination:hover                            {text-decoration: none !important;}
#pagination div.selected                     {background-color:#079215;}
#pagination div.disabled                     {background-color:#d3d3d3 !important; cursor:default;}
#pagination #pageLeft                        {background:#7f7f7f url(../images/sprite-templates.png) no-repeat scroll 5px -353px;}
#pagination #pageRight                       {background:#7f7f7f url(../images/sprite-templates.png) no-repeat scroll -38px -353px;}

#pagination div:hover                        {background:#079215;}