// Generated by compass-jquery-plugin/gem-tasks/jqtouch.rake body, #jqt { background: rgb(0, 0, 0); } body > * { background: rgb(197, 204, 211) image_url("jqtouch/apple/pinstripes.png"); } #jqt { > * { background: rgb(197, 204, 211) image_url("jqtouch/apple/pinstripes.png"); } h1, h2 { font: bold 18px "Helvetica Neue", Helvetica; text-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px; color: rgb(76, 86, 108); margin: 10px 20px 6px; } .toolbar { -webkit-box-sizing: border-box; border-bottom: 1px solid #2d3642; padding: 10px; height: 45px; background: image_url("jqtouch/apple/toolbar.png") #6d84a2 repeat-x; position: relative; } .black-translucent .toolbar { margin-top: 20px; } } /* @group Toolbar */ div#jqt { .toolbar > h1 { position: absolute; overflow: hidden; left: 50%; top: 10px; line-height: 1em; margin: 1px 0 0 -75px; height: 40px; font-size: 20px; width: 150px; font-weight: bold; text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: #fff; } &.landscape .toolbar > h1 { margin-left: -125px; width: 250px; } } #jqt { .button, .back, .cancel, .add { position: absolute; overflow: hidden; top: 8px; right: 6px; margin: 0; border-width: 0 5px; padding: 0 3px; width: auto; height: 30px; line-height: 30px; font-family: inherit; font-size: 12px; font-weight: bold; color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0; text-overflow: ellipsis; text-decoration: none; white-space: nowrap; background: none; -webkit-border-image: image_url("jqtouch/apple/toolButton.png") 0 5 0 5; } .button.active, .cancel.active, .add.active { -webkit-border-image: image_url("jqtouch/apple/toolButton.png") 0 5 0 5; } .blueButton { -webkit-border-image: image_url("jqtouch/apple/actionButton.png") 0 5 0 5; border-width: 0 5px; } .back { left: 6px; right: auto; padding: 0; max-width: 55px; border-width: 0 8px 0 14px; -webkit-border-image: image_url("jqtouch/apple/backButton.png") 0 8 0 14; &.active { -webkit-border-image: image_url("jqtouch/apple/backButton.png") 0 8 0 14; } } .leftButton, .cancel { left: 6px; right: auto; } .add { font-size: 24px; line-height: 24px; font-weight: bold; } .whiteButton, .grayButton, .redButton, .blueButton, .greenButton { display: block; border-width: 0 12px; padding: 10px; text-align: center; font-size: 20px; font-weight: bold; text-decoration: inherit; color: inherit; } .whiteButton.active, .grayButton.active, .redButton.active, .blueButton.active, .greenButton.active, .whiteButton:active, .grayButton:active, .redButton:active, .blueButton:active, .greenButton:active { -webkit-border-image: image_url("jqtouch/apple/activeButton.png") 0 12 0 12; } .whiteButton { -webkit-border-image: image_url("jqtouch/apple/whiteButton.png") 0 12 0 12; text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0; } .grayButton { -webkit-border-image: image_url("jqtouch/apple/grayButton.png") 0 12 0 12; color: #FFFFFF; } .redButton { -webkit-border-image: image_url("jqtouch/apple/redButton.png") 0 12 0 12; color: #FFFFFF; } .greenButton { -webkit-border-image: image_url("jqtouch/apple/greenButton.png") 0 12 0 12; color: #FFFFFF; } h1 + ul, h2 + ul, h3 + ul, h4 + ul, h5 + ul, h6 + ul { margin-top: 0; } ul { color: black; background: #fff; border: 1px solid #B4B4B4; font: bold 17px "Helvetica Neue", Helvetica; padding: 0; margin: 15px 10px 17px 10px; -webkit-border-radius: 8px; li { color: #666; border-top: 1px solid #B4B4B4; list-style-type: none; padding: 10px 10px 10px 10px; } } li { &:first-child { border-top: 0; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; a { border-top: 0; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; } } &:last-child { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; } } } ul li.arrow { background-image: image_url("jqtouch/apple/chevron.png"); background-position: right center; background-repeat: no-repeat; a { padding: 12px 22px 12px 10px; } } #plastic ul li.arrow, #metal ul li.arrow { background-image: url("jqtouch/apple/chevron.png"); background-position: right center; background-repeat: no-repeat; } ul li a, li.img a + a { color: #000; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; padding: 12px 10px 12px 10px; margin: -10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } ul { li { a.active { background: #194fdb image_url("jqtouch/apple/selection.png") 0 0 repeat-x; color: #fff; } &.arrow a.active { background-image: image_url("jqtouch/apple/listArrowSel.png"); background-position: right center; background-repeat: no-repeat; } a.button { background-color: #194fdb; color: #fff; } &.img a + { a { margin: -10px 10px -20px -5px; font-size: 17px; font-weight: bold; + a { font-size: 14px; font-weight: normal; margin-left: -10px; margin-bottom: -10px; margin-top: 0; } } small + a { margin-left: -5px; + a { margin-left: -10px; margin-top: -20px; margin-bottom: -10px; font-size: 14px; font-weight: normal; + a { margin-left: 0px !important; margin-bottom: 0; } } } } a + a { color: #000; font: 14px "Helvetica Neue", Helvetica; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; margin: 0; padding: 0; + a { color: #666; font: 13px "Helvetica Neue", Helvetica; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; padding: 0; } } &.img a + { a + a + a, small + a + a + a { color: #666; font: 13px "Helvetica Neue", Helvetica; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; padding: 0; } } } &.form li { padding: 7px 10px; &.error { border: 2px solid red; + li.error { border-top: 0; } } &:hover { background: #fff; } } li { input { &[type="text"], &[type="password"], &[type="tel"], &[type="number"], &[type="search"], &[type="email"], &[type="url"] { color: #777; background: white url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); border: 0; font: normal 17px "Helvetica Neue", Helvetica; padding: 0; display: inline-block; margin-left: 0px; width: 100%; -webkit-appearance: textarea; } } textarea, select { color: #777; background: white url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='); border: 0; font: normal 17px "Helvetica Neue", Helvetica; padding: 0; display: inline-block; margin-left: 0px; width: 100%; -webkit-appearance: textarea; } textarea { height: 120px; padding: 0; text-indent: -2px; } select { text-indent: 0px; background: transparent image_url("jqtouch/apple/chevron.png") no-repeat 103% 3px; -webkit-appearance: textfield; margin-left: -6px; width: 104%; } input { &[type="checkbox"], &[type="radio"] { margin: 0; color: rgb(50, 79, 133); padding: 10px 10px; } &[type="checkbox"]:after, &[type="radio"]:after { content: attr(title); font: 17px "Helvetica Neue", Helvetica; display: block; width: 246px; margin: -12px 0 0 17px; } } } &.edgetoedge { -webkit-border-radius: 0; * { -webkit-border-radius: 0; } li.sep { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(139, 159, 171, 1)), to(rgba(181, 193, 201, 1))); border-bottom: 1px solid #b5c1c9; border-top: 1px solid #b5c1c9; color: #fff; font-size: 16px; margin: 1px 0 0 0; padding: 2px 10px; text-shadow: #636a6f 0 1px 0; } } } .edgetoedge { h4 { color: #fff; background: rgb(154, 159, 170) image_url("jqtouch/apple/listGroup.png") top left repeat-x; border-top: 1px solid rgb(165, 177, 186); text-shadow: #666 0 1px 0; margin: 0; padding: 2px 10px; } margin: 0; padding: 0; background-color: rgb(255, 255, 255); } .metal { margin: 0; padding: 0; background-color: rgb(255, 255, 255); } .edgetoedge ul, .metal ul, .plastic ul { -webkit-border-radius: 0; margin: 0; border-left: 0; border-right: 0; border-top: 0; } .metal ul { border-top: 0; border-bottom: 0; background: rgb(180, 180, 180); } .edgetoedge ul li { &:first-child, &:last-child { -webkit-border-radius: 0; a { -webkit-border-radius: 0; } } } .metal ul li { &:first-child a, &:last-child a { -webkit-border-radius: 0; } } .edgetoedge { ul li small { font-size: 16px; line-height: 28px; } li { -webkit-border-radius: 0; } } .metal li { -webkit-border-radius: 0; } .edgetoedge { li em { font-weight: normal; font-style: normal; } h4 + ul { border-top: 1px solid rgb(152, 158, 164); border-bottom: 1px solid rgb(113, 125, 133); } } ul li { small { color: #369; font: 17px "Helvetica Neue", Helvetica; text-align: right; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; width: 23%; float: right; padding: 3px 0px; } &.arrow small { padding: 0 15px; } small.counter { font-size: 17px !important; line-height: 13px !important; font-weight: bold; background: rgb(154, 159, 170); color: #fff; -webkit-border-radius: 11px; padding: 4px 10px 5px 10px; display: inline !important; width: auto; margin-top: -22px; } &.arrow small.counter { margin-right: 15px; } } #plastic ul li.arrow, #metal ul li.arrow { background-image: image_url("jqtouch/apple/chevron.png"); background-position: right center; background-repeat: no-repeat; } .edgetoedge ul, .metal ul, .plastic ul { -webkit-border-radius: 0; margin: 0; border-left: 0; border-right: 0; border-top: 0; } .metal ul li { border-top: 1px solid rgb(238, 238, 238); border-bottom: 1px solid rgb(156, 158, 165); font-size: 26px; text-shadow: #fff 0 1px 0; a { line-height: 26px; margin: 0; padding: 13px 0; &:hover { color: rgb(0, 0, 0); } } &:hover small { color: inherit; } a em { display: block; font-size: 14px; font-style: normal; color: #444; width: 50%; line-height: 14px; } small { float: right; position: relative; margin-top: 10px; font-weight: bold; } &.arrow { a small { padding-right: 0; line-height: 17px; } background: image_url("jqtouch/apple/chevron.png") right center no-repeat; } } .plastic { margin: 0; padding: 0; background: rgb(173, 173, 173); ul { -webkit-border-radius: 0; margin: 0; border-left: 0; border-right: 0; border-top: 0; background-color: rgb(173, 173, 173); li { -webkit-border-radius: 0; border-top: 1px solid rgb(191, 191, 191); border-bottom: 1px solid rgb(157, 157, 157); &:nth-child(odd) { background-color: rgb(152, 152, 152); border-top: 1px solid rgb(181, 181, 181); border-bottom: 1px solid rgb(138, 138, 138); } } + p { font-size: 11px; color: #2f3237; text-shadow: none; padding: 10px 10px; strong { font-size: 14px; line-height: 18px; text-shadow: #fff 0 1px 0; } } li { a { text-shadow: rgb(211, 211, 211) 0 1px 0; } &:nth-child(odd) a { text-shadow: rgb(191, 191, 191) 0 1px 0; } small { color: #3C3C3C; text-shadow: rgb(211, 211, 211) 0 1px 0; font-size: 13px; font-weight: bold; text-transform: uppercase; line-height: 24px; } } } } #plastic ul { &.minibanner { margin: 10px; border: 0; height: 81px; clear: both; } &.bigbanner { margin: 10px; border: 0; height: 81px; clear: both; height: 140px !important; } &.minibanner li { border: 1px solid rgb(138, 138, 138); background-color: rgb(152, 152, 152); width: 145px; height: 81px; float: left; -webkit-border-radius: 5px; padding: 0; } &.bigbanner li { border: 1px solid rgb(138, 138, 138); background-color: rgb(152, 152, 152); width: 296px; height: 140px; float: left; -webkit-border-radius: 5px; padding: 0; margin-bottom: 4px; } &.minibanner li { &:first-child { margin-right: 6px; } a { color: transparent; text-shadow: none; display: block; width: 145px; height: 81px; } } &.bigbanner li a { color: transparent; text-shadow: none; display: block; width: 296px; height: 145px; } } ul.individual { border: 0; background: none; clear: both; overflow: hidden; li { color: rgb(183, 190, 205); background: white; border: 1px solid rgb(180, 180, 180); font-size: 14px; text-align: center; -webkit-border-radius: 8px; -webkit-box-sizing: border-box; width: 48%; float: left; display: block; padding: 11px 10px 14px 10px; + li { float: right; } a { color: rgb(50, 79, 133); line-height: 16px; margin: -11px -10px -14px -10px; padding: 11px 10px 14px 10px; -webkit-border-radius: 8px; &:hover { color: #fff; background: #36c; } } } } .toggle { width: 94px; position: relative; height: 27px; display: block; overflow: hidden; float: right; input[type="checkbox"] { &:checked { left: 0px; } -webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0; -webkit-border-radius: 5px; background: white image_url("jqtouch/apple/on_off.png") 0 0 no-repeat; height: 27px; overflow: hidden; width: 149px; border: 0; -webkit-appearance: textarea; background-color: transparent; -webkit-transition: left .15s; position: absolute; top: 0; left: -55px; } } .info { background: #dce1eb; font-size: 12px; line-height: 16px; text-align: center; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; color: rgb(76, 86, 108); padding: 15px; border-top: 1px solid rgba(76, 86, 108, 0.3); font-weight: bold; } } /* @end */ /* @group Lists */ /* when you have a first LI item on any list */ /* universal arrows */ /* universal links on list */ /* @end */ /* @group Forms */ /* @end */ /* @group Edge to edge */ /* @end */ /* @group Mini Label */ /* @end */ /* @group Plastic */ /* @end */ /* @group Individual */ /* @end */ /* @group Toggle */ /* @end */ input[type='submit'] { -webkit-border-radius: 4px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238, 238, 238, 1)), to(rgba(156, 158, 160, 1))); border: 1px outset #aaa; display: block; font-size: inherit; font-weight: inherit; padding: 10px; }