/* CSS Document */
/* (c) Rodan Media 2014 - 2020 */

/*
	*** COMMON ELEMENTS
	*/
	
*{padding: 0px; margin: 0px;}
html{height: 100%; width: 100%; background: #FFF; font-family: 'Arial', Helvetica, sans-serif; color: #101;}
body{height: 100%; max-width: 100%; margin: 0px; padding: 0px;}
.clear{clear: both;}

#header{margin: 0px auto; padding: 12px; max-width: 100%; text-align: center;}
#header div{text-align: center;}
#tags{margin: 0px auto; padding: 6px 12px; max-width: 90%}
#footer{margin: 0px auto; padding: 20px; max-width: 100%; text-align: center;}
#main{margin: -24px auto 0px; max-width: 80%; border-bottom: 1px solid #111;}
#main section{width: 90%; margin: 24px auto 36px; padding-bottom: 24px;}
#menu{margin: 0px auto; max-width: 90%; text-align: center;}
section .caseimg{float: left; width: 38%; padding: 1%;}
section .caseimg img{max-width: 100%; height: auto;}
section .casedata{float: right; width: 54%; padding-left: 3%; border-left: 4px solid #423142;}

/* 
	*** CONTACT PAGE SPECIFIC ITEMS
	*/

h2.address_icon,h2.archive_icon,h2.at_icon,h2.audio_arc_icon,h2.email_icon,h2.fax_icon,h2.graphic_arc_icon,h2.letter_icon,h2.scale_icon,h2.tel_icon,h2.vcard_icon,h2.vox_arc_icon,h2.web_arc_icon{display: inline-block; padding: 0px; font-size: 28px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 4px solid #423142;}

h2.address_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_address.png)}
h2.archive_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_archive.png)}
h2.at_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_at.png)}
h2.audio_arc_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_audio_archive.png)}
h2.email_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_email.png)}
h2.fax_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_fax.png)}
h2.graphic_arc_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_graphic_archive.png)}
h2.letter_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_letter.png)}
h2.scale_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_scales.png)}
h2.tel_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_tel.png)}
h2.vcard_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_vcard.png)}
h2.vox_arc_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_vox_archive.png)}
h2.web_arc_icon::before{display: inline-block; margin-right: 12px; content: url(/graphics/assets/icon_web_archive.png)}

/*
	*** MENU AND LINKS
	*/

ul.menu,ul.submenu{list-style-type: none; margin: 0px auto; padding: 0px 0px 4px; text-transform: uppercase;}
ul.menu li,ul.submenu li{display: inline-block; margin-right: 12px;}
ul.menu{margin-top: 2px; font-size: 22px; font-weight: bold;}
ul.submenu{font-size: 20px; font-weight: normal; text-align: left; border-bottom: 1px solid #222;}
ul.menu li:last-child,ul.submenu li:last-child{margin-right: none !important;}
ul.menu li a:focus, ul.menu li a:hover{background-color: #ff5b03 !important; border: 1px solid #622301 !important;}

a, a:link, a:visited{color: #000000; padding: 3px 7px; font-family:'Futura W01 Display', Impact, 'Arial Black', sans-serif; text-decoration: none; letter-spacing: 0.1em; background-color: #FFF; border: 1px solid #101; transition: all ease-in-out 250ms;}
a:focus, a:hover{color: #FFF; background-color: #333;}
ul.submenu li a:link, ul.submenu li a:visited{color: #222; font-weight: bold !important; border: 0px; text-decoration: none;}
ul.submenu li a:focus, ul.submenu li a:hover{background-color: #FFF !important; border-bottom: 4px solid #222 !important;}

#footer span.footer_links{margin: 6px auto 12px;}
#footer a:link, #footer a:visited{font-family:'Futura W01 Book', 'Arial', Helvetica, sans-serif; color: #622301; padding: 0px 2px !important; border: 0px !important;}
#footer a:focus, #footer a:hover{color: #ff5b03; background-color: #fff; border-bottom: 2px solid #101 !important;}

/* 
	*** FORMS
	*/

form div{width: 100%; margin-bottom: 12px;}
label{text-transform: uppercase; font-size: 14px;}
input + label span, input[type="text"] + label span,input[type="email"] + label span,input[type="tel"] + label span,textarea + label span{display: block;}
input,textarea{display: block; width: 90%; font-size: 16px; padding: 3px; border: 1px solid #423142;}
input[type="submit"]{width: auto !important;}
input:focus,textarea:focus{border:1px solid #63905d; background-color: #d8ead7;}
input[type="checkbox"]{display:none;}
input[type="checkbox"] + label span{display: inline-block; width:16px; height:16px; margin:-2px 4px 0 0; vertical-align: middle; background:url(/graphics/assets/check_box.png) left top no-repeat;}
input[type="checkbox"]:checked + label span{background:url(/graphics/assets/check_box.png) -16px top no-repeat;}
input[type="radio"]{display:none;}
input[type="radio"] + label span{display: inline-block; width:16px; height:16px; margin:-2px 4px 0 0; vertical-align: middle; background:url(/graphics/assets/radio_button.png) left top no-repeat;}
input[type="radio"]:checked + label span{background:url(/graphics/assets/radio_button.png) -16px top no-repeat;}
/* anti-spam class */
/* technique from Thomas Landauer - www.landauer.at */
.noshow {display:none;}

/*
	*** Colors
	*/
.red{color: #C00;}
.green{color: #090;}
.blue{color: #009;}
.rodan_orange{color: #ff5b03;}
.rodan_purple{color: #450045;}
.rodan_burnt_purple{color: #423142;}
.rodan_burnt_orange{color: #622301;}
.rodan_sage{color: #63905d;}

h1.rp, h2.rp, h3.rp, h1.rbp, h2.rbp, h3.rbp, h1.ro, h2.ro, h3.ro, h1.rbo, h2.rbo, h3.rbo,h1.rs,h2.rs,h3.rs,h4.rp,h4.rbp,h4.ro,h4.rbo,h4.rs{padding: 7px; margin: 9px 0px 12px; color: #fff;}
h1.rp, h2.rp, h3.rp,h4.rp{background-color: #450045;}
h1.rbp, h2.rbp, h3.rbp,h4.rbp{background-color: #423142;}
h1.ro, h2.ro, h3.ro,h4.ro{background-color: #ff5b03;}
h1.rbo, h2.rbo, h3.rbo,h4.rbo{background-color: #622301;}
h1.rs, h2.rs, h3.rs,h4.rs{background-color: #63905d;}

@media (max-width: 768px){
	body{font-size: 14px;}
	#header img{max-width: 360px !important; height: auto !important;}
	ul.menu li{display: block; width: 90% !important; margin: 0px auto !important; text-align: center; margin-bottom: 16px !important;}
	ul.menu li:last-child{margin-bottom: 0px !important;}
	ul.menu{font-size: 18px;}
	ul.submenu{font-size: 22px; border-bottom: none !important}
	ul.submenu li{display: block !important; margin: 0px auto !important; text-align: center !important; margin-top: 12px !important;}
	a:link, a:visited, a:focus, a:hover{width: 100%; font-weight: normal;}
	h1.rp, h2.rp, h3.rp, h1.rbp, h2.rbp, h3.rbp, h1.ro, h2.ro, h3.ro, h1.rbo, h2.rbo, h3.rbo{text-align: center;}
	section .caseimg{display: block; float: none !important; margin: 0px auto !important; width: 80%; position: relative;}
	section .caseimg img{max-width: 100%; height: inherit;}
	section .casedata{float: none !important; width: 98% !important; margin: 8px auto 12px !important; padding-top: 16px; border-left: none !important; border-top: 4px solid #423142; position: relative;}
	section .casedata h{text-align: center;}
	section .casedata h2{font-size: 17px;}
	section .casedata h3{font-size: 15px;}
	form{text-align: left !important;}
}