/* Note: .practices styles reference the home page */

/* 
* Reset Styles
*/
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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Colors
* Blue - #003F77
* Light Blue - #EBEFF2
* Orange - #E87511
* Grey - #999999
* Eggshell - #F7F8FA
* Beige - #FEF5D4
*/

/* 
* General Styles
*/

a:link, a:visited {
  color: #003F77;
  text-decoration: underline;
}

a:hover, a:active {
  color: #003F77;
  text-decoration: none;
}

.center {
  margin: 0 auto;
  width: 1000px;
}

.error {
  color: red;
}

.notice {
  color: green;
}

#messages {
  float: right;
}

.draggable {
  cursor: move;
}

/* Items that should be shown through javascript */
.js-show {
  display: none;
}

/* Center align errors and notices on home page so photo does not obscure them */
.practices.index .error, .practices.index .notice {
  text-align: center; 
}

.user-nav {
  background: #FEF5D4;
  border-bottom: 1px dashed #E87511;
  border-top: 1px dashed #E87511;
  text-align: right;
}

/* Rounded boxes with shadows */
.box {
  background-color: #fff;
  border: 1px solid #999;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  margin: 7px 0 13px;
  overflow: hidden;
  padding: 0 18px;
}

/* Adds drop shadow to bottom and right and places padding around image */
p.image {
  background: #fff;
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7);
  float: right;
  line-height: 0;
  margin: 10px 0 10px 10px;
  padding: 8px;
}

div.column p.image {
  line-height: 0;
  padding: 8px;
}

ul.horizontal {
  list-style-type: none;
}

ul.horizontal li {
  float: left;
}

.split {
  float: left;
}

/*
* Body Styles
*/

html, body {
  background-color: #F7F8FA;
  color: #003F77;
  font-family: Trebuchet MS, sans-serif;
}

/* Header Styles */
div#header {
  background: url(/images/bottom_glow.png) repeat-x bottom #003f77;
  color: #fff;
  font-family: Times, serif;
  padding-bottom: 3px;
  text-align: right;
}

div#header div.center {
  padding: 10px;
}

div#header a {
  color: #fff;
  text-decoration: none;
}

div#header .logo {
  border-left: 1px solid #fff;
  float: right;
  margin-left: 10px;
  margin-right: 25px;
}

/* Text concealed using Leahy/Langridge Image Replacement - height: 0, padding to show background, and overflow:hidden */
div#header .logo a {
  background: url(/images/st_lukes_logo.png) right 5px no-repeat;
  display: block;
  height: 0;
  overflow: hidden;
  padding: 55px 5px 0;
  text-indent: -9999px;
  width: 127px;
}

/* First rounded Box (Content) */
.home div#content, .practices.index div#content {
  overflow: visible;
}

div#content {
  padding: 0;
  position: relative;
}

/* Side Navigation on home page */
.home div#aside, .practices.index div#aside {
  display: none;
}

/* Side Navigation on sub pages */
div#aside {
  border-right: 1px solid #999;
  float: left;
  /* Fixes double border effect */
  margin-right: -1px;
  padding: 60px 0 40px 30px;
  width: 250px;
}

div#aside h3 {
  padding-bottom: 5px;
  font-family: Times, serif;
  font-size: 26px;
}

div#aside a {
  text-decoration: none;
}

div#aside ul {
  border-top: 1px solid #999;
  list-style-type: none;
  padding-top: 10px;
}

div#aside ul li {
  margin: 2px 0;
}

div#aside ul a {
  background-color: #EBEFF2;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-radius: 5px 0 0 5px;
  display: block;
  font-weight: bold;
  padding: 4px 0 4px 20px;
  text-decoration: none;
}

div#aside ul a.active, div#aside ul a:hover, div#aside ul a:active {
  background: url(/images/arrow.png) 10px center no-repeat #FEF5D4;
}

/* Top Navigation */
.admin ul#top-navigation, .edit ul#top-navigation, .new ul#top-navigation {
  display: none;
}

ul#top-navigation {
  background-color: #F7F8FA;
  background-image: -moz-linear-gradient(left, right, from(#fff), color-stop(0.5, #F7F8FA), to(#fff));
  background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#fff), color-stop(0.5, #F7F8FA), to(#fff));
  -webkit-box-shadow: 0 4px 3px -2px rgba(213, 223, 232, 0.6);
  -moz-box-shadow: 0 4px 3px -2px rgba(213, 223, 232, 0.6);
  box-shadow: 0 4px 3px -2px rgba(213, 223, 232, 0.6);
  float: right;
  margin: 0 20px 0 2px;
  overflow: hidden;
}

ul#top-navigation li {
  padding: 2px 0;
}

ul#top-navigation li:first-child a {
  border: 0;
}

ul#top-navigation li a {
  background-color: #fff;
  border-left: 1px solid #999;
  display: block;
  font-weight: bold;
  text-decoration: none;
  padding: 12px 30px 12px 20px;
  -webkit-transition: background 600ms linear;
}

ul#top-navigation li a.active, ul#top-navigation li a:hover, ul#top-navigation li a:active {
  background-color: #FEF6D2;
}

ul#top-navigation li:first-child a:hover, ul#top-navigation li:first-child a:active, ul#top-navigation li:first-child a.active {
  background-image: -moz-linear-gradient(left, #fff, #FEF6D2);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(255,255,255)), color-stop(0.5, rgb(254,246,210)));
}

ul#top-navigation li:last-child a:hover, ul#top-navigation li:last-child a:active, ul#top-navigation li:last-child a.active {
  background-image: -moz-linear-gradient(right, #fef6d2, #fff);
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, #fef6d2), color-stop(0, #fff));
}

/* Image Cut-out in billboard area */
div#content div.overlap {
  background: url(/images/dr_bub.png) right bottom no-repeat;
  border-bottom-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-left-radius: 9px;
  bottom: 0;
  height: 320px;
  left: 0;
  position: absolute;
  width: 188px;
}

/* Text and image in content on home page */
div#content div.blurb {
  font-family: Times, serif;
  min-height: 140px;
  padding: 15px 0 0;
  padding-left: 215px;
}

div#content div.blurb p.image {
  clear: left;
  float: left;
  margin: 0;
}

div#content div.blurb p.image + p {
  float: left;
  font-size: 25px;
  line-height: 1.3;
  padding: 0 25px;
  width: 451px;
}

/* Bottom bar of content area on home page */
div#content div.bar {
  background-color: #E87511;
  -moz-border-radius: 0 0 11px 11px;
  -webkit-border-bottom-left-radius: 11px;
  -webkit-border-bottom-right-radius: 11px;
  border-radius: 0 0 11px 11px;
  height: 53px;
}

.home div#content div.column, .practices.index div#content div.column {
  border: 0;
  overflow: visible;
  padding: 0;
  margin: 0;
}

div#content div.column {
  border-left: 1px solid #999;
  clear: right;
  overflow: hidden;
  padding: 20px 40px 40px;
}

/* Headers */

div.column h3, div.column h4, div.column ol, div.column ul {
  color: #E87511;
}

div.column p + h3, div.column h4 {
  margin-top: 10px;
}

/* Lists */

div.column ul {
  /* Chrome places marker on right for some reason unless list-style-position is set to inside */
  margin-left: 18px;
}

div.column ol {
  list-style-position: inside;
}

div.column ul ul, div.column .service ul {
  color: #003F77;
  /* Revert list-style-position so that when items wrap they line up with the line above */
  list-style-position: outside;
  list-style-type: disc;
}

div.column ul ul, div.column div.service {
  margin-left: 20px;
}

div.column p, div.column li {
  line-height: 1.5;
  padding-top: 5px;
  padding-bottom: 5px;
}

div.column dl {
  background: #EBEFF2;
  border: 1px solid #999;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 25px 0;
  overflow: hidden;
}

div.column dl + p {
  clear: left;
}

div.column dt, div.column dd {
  background: #fff;
  padding: 10px;
}

div.column dt {
  background: #EBEFF2;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-radius: 5px 0 0 5px;
  clear: left;
  color: #003F77;
  float: left;
  font-weight: bold;
  height: 100%;
  text-transform: uppercase;
  width: 120px;
}

div.column dd {
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-radius: 0 5px 5px 0;
  float: right;
  padding-left: 10px;
  width: 450px;
}

/* Forms */
.admin.index input[type="text"], .admin.index textarea, .practices.edit input[type="text"], .practices.edit textarea {
  width: 350px;
}

.admin.index textarea, .practices.edit textarea {
  height: 80px;
}

input[type="submit"] {
  color: #003F77;
  font-size: 18px;
}

.new input[type="text"]:focus, .admin:not(.hours) input[type="text"]:focus, .edit input[type="text"]:focus, .admin.index input[type="text"]:focus {
  font-size: 18px;
  margin-left: -20px;
  -webkit-transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  width: 390px;
}

.sequence-number input {
  width: 25px;
}

/* Tables */
div.column table {
  border-collapse: collapse;
  margin: 15px 0;
}

div.column thead th {
  font-weight: bold;
  padding: 5px 10px;
  text-align: left;
  text-transform: uppercase;
}

div.column table td {
  padding: 5px 10px;
  vertical-align: top;
}

div.column table td input {
  width: 90px;
}

div.column table td input.comment {
  width: 200px;
}

div.column table td:first-child, div.column table th:first-child {
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-radius: 5px 0 0 5px;
}

div.column table td:last-child, div.column table th:last-child {
  -moz-border-radius: 0 8px 8px 0;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-radius: 0 8px 8px 0;
}

div.column td.comment {
  font-style: italic;
}

div.column tr:nth-child(odd) {
  background-color: #fff;
  background-color: rgba(255,255,255,0.7)
}

div.column thead tr, div.column thead:nth-child(odd) tr, div.column tr:nth-child(even) {
  background-color: #eceff2;
  background-color: rgba(236,239,242,0.7)
}

/* Center Navigation */
#icon-navigation {
  clear: both;
  padding: 15px 0;
}

#icon-navigation li {
  margin: 0 15px;
  border-left: 1px solid #999;
  padding-left: 50px;
  padding-right: 20px;
}

#icon-navigation li:first-child {
  border: 0;
}

#icon-navigation li a {
  background-image: url(/images/sprite-icon_navigation.png);
  background-repeat: no-repeat;
  display: block;
  font-size: 12px;
  font-weight: bold;
  min-width: 85px;
  padding: 75px 0 0;
  text-align: center;
  text-decoration: none;
  opacity: 0.6;
  -webkit-transition: opacity 300ms linear;
  -moz-transition: opacity 300ms linear;
}

#icon-navigation li a:hover {
  opacity: 1.0;
}

.nav-appointment {
  background-position: 20px 0;
}

.nav-appointment:hover {
  background-position: 20px -115px;
}

.nav-contact {
  background-position: -136px 0;
}

.nav-contact:hover {
  background-position: -136px -115px;
}

.nav-forms {
  background-position: -376px 0;
}

.nav-forms:hover {
  background-position: -376px -109px;
}

.nav-directions {
  background-position: -262px 5px;
}

.nav-directions:hover {
  background-position: -262px -110px;
}

.nav-st-lukes {
  background-position: -490px 10px;
}

.nav-st-lukes:hover {
  background-position: -490px -105px;
}

/* Bottom Half Box and Ads */
div.half.box {
  background: url(/images/grey_gradient.png) top repeat-x #fff;
}

div.half, div.ad {
  float: left;
  min-height: 180px;
}

div.half .split {
  min-width: 220px;
  padding: 2px 0px;
}

div.half .split:first-child {
  margin: 0 20px 0 0;
}

div.half .split h3 {
  padding: 3px 0 8px;
}

div.half ul, div.half p, div.half a {
  font-size: 14px;
  font-weight: bold;
}

div.half ul {
  list-style-position: inside;
  min-height: 110px;
}

div.half .split:first-child ul {
  border-right: 1px solid #999;
  padding-right: 30px;
}

div.half ul li {
  color: #003F77;
  margin: 4px 0;
}

div.half ul li span {
  color: #000;
}

div.half ul + p {
  
}

div.half + div.half {
  float: right;
}

/* Ad styles */
div.ad {
  height: 180px;
  margin-left: 25px;
  padding: 0;
  width: 224px;
}

div.ad:first-child {
  margin-left: 10px;
}

div.ad a {
  display: block;
  height: 100%;
  overflow: hidden;
  text-indent: -9999px;
}

/* Footer Styles */
div#footer {
  clear: both;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  padding-bottom: 15px;
}

div#footer div.center div {
  padding: 0 40px;
}

div#footer ul, div#footer p {
  float: left;
}

div#footer p {
  padding-top: 5px;
}

/* Address in Footer */
div#footer p:first-child {
  margin-right: 22px;
}

/* Social Icons - Twitter, etc. */
#social-navigation li {
  margin: 0 5px;
}

#social-navigation a {
  background-image: url(/images/sprite-social_navigation.png);
  background-repeat: no-repeat;
  display: block;
  text-indent: -9999px;
}

/* Social Icons */
a.twitter {
  background-position: 0 -164px;
  height: 32px;
  width: 32px;
}

a.facebook {
  background-position: 0 0;
  height: 32px;
  width: 32px;
}

a.linkedin {
  background-position: 0 -82px;
  height: 32px;
  width: 30px;
}

a.youtube {
  background-position: 0 -246px;
  height: 32px;
  width: 32px;
}

div#footer p.copyright {
  float: right;
}

/* 
* Individual Page Styles 
*/

/* Physicians and Staff Page */
.employee {
  border-bottom: 1px solid #003F77;
  overflow: hidden;
  padding: 20px 0;
}

.employee:last-child, .employee:last-of-type {
  border-bottom: 0;
}

.employee p {
  width: 470px;
}

.employee + h5 {
  margin-left: 20px;
  margin-bottom: 40px;
}

/* This is also used on the insurance page */
.photo {
  float: right;
  margin: 0 0 10px 10px;
}

.employee .photo {
  margin-top: 7px;
  width: auto;
}

/* Make an Appointment */
.buttons {
  overflow: hidden;
}

.button.box {
  padding: 5px 10px;
}

.button {
  background-color: #EBEFF2;
  background-image: -moz-linear-gradient(left top, left bottom, from(#edf0f2), to(#d6d9db));
  background-image:  -webkit-gradient(linear, left top, left bottom, from(#edf0f2), to(#d6d9db));
  float: left;
  margin: 10px 0;
  text-align: center;
}

.button a {
  display: block;
  text-decoration: none;
}

.buttons .separator {
  float: left;
  font-size: 28px;
  font-weight: bold;
  margin: 12px 0 0 8px;
  text-align: center;
}

.buttons .button {
  width: 274px;
}

.buttons .separator + .button {
  float: right;
}

.buttons strong {
  font-size: 150%;
}

/* Contact Us */
div.column h5 {
  font-size: 14px;
  margin-top: 5px;
}

div.column h5 + p {
  padding-top: 0;
}

/* Entire directions section on right */
div#map {
  float: right;
  margin-left: 50px;
}

div#map form {
  overflow: hidden;
}

div#map p label {
  display: block;
  width: 300px;
}

div#map textarea {
  border: 1px solid #003F77;
  height: 50px;
  width: 350px;
}

/* Paragraph containing submit button */
div#map form p + p {
  overflow: hidden;
}

/* Submit button */
div#map .button {
  cursor: pointer;
  margin-top: 0;
}

/* Patient Forms */
div.column .file {
  float: left;
  margin: 10px 55px 18px 0;
  width: 223px;
}

.file a {
  background: url(/images/form_icon.png) 10px center no-repeat  #ebeff2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: block;
  font-weight: bold;
  height: 46px;
  padding: 2px 0 2px 70px;
  text-decoration: none;
}

.file a:hover {
  background-color: #FEF5D4;
}

/* Adobe Reader Link on Forms Page */
div.column .adobe {
  border-top: 1px solid #999;
  clear: both;
  padding-top: 20px;
}

div.column .adobe a {
  background: url(/images/adobe_reader.png) no-repeat left;
  color: #000;
  display: block;
  font-size: 12px;
  min-height: 34px;
  padding-left: 120px;
  text-decoration: none;
}

/* News & Events */
div.column .date {
  background-color: #EBEFF2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #003F77;
  margin-bottom: 5px;
  padding: 5px 0 5px 10px;
}

.news-post .photo {
  width: 150px;
}

.news-post {
  margin-bottom: 20px;
  padding-left: 10px;
}

.news-post + .news-post h3 {
  border-top: 1px solid #999;
  padding-top: 20px;
}

.news-post h3 a {
  color: #E87511;
}

.news-post .content {
  width: 450px;
}

.news-post .content ul {
  color: #003F77;
}

.news-post + .date {
  clear: both;
}

.news-post h4.category {
  margin-top: 0;
}