@import url('/Content/Style/fonts.css');

body { font-family: 'royo_sansregular'; }
h1 { font-size: 24px; color: #3366cc; margin: 0px; padding: 0px; }
h2 { font-size: 18px; text-transform: uppercase; color: #3366cc; margin: 0px; padding: 0px; }
img { border: 0px; }

input[type="image"] { outline: none; }
input[type="submit"] { outline: none; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea { font-family: Arial, sans-serif; padding: 5px; font-size: 18px; width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; color: #333333; border: 1px solid #3366cc;}
select { font-family: Arial, sans-serif; padding: 5px; font-size: 18px; width: 100%; color: #333333; border: 1px solid #3366cc; }
*:focus {outline:0 !important;}
.submit { background: #3366cc; border: 0px; color: #FFFFFF; text-transform: uppercase; padding: 10px 20px; }

#royo-body { margin: auto; width: 900px; background: url('/Content/Images/royo-signature.png') no-repeat; background-position-x: right; background-position-y: 30px; position: relative; } 
#royo-signature { position: absolute; right: 0px; top: 10px; height: 290px; }
#royo-logo { width: 110px; height: 110px; margin: 0px 20px 10px 0px; display: inline-block; }
#royo-nav { width: 760px; display: inline-block; position: absolute; top: 80px; left: 125px; vertical-align: top; }
#royo-nav a { text-decoration: none; text-transform: uppercase; display: inline-block; padding: 3px 0px; }
#royo-nav a.active { border-bottom: 1px solid #333333; border-top: 1px solid #333333; }
#royo-nav div.nav-item { display: inline-block; position: relative; margin-right: 45px; }
#royo-nav div.nav-item a { margin-right: 0px; color: #333333; }
#royo-nav div.sub-menu { visibility: collapse; display: none; width: 220px; padding: 0px; position: absolute; top: 25px; left: 0px; background: #FFFFFF; border: 1px solid #999999; z-index: 9999; }
#royo-nav div.sub-menu div { font-size: 15px; padding: 5px 10px; }
#royo-nav div.sub-menu div:hover { background: #cccccc; }

#royo-slideshow { border: 2px solid #000; width: 830px; height: 340px; box-shadow: 0 0 20px rgba(0,0,0,0.4); position: relative; }
#royo-slideshow > div { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }

#royo-quotes { margin: 10px auto; width: 700px; }
#royo-quotes img { width: 700px; }

#royo-footer { margin: auto; width: 900px; font-size: 12px; padding: 30px 10px; font-family: Arial, sans-serif; }

#royo-info { display: table; }
#royo-info .header { text-align: center; }
#royo-info .col { width: 295px; display: table-cell; padding: 5px 10px; position: relative; vertical-align: top; }
#royo-info .col p { padding: 0px; margin: 0px; font-family: Arial, sans-serif; font-size: 14px; }
#royo-info .col table { vertical-align: top; }
#royo-info .col-divider { width: 1px; margin: 0px 5px 0px 10px; height: 100%; background: #989898; display: table-cell; }
#royo-info .col-divider-clear {  width: 1px; margin: 0px 5px 0px 10px; height: 100%; background: #FFF; display: table-cell; }
#royo-info .more { background: #FFF; padding: 0px 5px 2px 15px; position: absolute; right: 5px; bottom: 2px; }
#royo-info .more a { color: #3366cc; font-family: Arial, sans-serif; font-size: 12px; text-transform: uppercase; text-decoration: underline; }

#royo-info-page td { vertical-align: top; }
#royo-info-page #side-nav { width: 190px; margin-top: 85px; vertical-align: top; }
#royo-info-page #side-nav a { margin-bottom: 35px; display: block; text-transform: uppercase; text-decoration: none; color: #333333; }
#royo-info-page #side-nav a.active { color: #3366cc; }
#royo-info-page #content { width: 630px; }
#royo-info-page.serigraphy { background: url('/Content/Images/background_serigraphy.png') bottom right no-repeat; }
#royo-info-page.glossary { background: url('/Content/Images/background_glossary.png') bottom right no-repeat; }
#royo-info-page #content p { font-size: 12px; font-family: Arial, sans-serif; line-height: 18px; }
#royo-info-page.glossary #content p { margin-top: 0px; }
#royo-info-page h1 { margin-top: 30px; margin-bottom: 25px; text-transform: uppercase; }
#royo-info-page h2 { margin-top: 15px; margin-bottom: 0px; text-transform: uppercase; color: #333333; }

#royo_artwork { margin-top: 20px; }
#royo_artwork td { vertical-align: top; }
#royo_artwork .thumb { height: 155px; width: 155px; margin-right: 30px; margin-bottom: 5px; }
#royo_artwork .thumb img { max-height: 145px; max-width: 145px; border: 1px solid #999999; padding: 5px; }
#royo_artwork a.art-link { display: block; margin-bottom: 30px; color: #3366cc; text-decoration: none; text-transform: uppercase; font-size: 12px; }

#royo-art-details { margin-top: 30px; }
#royo-art-details td { vertical-align: top; }
#royo-art-details #thumb { width: 440px; margin-right: 30px; }
#royo-art-details #thumb img { border: 1px solid #999999; max-width: 428px; padding: 5px; }
#royo-art-details #content p { font-size: 12px; font-family: Arial, sans-serif; line-height: 18px; margin-top: 0px; }
#royo-art-details h1 { margin-top: 0px; margin-bottom: 25px; text-transform: uppercase; }
#royo-art-details h2 { margin-top: 15px; margin-bottom: 0px; text-transform: uppercase; color: #333333; }

#royo_books { margin-top: 20px; }
#royo_books table { border: 0px; border-bottom: 1px solid #333333; width: 800px; }
#royo_books td { vertical-align: top; padding-top: 15px; }
#royo_books p { font-size: 12px; font-family: Arial, sans-serif; line-height: 18px; margin-top: 0px; }
#royo_books .thumb { width: 220px; padding-right: 30px; padding-top: 5px; text-align: center; margin: auto; }
#royo_books .thumb img {  max-width: 218px; margin: auto; border: 1px solid #999999; }
#royo_books .content { width: 750px; }
#royo_books h1 { margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; }
#royo_books h2 { margin-top: 15px; margin-bottom: 0px; text-transform: uppercase; color: #333333; }
#royo_books .availability { text-transform: uppercase; margin-bottom: 15px; }
#royo_books .availability a { text-decoration: none; }

#royo_exhibitions { margin-top: 20px; }
#royo_exhibitions .header { background: #3366cc; color: #FFFFFF; text-transform: uppercase; padding: 10px; margin: 10px 0px; }
#royo_exhibitions p { font-size: 12px; font-family: Arial, sans-serif; line-height: 18px; margin-top: 0px; }
#royo_exhibitions td { vertical-align: top;}
#royo_exhibitions h1 { margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; }
#royo_exhibitions h2 { margin-top: 15px; margin-bottom: 0px; text-transform: uppercase; color: #333333; }
#royo_exhibitions_list { width: 780px; margin: auto; }
#royo_exhibitions_list .thumb { width: 190px; margin-right: 30px; }
#royo_exhibitions_list .thumb img { max-width: 188px; margin: auto; border: 1px solid #999999; }

#royo-contact #royo-contact-form { width: 780px; margin: auto; }
#royo-contact h1 { margin-top: 30px; margin-bottom: 25px; text-transform: uppercase; }
#royo-contact h2 { margin-top: 15px; margin-bottom: 0px; text-transform: uppercase; color: #333333; }
#royo-contact p { font-size: 12px; font-family: Arial, sans-serif; line-height: 18px; margin-top: 0px; }
#royo-contact .label { margin: 0px 15px 0px 5px; text-transform: uppercase; }

.admin { width: 700px; }
.admin h1 { margin-top: 30px; margin-bottom: 25px; text-transform: uppercase; }
.admin h2 { margin-top: 15px; margin-bottom: 0px; text-transform: uppercase; color: #333333; }
.admin #thumb { width: 150px; border: 1px solid #999999; position: relative; text-align: center; }
.admin #thumb img { max-width: 150px; }
.admin #thumb input[type="submit"] { position: absolute; bottom: 0px; right: 0px; padding: 5px 10px; border: 0px; }

.admin-grid { border: 0px; width: 700px; }
.admin-grid th { border-bottom: 1px solid #333333; text-transform: uppercase; color: #FFFFFF; background: #3366cc; padding: 5px; }
.admin-grid td { border: 1px solid #333333; padding: 5px; font-family: Arial, sans-serif; }
.admin-grid .alt-row { background: #cccccc; }

.photos { vertical-align: top; font-size: 0px; }
.photos .col { width: 310px; margin: 0px; padding: 0px; float: left; display: inline-block; vertical-align: top; }
.photos img { width: 310px; margin: 0px; padding: 0px; display: inline; vertical-align: top; }