/* Table of Content */ /* :: Buttons */ /* :: Notices/Alerts */ /* :: tabs */ /* :: Pagination */ /* :: Lists */ /* :: Panels */ /* Buttons */ .button { background: #00a6fc; display: inline-block; text-align: center; padding: 9px 34px 11px; color: white; text-decoration: none; font-weight: bold; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1; position: relative; cursor: pointer; border: none; } .button.nice { background-color: #00a6fc; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(51%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%); background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%); background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.28); border: solid 1px #008ed8; -moz-transition-property: background-color; -webkit-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -moz-transition-duration: 0.15s; -webkit-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s; -moz-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .button.radius { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .button.round { -moz-border-radius: 1000px; -webkit-border-radius: 1000px; -o-border-radius: 1000px; border-radius: 1000px; } .button.full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } .button.left-align { text-align: left; text-indent: 12px; } input[type=submit].button { -webkit-appearance: none; } /* Sizes */ .button.small { font-size: 11px; font-size: 1.1rem; padding: 8px 20px 10px; width: auto; } .button.medium { font-size: 13px; font-size: 1.3rem; width: auto; } .button.large { font-size: 18px; font-size: 1.8rem; padding: 11px 48px 13px; width: auto; } /* Colors */ .button.blue { background-color: #00a6fc; } .button.red { background-color: #e91c21; } .button.white { background-color: #e9e9e9; color: #333333; } .button.black { background-color: #141414; } /* Nice Colors */ .nice.button.blue { border: solid 1px #008ed8; } .nice.button.red { border: solid 1px #cd1418; } .nice.button.white { border: solid 1px #dbdbdb; text-shadow: none !important; } .nice.button.black { border: solid 1px #020202; } /* Hovers */ .button:hover { background-color: #0095e3; color: white; } .button.blue:hover { background-color: #0095e3; } .button.red:hover { background-color: #d7151a; } .button.white:hover { background-color: #e0e0e0; color: #333333; } .button.black:hover { background-color: #070707; } /* Disabled */ .button.disabled, .button[disabled] { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; cursor: default; } /* Alerts */ div.alert-box { display: block; padding: 6px 7px; font-weight: bold; font-size: 13px; font-size: 1.3rem; background: #eeeeee; border: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 12px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px rgba(255, 255, 255, 0.9); position: relative; } div.alert-box.success { background-color: #7fae00; color: white; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } div.alert-box.warning { background-color: #c08c00; color: white; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } div.alert-box.error { background-color: #c00000; color: white; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } div.alert-box a.close { color: #141414; position: absolute; right: 4px; top: 0px; font-size: 18px; font-size: 1.8rem; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; padding: 4px; } div.alert-box a.close:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; } /* Tabs */ dl.tabs { display: block; margin: 0 0 20px; padding: 0; height: 30px; border-bottom: solid 1px #dddddd; } dl.tabs dt { display: block; width: auto; height: 30px; padding: 0px 9px 0px 20px; line-height: 30px; float: left; color: #999999; font-size: 11px; font-size: 1.1rem; text-transform: uppercase; cursor: default; } dl.tabs dt:first-child { padding: 0 9px 0 0; } dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; } dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0 9px; line-height: 30px; border: solid 1px #dddddd; margin: 0 -1px 0 0; color: #555555; background: #eeeeee; } dl.tabs dd a.active { background: white; border-width: 1px 1px 0px 1px; height: 30px; } .nice.tabs { border-bottom: solid 1px #eeeeee; margin: 0 0 30px; height: 43px; } .nice.tabs dd a { padding: 7px 18px 9px; font-size: 15px; font-size: 1.5rem; color: #555555; background: none; border: none; } .nice.tabs dd a.active { font-weight: bold; color: #333333; background: white; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; border-top: 1px solid #00a6fc; margin: 0 10px; position: relative; top: -5px; } .nice.tabs dd:first-child a.active { margin-left: 0; } dl.tabs.vertical { height: auto; } dl.tabs.vertical dt, dl.tabs.vertical dd, dl.nice.tabs.vertical dt, dl.nice.tabs.vertical dd { float: none; height: auto; } dl.tabs.vertical dd a { display: block; width: auto; height: auto; padding: 15px 20px; line-height: 1; border: solid 0px #cccccc; border-width: 1px 1px 0px; margin: 0; color: #555555; background: #eeeeee; font-size: 15px; font-size: 1.5rem; } dl.tabs.vertical dd a.active { height: auto; margin: 0; border-width: 1px 0px 0px; background: white; } .nice.tabs.vertical { border-bottom: solid 1px #eeeeee; height: auto; } .nice.tabs.vertical dd a { padding: 15px 20px; background: white; border: none; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; border-top: 1px solid #eeeeee; } .nice.tabs.vertical dd a.active { border: none; background: #00a6fc; color: white; margin: 0; position: static; top: 0px; height: auto; } .nice.tabs.vertical dd:first-child { margin-left: 0; } dl.tabs.vertical { height: auto; } ul.tabs-content { margin: 0; display: block; } ul.tabs-content > li { display: none; } ul.tabs-content > li.active { display: block; } dl.contained, dl.nice.contained { margin-bottom: 0px; } dl.contained.tabs dd a { padding: 0px 14px; } dl.nice.contained.tabs dd a { padding: 7px 18px 9px; } ul.contained.tabs-content { padding: 0; } ul.contained.tabs-content li { padding: 20px; border: solid 0px #dddddd; border-width: 0 1px 1px 1px; } ul.nice.contained.tabs-content li { border-color: #eeeeee; } /* Pagination */ ul.pagination { display: block; height: 24px; margin-left: -5px; } ul.pagination li { float: left; display: block; height: 24px; color: #999999; font-size: 15px; font-size: 1.5rem; margin-left: 5px; } ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555555; } ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #00a6fc; color: #141414; } ul.pagination li.unavailable a { cursor: default; color: #999999; } ul.pagination li.unavailable:hover a { border-bottom: none; } /* Lists */ ul.nice, ol.nice { list-style: none; margin: 0; } ul.nice li, ol.nice li { padding-left: 13px; position: relative; } ul.nice li span.bullet, ol.nice li span.number { position: absolute; left: 0px; top: 0px; color: #cccccc; } /* Panels */ div.panel { padding: 20px 20px 2px 20px; background-color: #efefef; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f4f4f4)); background-image: -webkit-linear-gradient(#ffffff 0%, #f4f4f4 100%); background-image: -moz-linear-gradient(#ffffff 0%, #f4f4f4 100%); background-image: -o-linear-gradient(#ffffff 0%, #f4f4f4 100%); background-image: linear-gradient(#ffffff 0%, #f4f4f4 100%); -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); -o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15); margin: 0 0 20px 0; }