/*///////////////////// ////////// STRUCTURE /////////////////////*/ body { background: #FFF url("/images/site_bg.jpg") no-repeat center top; text-align: center; padding: 0; margin: 0; font-family: "Lato", arial, sans-serif; color: #4e2c0d; } img { max-width: 100%; height: auto; } header, main_content, footer { display: block; margin: 0 auto; padding: 0; top: 0; width: 950px; position: relative; clear: both; } header { height: 200px; } logo { display: block; float: left; position: absolute; top: 0; left: 0; z-index: 5; } social, mlist { display: block; text-align: right; } mlist { padding-top: 20px; } mlist div { display: inline; } mlist form input[type="email"] { background: #653f1b; color: #bb8a6a; border: 1px solid #a6a6a8; font-size: 0.8em; width: 15em; padding: 5px; } mlist form ::-webkit-input-placeholder { color: #bb8a6a; } mlist form :-moz-placeholder { /* Firefox 18- */ color: #bb8a6a; } mlist form ::-moz-placeholder { /* Firefox 19+ */ color: #bb8a6a; } mlist form :-ms-input-placeholder { color: #bb8a6a; } mlist form input[type="submit"] { background: #FFF; color: #653f1b; text-transform: uppercase; font-size: 12px; width: 15em; font-weight: bold; padding: 5px; border: 1px solid #FFF; } social { color: #FFF; padding-top: 20px; } div#main_nav { display: block; clear: both; width: 100%; position: absolute; left: 0; top: 135px; z-index: 10; } div#main_nav div { float: left; padding-right: 120px; text-align: left; } div#main_nav div.last_item { padding-right: 0; } div#main_nav div a, div#main_nav div a:link { text-decoration: none; color: #d6c69a; } div#main_nav div a:hover, div#main_nav div a:active { color: #FFF; } div#main_nav div a.current_page { color: #FFF; } div.page { text-align: left; max-width: 900px; margin: 0 auto; font-size: 0.8em; } div.divider { height: 1px; border-top: 1px dashed #bcb5af; margin: 2em 0; width: 90%; } h1 { font-family: "Neuton"; font-weight: 200; font-size: 2.5em; line-height: 1em; } show_block { display: block; text-align: left; } show_block h1 { font-family: "Neuton"; font-weight: 200; font-size: 2.5em; line-height: 1em; padding: 0; margin: 0; } show_block h1 a, show_block h1 a:link { color: #4e2c0d; text-decoration: none; } show_block h2 { font-family: "Neuton"; font-style: italic; font-size: 1.3em; font-weight: 400; padding: 0; margin: 0.3em 0; } show_block h3 { color: #0d8298; text-transform: uppercase; font-size: 1em; font-weight: 800; padding: 0; margin: 0 0 0.5em 0; } show_block h4 { font-family: Neuton; font-weight: 200; font-size: 2em; color: #4e2c0d; padding: 0; margin: 1em 0; } show_block h5 { font-size: 0.8em; color: #8d7453; font-weight: 700; padding: 0; margin: 0; } div.home_description, div.show_description, div.show_press { font-size: 0.8em; margin-bottom: 1em; } div.show_press { padding: 3em 4em; } div.blue_border img { border-color: #108196; } div.orange_border img { border-color: #cf640e; } .artist_photo img { max-width: 100%; height: auto; border: 5px solid; border-color: #4e2c0d; } a.ticket_button, a.ticket_button:link { display: block; padding: 0.5em; background: #4e2c0d; color: #FFF; font-family: "Neuton"; font-size: 1.5em; font-weight: 200; text-align: center; margin: 2em 0; } a.ticket_button:hover, a.ticket_button:active { background: #cf640e; color: #FFF; } a, a:link { text-decoration: none; color: #cf640e; } a:hover, a:active { color: #0d8298; } /*///////////////////// ////////// HOME PAGE /////////////////////*/ home_left { display: block; float: left; width: 60%; } home_left show_block h4 { margin: 0 0 0.2em 0; } home_right { display: block; float: right; width: 30%; text-align: left; } address_block, upcoming_block, upcoming_title { display: block; color: #FFF; width: 100%; margin-bottom: 1em; padding: 20px 30px; font-size: 0.9em; line-height: 1.3em; } address_block { background: #1a98af; } address_block span.dim { color: #91d4e1; } upcoming_block { background: #cf640e; } upcoming_title { background: #cf640e; font-size: 1.2em; padding-top: 15px; padding-bottom: 15px; font-family: "Lato"; font-weight: 800; text-transform: uppercase; margin-bottom: 1px; text-align: center; } upcoming_block h1 { font-family: "Neuton"; font-weight: 300; font-size: 2em; color: #FFF; margin: 0; padding: 0; } upcoming_block h1 a, upcoming_block h1 a:link { color: #FFF; } upcoming_block h2 { font-family: "Lato"; font-weight: 400; font-size: 0.8em; margin: 0; padding: 0; } upcoming_block h3 { text-transform: uppercase; color: #f2b585; font-size: 1em; font-weight: 800; margin: 0; padding: 0; } upcoming_block a.ticket_button, upcoming_block a.ticket_button:link { background: #FFF; color: #cf640e; width: 50%; margin: 0.5em 0; } upcoming_block a.ticket_button:active, upcoming_block a.ticket_button:hover { background: #f0b585; color: #cf640e; } div.spacer { height: 20px; clear: both; border: 1px solid #FFF; } /*///////////////////// ////////// SHOWS PAGES /////////////////////*/ show_header { display: block; text-align: center; } show_header a.ticket_button, show_header a.ticket_button:link { width: 6em; border-radius: 10px; margin: 0 auto; margin-top: 2em; margin-bottom: 2em; font-size: 1.5em; padding: 0.2em; } div.left_column { float: left; width: 48%; } div.right_column { float: right; width: 48%; } a.artist_link, a.artist_link:link { display: block; color: #FFF; padding: 1em 0; width: 100%; font-family: "Neuton"; font-weight: 200; font-size: 1.1em; text-transform: lowercase; text-align: center; float: none; margin: 1em 0; } a.blue_box, a.blue_box:link { background: #108196; } a.orange_box, a.orange_box:link { background: #cf640e; } a.artist_link:hover, a.artist_link:active { background: #4e2c0d; } div.video_container { position: relative; width: 100%; height: 0; padding-bottom: 60%; } .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*///////////////////// ////////// PRESS PAGE /////////////////////*/ .pull_quote { padding: 0 0 5em 75px; min-height: 75px; background: url("images/quotation_mark.jpg") top left no-repeat; } .read_more { clear: both; margin-top: 0.5em; text-align: right; } /*///////////////////// ////////// ADMIN AREA /////////////////////*/ div#list_holder { text-align: left; } div#form_holder { width: 70%; margin: 0 auto; } form div { clear: both; margin-bottom: 2em; } form label { display: block; padding: 5px 0; } form label.left_side { display: inline; } form input, form textarea { width: 100%; } form input[type='radio'], form input[type='file'] { width: 30%; } form textarea { height: 3em; } form textarea.medium { height: 10em; } form textarea.tall { height: 30em; } form input[type='submit'], form input[type='button'] { font-family: "Neuton"; font-weight: 200; padding: 10px 0; font-size: 1.2em; color: #FFF; background: #cf640e; } div.map { float: right; width: 400px; margin-left: 20px; } a.mobile_menu { display: none; } /** * Media Queries * ----------------------------------------------------------------------------- */ /* Does the same thing as , * but in the future W3C standard way. -ms- prefix is required for IE10+ to * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor * the meta tag. See https://core.trac.wordpress.org/ticket/25888. */ @-ms-viewport { width: device-width; } @viewport { width: device-width; } @media screen and (max-width: 736px) { logo { float: none; width: 420px; max-width: 100%; position: relative; margin: 0 auto; } mlist, social, div#main_nav { display: none; } a.mobile_menu { display: block; color: #FFF; text-transform: uppercase; position: relative; } div#main_nav { position: relative; float: none; clear: both; background: #4f2c0e; top: 10px; } div#main_nav div { float: none; clear: both; text-align: center; width: 100%; border-bottom: 1px solid #FFF; padding: 1em 0; text-transform: uppercase; } main_content, header { max-width: 95%; } home_left, home_right { width: 100%; float: none; clear: both; } address_block, upcoming_block, upcoming_title { width: 80%; } upcoming_block { text-align: center; } upcoming_block a.ticket_button, upcoming_block a.ticket_button:link { width: 80%; margin: 0 auto; margin-top: 0.5em; margin-bottom: 1.5em; } div.show_press { padding: 0; } div.map { float: none; clear: both; width: 80%; margin: 0 auto; } iframe { max-width: 100%; } }