﻿/* 
====== CSS document for ZipList ======
*/

/* 
====== Default CSS Content ======

      00: Re-set                          -- To include the final reset class
      01: Global
      02: Base Layout                     -- Header, Main, Footer etc
      03: Typography
      04: User controls           
      05: Lists                           -- ul, ol, dl, etc..      
      06: Notification Messages           -- Validation messages, Errors, Success messages etc      
      07: jQuery                          -- All plugins
      08: Popup/Modal                     -- Popup and modal window style  

============
*/

/* 
====== 0: START: Re-set ======
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border				: 0;
	outline				: 0;
	font-size			: 100%;
	vertical-align		: baseline;
	background			: none;
	margin				: 0;
	padding				: 0;
}

ol, ul { list-style: none; }
abbr, acronym { font-variant: normal; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table {	border-collapse: collapse; border-spacing: 0; }
textarea { resize: none; }

/* 
====== 0: END: Re-set ======
*/

/* 
====== 1: START: Global ======
*/

body { background-color: #f5f5f5; font: 69%/1.5em Arial, Helvetica, sans-serif; color: #333333; }
.left { float: left }
.right { float: right; }
.center { text-align: center; }
.clear-both { clear: both; display: block; font-size: 0; height: 1px; line-height: 1px; margin: 0; padding: 0; border: none; background: none; }
.clear-both:after,
.form dd:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
.hidden { display: none; }

/* 
====== 1: END: Global ======
*/

/* 
====== 2: START: Base Layout ======
*/

#wrapper { background-color: #ffffff; border-width: 2px 0 1px; border-style: solid; border-color:#f0f0f0 #f0f0f0 #eaeaea; }
#header, #footer { width: 940px; margin: 0 auto; background-color: #f5f5f5; padding: 0 0 45px 0; }
#header .left,
#header .right { padding: 35px 0 25px; position: relative; }
#header .left { width: 730px; }
#header .left li { list-style-type: none; }
#header .left li a.logo-zebra { width: 152px; height: 50px; background: url(../images/LatestTheme/Zebra_Logo_New.png) no-repeat; display: block; float: left;  }
#header .left li a.logo-ilove-zebra { width: 105px; height: 53px; background: url(../images/LatestTheme/logo-love-zipship.png) no-repeat; display:block; float: right; margin-right: 35px; }
#header .left li .logo-zipship { width: 141px; height: 22px; display: block; background: url(../images/LatestTheme/logo-zipship.png) no-repeat; }
#header .link-contact { text-align: right; overflow: hidden; margin-bottom: 15px; float: right; }
#header .link-contact li { float: left; padding-left: 8px; }
#header .link-contact a { color: #666; font-size: 1em; font-weight: bold; }
#header .link-contact span { display: block; width: 22px; height: 15px; background: url(../images/LatestTheme/image-map.png) no-repeat -1px -1px; }
#header .select-language { float: right; }
#header .select-language .selectBox-arrow { background-position: -2px -522px;  }
#header .select-language .selectBox-arrow:hover { background-position: -2px -558px;  }
#header .print-logo { display: none; } 
.content-wrap { width: 940px; margin: 0 auto; padding: 35px 0 50px; background-color: #ffffff; }
#header .sub-text { display: inline-block; color: #6f6f6f; font-size: 1.1em; line-height: 1.5em; font-weight: normal; position: absolute; width: 435px; right: 0; bottom: -25px; text-align: right; margin: 15px 0 0 0; }
#header .sub-text a {display: inline-block; color: #6f6f6f; font-size: 1em; font-weight: bold; text-shadow: 1px 1px #fff; margin-left: 0; text-decoration: underline; }
#header .sub-text a:hover {  color: #bbb; }



/* 
====== 2: END: Base Layout ======
*/


/* ====== 3: START: Typography ====== */

h1, 
h2, 
h3, 
h4, 
h5 { color: #333333; }
h1 { font-size: 2em; margin-bottom: 1em; }
h2 { font-size: 1.4em; margin-bottom: 1em; }
h3 {  font-size: 1.3em; margin-bottom: 2em; }
h4, h5 { font-size: 1.2em; margin-bottom: 0.5em; }
p { font-size: 1.05em; line-height: 1.5em; }
a { font-size: 1em; color: #606060; }
a:link, a:visited { text-decoration: none; }
.search-quick a:link, .search-quick a:visited { text-decoration: underline; }
a:hover, a:active { text-decoration: underline; }
em { font-style: normal; font-weight: bold; }
sup { font-size: 0.75em; height: 0; line-height: 1; position: relative; top: -0.4em; vertical-align: baseline; }
hr { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: #e4e4e4 #e4e4e4 #ffffff; border-image: none; border-style: solid; border-width: 1px 0 1px 0; display: block; } 

/* ====== 3: END: Typography ====== */


/* 
====== 4: START: User Controls ======
*/

.primary-button  {
border-width: 1px; border-style: solid; 
border-color: #f5e9ba #ccbf6e #baa031 #f5e9ba; 
-webkit-box-shadow: #ccc69c 0 1px 0; 
-moz-box-shadow: #ccc69c 0 1px 0; 
box-shadow: #ccc69c 0 1px 0; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px;  background: #ffe118;
background: #ffe218; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTIxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmOGJlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffe218 0%, #f8be0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe218), color-stop(100%,#f8be0e));
background: -webkit-linear-gradient(top,  #ffe218 0%,#f8be0e 100%);
background: -o-linear-gradient(top,  #ffe218 0%,#f8be0e 100%);
background: -ms-linear-gradient(top,  #ffe218 0%,#f8be0e 100%);
background: linear-gradient(to bottom,  #ffe218 0%,#f8be0e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe218', endColorstr='#f8be0e',GradientType=0 );
color: #333; text-align: center; font-size: 1.2em; font-weight: bold; padding: 8px 25px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}

.secondary-button  {
border-width: 1px; border-style: solid; 
border-color: #e2e2e2 #e2e2e2 #adadab #e2e2e2; 
-webkit-box-shadow: #cfcfcf 0 1px 0; 
-moz-box-shadow: #cfcfcf 0 1px 0; 
box-shadow: #cfcfcf 0 1px 0; 
border-radius: 3px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px;  background: #ffe118;
background: #ffe218; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZTIxOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmOGJlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #dfdedc 0%, #d9d8d6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdedc), color-stop(100%,#d9d8d6));
background: -webkit-linear-gradient(top,  #dfdedc 0%,#d9d8d6 100%);
background: -o-linear-gradient(top,  #dfdedc 0%,#d9d8d6 100%);
background: -ms-linear-gradient(top,  #dfdedc 0%,#d9d8d6 100%);
background: linear-gradient(to bottom,  #dfdedc 0%,#d9d8d6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdedc', endColorstr='#d9d8d6',GradientType=0 );
color: #333; text-align: center; font-size: 1.2em; font-weight: bold; padding: 8px 25px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
.primary-button-wrap { position: relative; }
.primary-button-arrow { background: url(../images/LatestTheme/image-map.png) no-repeat 3px -415px; position: absolute;  width: 15px; height: 15px;  }
input[type=text] { border: 1px solid #cccccc; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding-left: 3px; }



   
/* 
====== 4: END: User Controls ======
*/


/*
====== 5: START: Lists ======
*/

ul.list { list-style-type: disc; }
ol.list { list-style-type: decimal; }
.list { padding: 0 0 0 30px; }
.list li { margin: 0 0 1em 0; }

dl { overflow: hidden; }
dt { float: left; font-weight: bold; line-height: 2em; margin-right: 10px; color: #333; }
dd {  }


/*
====== 5: END: Lists ======
*/


/*
====== 6: START: Notification Messages ======
*/

.warningMessage p { background: url("../images/LatestTheme/validation.gif") no-repeat -7px -5px #FFF0F2; border: 1px solid #F0B6BE; display: block; font-weight: normal; margin:0 10px 15px 10px; padding: 10px 10px 10px 38px; color:#CE1126;font-size: 1em; } 
.standardMessage, .emptyRecordMessage { background-color: #FFFFC9; font-size: 1.2em; font-weight: bold; line-height: 2em; margin-right: 10px; border-color: #CCC; border-style: solid; border-width: 1px; margin: 0 0 20px; padding: 5px 10px 5px 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.warningMessage { color: #FF0000;  }
.standardMessage { color: #333333;  }
.warningMessage ul { margin: 5px 0 5px 10px; float: left;}
.warningMessage li { margin: 0 0 -4px 0;}
.standardMessage label { margin: 5px 0 0 5px; float: left; }
.warningMessage .warning-icon { background: url("../images/image-map.png") no-repeat  0px -69px; display: block; width: 30px; height: 30px; float: left; }
.standardMessage .warning-icon { background: url("../images/image-map.png") no-repeat -413px -42px; display: block; width: 30px; height: 30px; float: left; }
.emptyRecordMessage .warning-icon { background: url("../images/image-map.png") no-repeat -226px -559px; display: block; width: 30px; height: 30px; float: left; }
.mandatory { color: #FF7B00; font-size: 1.1em; }
.emptyRecordMessage .warning-icon { background-position: -335px -563px !important; }
.emptyRecordMessage label { margin: 5px 0 0 5px; float: left; font-size:1em !important; }
 
/*
====== 6: END: Notification Messages ======
*/


/*
====== 7: START: jQuery: Tooltip, Checkbox ======
*/

.ui-dialog { position: absolute; width: auto!important; padding: .2em; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; display: none; }
.ui-dialog .ui-dialog-content { border: 0; overflow: visible; zoom: 1; margin: 3px; padding: 20px;}
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100 !important; background-color: #000000; filter: alpha(opacity=60); opacity: 0.6; Overflow-y:hidden; }
.modal-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100 !important; background-color: #000000; filter: alpha(opacity=60); opacity: 0.6; Overflow-y:hidden; }


/*
====== 7: END: jQuery ======
*/

/*
====== 8: START: Popup/Modal  ======
*/
 .popup-close { margin-top: 10px; text-align: right; }
/*
====== 8: END: Popup/Modal  ======
*/