/* GLOBAL *********************************************************/ html, body { overflow: auto; height: 100%; max-height: 100%; border-collapse: collapse; font-family: Verdana; font-size: 20px; margin: 0; padding: 0; } table { margin: 0; border-collapse: collapse; } table.center { margin-left:auto; margin-right:auto; } table.roundborder1 { border-collapse: separate; width: auto; height: auto; margin-left: auto; margin-right: auto; color: #000000; background-color: #FFFFFF; border: 1px solid #C9C9C9; padding: 10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } table.roundborder2 { border-collapse: separate; width: 100%; height: auto; margin-left: auto; margin-right: auto; color: #000000; background-color: #FFFFFF; border: 1px solid #C9C9C9; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } table.roundborder3 { border-collapse: separate; width: 100%; height: auto; margin-left: auto; margin-right: auto; color: #000000; background-color: #FFFFFF; border: 1px solid #C9C9C9; padding: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } a img { border:none; outline:none !important; } hr.style1 { border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); } /* HEADER ********************************************************/ .header { background-color: #333333; color: #FFFFFF; height: auto; } .header-page-title { color: #92C451; font-family: Arial; font-size: 30px; padding-left: 20px; } .header-nav ul { font-family: Arial; font-size: 15px; margin: 0; padding: 0; list-style-type: none; text-align: right; } .header-nav ul li { display: inline; } .header-nav ul li a { background-color: #5E5E5E; color: #ffffff; text-decoration: none; padding: .2em 1em; } .header-nav ul li a:hover { background-color: #232323; color: #FFFFFF; } .header-nav a.current { background-color: #232323; color: #F9AF46; } .header-subbar { background-color: #1C1C1C; color: #FFFFFF; font-family: Arial; font-size: 20px; height: auto; padding-left: 20px; line-height: 30px; } .header-subbar-title { color: #F4922F; display: inline; } .header-subbar-topnav { color: #FFFFFF; font-family: Arial; font-size: 15px; } .header-subbar-topsubnav a:link { color: #C4C4C4; font-family: Verdana; font-size: 10px; margin-left: 10px; outline-style: none; text-decoration: none; } .header-subbar-topsubnav a:visited { color: #C4C4C4; outline-style:none; text-decoration:none; } .header-subbar-topsubnav a:hover { color: #8D8D8D; outline-style:none; text-decoration:underline; } .header-subbar-topsubnav a:active { color: #C4C4C4; outline-style:none; text-decoration:none; } /* BODY *********************************************************/ .content { height:100% !important; } .content-text0 { color: #000000; font-family: Arial; font-size: 25px; text-align: left; vertical-align: top; } .content-text1 { color: #000000; font-family: Arial; font-size: 25px; text-align: center; vertical-align: middle; } .content-text2 { color: #000000; font-family: Arial; font-size: 18px; text-align: center; vertical-align: middle; } .content-text3 { color: #000000; font-family: Arial; font-size: 13px; font-weight: bold; text-align: center; vertical-align: middle; } .content-text4 { color: #000000; font-family: Arial; font-size: 14px; text-align: center; vertical-align: middle; } .content-text5 { color: #000000; font-family: Arial; font-size: 14px; text-align: left; vertical-align: middle; } .content-text6 { color: #000000; font-family: Arial; font-size: 13px; font-weight: bold; text-align: left; vertical-align: middle; } .content-text7 { color: #000000; font-family: Arial; font-size: 14px; font-weight: bold; text-align: left; vertical-align: middle; } .content-text8 { color: #000000; font-family: Arial; font-size: 14px; text-align: left; vertical-align: top; } .content-text9 { color: #000000; font-family: Arial; font-size: 18px; font-weight: bold; text-align: left; vertical-align: top; } .content-text10 { color: #000000; font-family: Arial; font-size: 18px; text-align: left; vertical-align: top; } .content-text11 { color: #000000; font-family: Arial; font-size: 18px; font-weight: bold; text-align: center; vertical-align: top; } .content-text12 { color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } .content-text13 { color: #000000; font-family: Arial; font-size: 13px; font-weight: bold; text-align: right; vertical-align: middle; } .content-text14 { color: #ffffff; font-family: Arial; font-size: 25px; font-weight: bold; text-align: left; vertical-align: middle; } .content-text15 { color: #ffffff; font-family: Arial; font-size: 18px; font-weight: bold; text-align: left; vertical-align: middle; margin-top: 30px; margin-left: 40px; } .content-text16 { color: #000000; font-family: Arial; font-size: 25px; font-weight: bold; text-align: left; vertical-align: middle; } .content-text17 { color: #44B44F; font-family: Arial; font-size: 25px; font-weight: bold; text-align: left; vertical-align: middle; } .content-text18 { color: #000000; font-family: Arial; font-size: 13px; text-align: center; vertical-align: middle; } .content-text19 { color: #000000; font-family: Arial; font-size: 14px; text-align: left; vertical-align: middle; } .content-text20 { color: #000000; font-family: Arial; font-size: 12px; text-align: left; vertical-align: middle; } .content-text21 { color: #000000; font-family: Arial; font-size: 18px; text-align: left; vertical-align: middle; } .content-text22 { color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: middle; } .ButtonGreen { background-color: #89c403; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #74b807; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 18px; font-weight: bold; padding: 12px 15px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGreen:hover { background-color: #77a809; } .ButtonGreen:active { position: relative; top: 1px; } .ButtonGreenBig { background-color: #89c403; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #74b807; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 18px; font-weight: bold; padding: 12px 67px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGreenBig:hover { background-color: #77a809; } .ButtonGreenBig:active { position: relative; top: 1px; } .ButtonGreenRound { background-color: #89c403; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; border: 1px solid #74b807; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 15px; font-weight: bold; padding: 9px 9px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGreenRound:hover { background-color: #77a809; } .ButtonGreenRound:active { position: relative; top: 1px; } .ButtonGreenSquare { background-color: #89c403; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #74b807; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 15px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGreenSquare:hover { background-color: #77a809; } .ButtonGreenSquare:active { position: relative; top: 1px; } .ButtonRedRound { background-color: #8E0F0C; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; border: 1px solid #870E0C; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 15px; font-weight: bold; padding: 9px 9px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonRedRound:hover { background-color: #680B09; } .ButtonRedRound:active { position: relative; top: 1px; } .ButtonGray { background-color: #999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #8F8F8F; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 18px; font-weight: bold; padding: 12px 15px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGray:hover { background-color: #7B7B7B; } .ButtonGray:active { position: relative; top: 1px; } .ButtonGrayRound { background-color: #999999; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; border: 1px solid #8F8F8F; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 15px; font-weight: bold; padding: 9px 9px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGrayRound:hover { background-color: #7B7B7B; } .ButtonGrayRound:active { position: relative; top: 1px; } .ButtonGraySquare ul { font-family: Arial; font-size: 15px; margin: 0; padding: 0; list-style-type: none; text-align: left; } .ButtonGraySquare ul li { display: inline-block; } .ButtonGraySquare ul li a { background-color: #999999; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 10px 10px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGraySquare ul li a:hover { color: #FFFFFF; background-color: #77a809; } .ButtonGraySquare a.current { color: #FFFFFF; background-color: #89C403; } .ButtonWhiteSquare { background-color: #FFFFFF; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; border: 1px solid #F8F8F8; display: inline-block; cursor: pointer; color:#000000; font-family: arial; font-size: 25px; font-weight: bold; padding: 20px 20px; text-decoration: none; } .ButtonWhiteSquare:hover { background-color: #F6F6F6; } .ButtonWhiteSquare:active { position: relative; top: 1px; } .ButtonRedSquare { background-color: #E60000; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #CC0000; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 5px; text-decoration: none; } .ButtonRedSquare:hover { background-color: #CC0000; } .ButtonRedSquare:active { position: relative; top: 1px; } .ButtonRedSquare1 { background-color: #E60000; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #CC0000; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 25px; font-weight: bold; padding: 20px 20px; text-decoration: none; } .ButtonRedSquare1:hover { background-color: #CC0000; } .ButtonRedSquare1:active { position: relative; top: 1px; } .ButtonDrkBlurSquare { background-color: #3385AD; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #006699; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 15px; text-decoration: none; text-shadow: 0px 1px 0px #006699; } .ButtonDrkBlurSquare:hover { background-color: #006699; } .ButtonDrkBlurSquare:active { position: relative; top: 1px; } .ButtonBlue { background-color: #27C2D7; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #209FB0; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 18px; font-weight: bold; padding: 12px 15px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonBlue:hover { background-color: #209FB0; } .ButtonBlue:active { position: relative; top: 1px; } .ButtonBlueSquare { background-color: #27C2D7; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 1px solid #209FB0; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 15px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonBlueSquare:hover { background-color: #209FB0; } .ButtonBlueSquare:active { position: relative; top: 1px; } .ButtonOrange { background-color: #F4922F; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #E4892C; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 18px; font-weight: bold; padding: 12px 15px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonOrange:hover { background-color: #E4892C; } .ButtonOrange:active { position: relative; top: 1px; } .ButtonGreenAddToCart { background-color: #89c403; width: 30px; height:30px; line-height: 22px; cursor: pointer; font-family: arial; font-size: 20px; font-weight: bold; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #74b807; display: inline-block; cursor: pointer; color:#ffffff; padding: 4px 4px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGreenAddToCart:hover { background-color: #77a809; } .ButtonGreenAddToCart:active { position: relative; top: 1px; } .ButtonRedAddToCart { background-color: #d23f51; width: 30px; height:30px; line-height: 22px; cursor: pointer; font-family: arial; font-size: 20px; font-weight: bold; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #d23f51; display: inline-block; cursor: pointer; color:#ffffff; padding: 4px 4px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonRedAddToCart:hover { background-color: #b83747; } .ButtonRedAddToCart:active { position: relative; top: 1px; } .ButtonGreenAdmin { background-color: #89c403; width: 40px; height:40px; line-height: 22px; cursor: pointer; font-family: arial; font-size: 20px; font-weight: bold; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #74b807; display: inline-block; cursor: pointer; color:#ffffff; padding: 9px 9px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonGreenAdmin:hover { background-color: #77a809; } .ButtonGreenAdmin:active { position: relative; top: 1px; } .ButtonRedAdmin { background-color: #A90007; width: 40px; height:40px; line-height: 22px; cursor: pointer; font-family: arial; font-size: 20px; font-weight: bold; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #930006; display: inline-block; cursor: pointer; color:#ffffff; padding: 9px 9px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .ButtonRedAdmin:hover { background-color: #930006; } .ButtonRedAdmin:active { position: relative; top: 1px; } .ScrollBox { overflow: auto; position: absolute; z-index: 3; top: 210px; bottom: 80px; left: 15px; right: 15px; } .ScrollBoxGrey { background-color: #E6E6E6; overflow: auto; position: absolute; z-index: 3; top: 210px; bottom: 80px; left: 15px; right: 15px; } .SuperUserBox { width: 80%; height: 400px; color: #000000; background-color: #FFFFFF; border: 1px solid #C9C9C9; padding: 10px; } .SuperUserScroll { overflow: auto; width: 100%; height: 400px; } .PhotoPlaceHolder0 { width: 28px; height: 28px; line-height: 28px; background-color: #CCCCCC; color:#8A8A8A; cursor: pointer; font-family: arial; font-size: 10px; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #8F8F8F; display: inline-block; padding: 12px 12px; text-decoration: none; } .PhotoPlaceHolder1 { width: 90px; height: 90px; line-height: 90px; background-color: #CCCCCC; color:#8A8A8A; cursor: pointer; font-family: arial; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #8F8F8F; display: inline-block; padding: 12px 12px; text-decoration: none; } .PhotoPlaceHolder2 { width: 500px; height: 400px; line-height: 400px; background-color: #CCCCCC; color:#8A8A8A; cursor: pointer; font-family: arial; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #8F8F8F; display: inline-block; padding: 12px 12px; text-decoration: none; } .PhotoPlaceHolder3 { width: 350px; height: 350px; line-height: 350px; background-color: #CCCCCC; color:#8A8A8A; cursor: pointer; font-family: arial; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #8F8F8F; display: inline-block; padding: 12px 12px; text-decoration: none; } .PhotoPlaceHolder4 { width: 48px; height: 48px; line-height: 48px; background-color: #CCCCCC; color:#8A8A8A; cursor: pointer; font-family: arial; font-size: 10px; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #8F8F8F; display: inline-block; padding: 2px 2px; text-decoration: none; } .PhotoPlaceHolder5 { width: 479px; height: 400px; line-height: 400px; background-color: #CCCCCC; color:#8A8A8A; cursor: pointer; font-family: arial; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #8F8F8F; display: inline-block; padding: 2px 2px; text-decoration: none; } .PhotoPlaceHolder5 img { max-width: 479px; max-height: 400px; width:expression(this.width > 479 ? "479px" : "auto"); height:expression(this.height > 400 ? "400px" : "auto"); } .PhotoPlaceHolder6 { width: 368px; height: 350px; line-height: 350px; background-color: #CCCCCC; color:#8A8A8A; cursor: pointer; font-family: arial; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border: 1px solid #8F8F8F; display: inline-block; padding: 2px 2px; text-decoration: none; } .PhotoPlaceHolder6 img { max-width: 368px; max-height: 350px; width:expression(this.width > 368 ? "368px" : "auto"); height:expression(this.height > 350 ? "350px" : "auto"); } .Popup-BlackOverlay { z-index:1001; display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .Popup-ContentBox { z-index:1002; display: none; position: absolute; top: 25%; left: 25%; right: 25%; width: auto; height: auto; padding: 1px; border: 2px solid grey; background-color: #F2F2F2; overflow: auto; } .Popup-ConfirmBox { z-index:1002; display: none; position: absolute; top: 25%; left: 25%; right: 25%; width: auto; height: auto; padding: 1px; border: 2px solid grey; background-color: #F2F2F2; overflow: auto; } .Arrow-Up { cursor: pointer; width: 0; height: 0; text-align: center; vertical-align: middle; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid grey; } .Arrow-Up:hover { border-bottom: 10px solid green; } .Arrow-Down { cursor: pointer; width: 0; height: 0; text-align: center; vertical-align: middle; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid grey; } .Arrow-Down:hover { border-top: 10px solid green; } article.accordion { width: auto; align:left; font-family: "Segoe UI", arial, helvetica, freesans, sans-serif; font-size: 90%; color: #333; margin: 10px; z-index: 0; display: block; padding: 0.5em 0.5em 1px 0.5em; margin: 0 auto; background-color: #666; border-radius: 5px; box-shadow: 0 3px 3px rgba(0,0,0,0.3); } article.accordion h1 { color: #fff; font-size: 1.5em; font-weight: normal; margin: 0; padding-bottom: 12px; } article.accordion h2 { font-size: 1.3em; font-weight: normal; margin: 2em 0 0 0; } article.accordion p { margin: 0.6em 0; } article.accordion p.accnav { font-size: 16px; text-transform: uppercase; text-align: right; } article.accordion p.accnav a { text-decoration: none; color: #999; } article.accordion section { display: block; width: auto; height: 2em; padding: 0 1em; margin: 0 0 0.5em 0; color: #333; background-color: #333; overflow: hidden; border-radius: 3px; } article.accordion section { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } article.accordion section h2 { font-size: 1em; font-weight: bold; width: 100%; line-height: 2em; padding: 0; margin: 0; color: #ddd; } article.accordion section h2 a { display: block; width: 100%; line-height: 2em; text-decoration: none; color: inherit; outline: 0 none; } article.accordion section:target { height: 15em; background-color: #fff; } article.accordion section:target h2 { font-size: auto; color: #333; } .AdminGreenBox { display: inline-block; background-color: #44B44F; width: 92%; height:184px; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 15px; text-decoration: none; text-shadow: 0px 1px 0px #006699; border-radius: 2px; border: 1px solid #3DA147; display: inline-block; cursor: pointer; } .AdminGreenBox:hover { background-color: #3C9F46; } .AdminOrangeBox { display: inline-block; background-color: #F4922F; width: 92%; height:184px; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 15px; text-decoration: none; text-shadow: 0px 1px 0px #006699; border-radius: 2px; border: 1px solid #DF862B; display: inline-block; cursor: pointer; } .AdminOrangeBox:hover { background-color: #DB832A; } .AdminBlueBox { display: inline-block; background-color: #36ACE0; width: 92%; height:184px; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 15px; text-decoration: none; text-shadow: 0px 1px 0px #006699; border-radius: 2px; border: 1px solid #329FCF; display: inline-block; cursor: pointer; } .AdminBlueBox:hover { background-color: #2F97C4; } .AdminBrownBox { display: inline-block; background-color: #744C27; width: 92%; height:184px; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; padding: 5px 15px; text-decoration: none; text-shadow: 0px 1px 0px #006699; border-radius: 2px; border: 1px solid #694523; display: inline-block; cursor: pointer; } .AdminBrownBox:hover { background-color: #593B1E; } .AdminTealButton { background-color: #BECCD4; float:right; display: inline-block; cursor: pointer; color:#000000; font-family: arial; font-size: 18px; font-weight: bold; padding-left: 20px; line-height: 64px; text-decoration: none; left: 0px; width: 259px; top: 0px; height: 67px; border: 1px solid #B8C6CE; -webkit-border-radius: 10.5px 10.5px 10.5px 10.5px; -moz-border-radius: 10.5px 10.5px 10.5px 10.5px; border-radius: 10.5px 10.5px 10.5px 10.5px; } .AdminTealButton:hover { background-color: #9FABB1; } .AdminTealButtonCircle { background-color: #89c403; margin-left: 35px; width: 22px; height:22px; line-height: 22px; cursor: pointer; font-family: arial; font-size: 20px; font-weight: bold; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #74b807; display: inline-block; cursor: pointer; color:#ffffff; padding: 9px 9px; text-decoration: none; text-shadow: 0px 1px 0px #528009; } .DividerHorizontal { width: 5px; height: auto; display: inline-block; } .DividerVerticle { height: 10px; width: auto; display: inline-block; } #AddressBookMenu { @-webkit-keyframes safariSelectorFix { 0% { zoom:1; } 100% { zoom:1; } -webkit-animation: safariSelectorFix infinite 1s; behavior: url('_menu.htc') }; position: relative; z-index: 500; } #AddressBookMenu ul { margin: 0; list-style: none; padding: 0px; } #AddressBookMenu ul.level1 { width: 103px; } #AddressBookMenu ul ul { position: absolute; left: -9999px; width: 122px; top: 28px; } #AddressBookMenu ul ul ul { position: absolute; left: -9999px; width: 122px; top: 0px; } #AddressBookMenu ul li { background: #fff; margin-right: 10px; float: right; position: relative; } #AddressBookMenu ul li a { display: block; float: right; padding: 6px; font: normal 11px verdana, sans-serif; color: #FFFFFF; text-decoration: none; background: #277BA1; border: 1px solid #000000; border-color: #36ACE0 #36ACE0 #000000 #36ACE0;} #AddressBookMenu ul li a.fly { background: #277BA1; } #AddressBookMenu ul ul li { margin: 0; } #AddressBookMenu ul ul li a { width: 150px; } #AddressBookMenu ul ul li a.fly { padding: 5px; } #AddressBookMenu ul li:hover > a { cursor: default; background-color: #7BAA3D; color: #FFFFFF; border-color: #638931; } #AddressBookMenu ul li a:focus { outline: 0; } #AddressBookMenu ul li a:active + ul.dropdown { left: -6px; } #AddressBookMenu ul li a:focus + ul.d1, #AddressBookMenu ul li a:focus + ul.d2, #AddressBookMenu ul li a:focus + ul.d3, #AddressBookMenu ul li a:focus + ul.d4 { left: -32px; } #AddressBookMenu ul li ul.dropdown:hover { left: -32px; } #AddressBookMenu ul li a:active + ul.flyout { left: 122px; } #AddressBookMenu ul li a:focus + ul.f1, #AddressBookMenu ul li a:focus + ul.f2, #AddressBookMenu ul li a:focus + ul.f3, #AddressBookMenu ul li a:focus + ul.ff1 { padding-left: 120px; left: -242px; height: 300px; max-height: 300px; overflow-y: auto; overflow-x: hidden; } #AddressBookMenu ul li ul.flyout:hover { padding-left: 120px; left: -242px; height: 300px; max-height: 300px; overflow-y: auto; overflow-x: hidden; } #ReportBox1Title { color: #31708F; font-family: Arial; font-size: 15px; text-align: center; padding: 7px; } #ReportBox1TitleBox { width: 200px; height: auto; background: rgb(245, 245, 245); border: 1px solid rgb(0, 0, 0); border-bottom: none; } #ReportBox1MainBox { width: 200px; height: auto; background: rgb(217, 237, 247); border: 1px solid rgb(0, 0, 0); } #ReportBox1TextNumber { color: #31708F; font-family: Arial; font-size: 50px; text-align: center; } #ReportBox1TextTitle { font-family: Arial; font-size: 15px; text-align: center; } #ReportBox1TextTitle a { cursor: pointer; color: #31708F; } #ReportBox1TextTitle a:hover { color: #AF0005; } /* FORM *********************************************************/ input { outline:none !important; } input:hover { background: #F6F6F6; } input.form { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 12px; outline-style: none; outline: none; height: 20px; width: 100%; text-align: left; } input.form:hover { background: #F6F6F6; } input.search { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 15px; outline-style: none; outline: none; height: 30px; width: 210px; } input.qtybox { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 12px; outline-style: none; outline: none; height: 20px; width: 40px; text-align: center; } textarea { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 12px; outline-style: none; outline: none; height: 50px; width: 100%; text-align: left; } textarea.form { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 12px; outline-style: none; outline: none; height: 50px; width: 100%; text-align: left; } textarea.invoice { background: #FFFFFF; border: 1px solid #364C64; font-family: 'Courier New'; font-size: 13px; outline-style: none; outline: none; height: 400px; width: 95%; text-align: left; } select { outline:none !important; } select.form { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 12px; outline-style: none; outline: none; height: 20px; width: 100%; text-align: left; } #SearchBy { outline:none !important; height: 34px; color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } #StartMonth { outline:none !important; color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } #StartDay { outline:none !important; color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } #StartYear { outline:none !important; color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } #EndMonth { outline:none !important; color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } #EndDay { outline:none !important; color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } #EndYear { outline:none !important; color: #000000; font-family: Arial; font-size: 13px; text-align: left; vertical-align: top; } .AddressBook { width: 115px; height: 26px; background-color: #27C2D7; display: inline-block; cursor: pointer; color:#ffffff; font-family: arial; font-size: 12px; font-weight: bold; text-decoration: none; } .AddressBook:hover { background-color: #209FB0; } .AddressBook:active { position: relative; top: 1px; } .input-group { position: relative; display: table; border-collapse: separate; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .input-group-addon:first-child { border-right: 0; } .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn { border-bottom-right-radius: 0; border-top-right-radius: 0; } .input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; } .input-group-addon, .input-group-btn { width: 1%; white-space: nowrap; vertical-align: middle; } .input-group-addon, .input-group-btn, .input-group .form-control { display: table-cell; } .input-group button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn { border-bottom-left-radius: 0; border-top-left-radius: 0; } .input-group .form-control { display: block; width: auto; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } .input-group input:hover { background: #F6F6F6; } #nav-searchbar .nav-submit-button { float: right; display: inline-block; *display: inline; *zoom: 1; position: relative; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 35px; width: auto; overflow: hidden; cursor: pointer; z-index: 1; border: 1px solid; border-color: #485059 #2c3137 #363c43 #485059; background-color: #5b626a; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; border-radius: 0\9; *border-radius: 0; background-position: 0 -381px; } #nav-searchbar .nav-submit-button .nav-submit-input { display: inline-block; *display: inline; *zoom: 1; height: 100%; line-height: 33px; margin: 0; padding: 0 11px; background: 0; border: 0; cursor: pointer; outline: 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); font-weight: bold; color: white; font-size: 13px; font-family: "arial","sans-serif"; vertical-align: middle; text-align: center; } #nav-searchbar .nav-submit-button:active { background-position: 0 -481px; } #nav-searchbar #nav-search-in { float: left; display: inline-block; *display: inline; *zoom: 1; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; position: relative; height: 35px; overflow: hidden; border: 1px solid #cdcdcd; border-top-color: #bdbdbd; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; border-radius: 0\9; *border-radius: 0; background-position: 0 -532px; } #nav-searchbar #nav-search-in { margin-right: -3px; } #nav-searchbar #nav-search-in:hover { background-position: 0 -582px; } #nav-searchbar #nav-search-in .nav-down-arrow { border-style: solid; _border-style: dashed; border-width: 4px; border-color: transparent; border-top: 4px solid #a0a0a0; border-bottom-width: 0; width: 0; height: 0; font-size: 0; line-height: 0; position: absolute; right: 8px; top: 14px; } #nav-searchbar #nav-search-in-content { color: #777; font-size: 12px; white-space: nowrap; font-family: "arial","sans-serif"; text-indent: 1px; height: 35px; margin: 0 21px 0 9px; line-height: 33px; text-overflow: ellipsis; } #nav-searchbar #nav-searchdropdownbox { font-family: "arial","sans-serif"; position: absolute; left: 5px; top: 7px; margin: 0; padding: 0; outline: 0; width: 190px; } #nav-searchbar #nav-searchdropdownbox { left: 0; top: 0; height: 29px; cursor: pointer; width: auto; } #nav-searchbar .nav-searchfield-width { width: auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 35px; overflow: hidden; border-top: 1px solid #bdbdbd; border-bottom: 1px solid #cdcdcd; background: white; } #nav-searchbar #nav-iss-attach { position: relative; padding: 0; height: 100%; white-space: normal; } #nav-searchbar #twotabsearchtextbox { position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; top: 6px; left: 0; margin: 0; padding: 0 0 0 8px; width: 100%; height: 23px; border: 0; font-family: "arial","sans-serif"; font-size: 15px; background: transparent; color: #333; outline: 0; -webkit-appearance: none; box-shadow: none; } #nav-searchdropdownbox { opacity: 0; filter: alpha(opacity=0); visibility: visible; } #nav-search-in #nav-search-in-content { display: inline-block; } /* FOOTER *******************************************************/ .footer { background-color: #333333; color: #FFFFFF; font-family: Arial; font-size: 12px; height: 30px; width: 100%; } .footer a { color: #FFFFFF; font-family: Arial; font-size: 12px; height:70px; line-height: 20px; } /* RESPONSIVE ***************************************************/ /* Smartphones (portrait) ------------------------- */ @media only screen and (min-width: 200px ) and (max-width: 767px) and (orientation: portrait) { #SearchTitle { display: none; } #SearchBy { display: none; } #Search1 { display: none; } #Search2 { display: none; } input.search { display: none; } #SearchTitleAll { display: none; } #SearchArea { display: none; } } /* Smartphones (landscape) ------------------------ */ @media only screen and (min-width: 200px ) and (max-width: 767px) and (orientation: landscape) { #SearchTitle { display: none; } #SearchBy { display: none; } #Search1 { display: none; } #Search2 { display: none; } input.search { display: none; } #SearchTitleAll { display: none; } #SearchArea { display: none; } } /* iPads (portrait) ------------------------------- */ @media only screen and (min-width: 768px ) and (max-width: 1024px) and (orientation: portrait) { #SearchTitle { display: none; } #SearchBy { display: none; } #Search1 { display: none; } #Search2 { display: none; } #SearchArea { display: none; } #SearchHomeBox { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 15px; outline-style: none; outline: none; height: 30px; width: 200px; } #SearchCheckOrder { background: #FFFFFF; border: 1px solid #364C64; font-family: Arial; font-size: 15px; outline-style: none; outline: none; height: 30px; width: 120px; } .Popup-ContentBox { z-index:1002; display: none; position: absolute; top: 15%; left: 2%; width: 95%; height: auto; padding: 1px; border: 2px solid grey; background-color: #F2F2F2; overflow: auto; } } /* iPads (landscape) ------------------------------ */ @media only screen and (min-width: 768px ) and (max-width: 1024px) and (orientation: landscape) { .Popup-ContentBox { z-index:1002; display: none; position: absolute; top: 15%; left: 15%; width: 70%; height: auto; padding: 1px; border: 2px solid grey; background-color: #F2F2F2; overflow: auto; } } /* Desktops and laptops (small) ------------------- */ @media only screen and (min-width: 1024px ) and (max-width: 1160px) { } /* Desktops and laptops (big) --------------------- */ @media only screen and (min-width:1161px ) { }