/* screen stylesheet for IOD website created : 2009-05-15 last edited : 2010-04-26 4 pages specific design general landscape architecture graphic */ /* -------------------------------------------------------- import reset css */ @import "../../screen_reset.css"; /* ---------------------------------------------------- online font setting */ @font-face { font-family: myHelvetica; src: local("Helvetica Neue"), local("HelveticaNeue"), url(MgOpenModernaRegular.ttf); /* font-weight, font-style ==> default to normal */ } @font-face { font-family: myHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-style: bold; } /* -------------------------------------------------------- general setting */ html {background-color: #DDDDDD;} body {font-size: 86%; background-color: #DDDDDD; color: #000000; min-width: 1000px;} body, th, td, input, select, textarea {font-family: Helvetica, Verdana, "Lucida Grande", Freesans, sans-serif;} h1, h2, h3, h4, h5, h6, #mainnav {font-family: Helvetica, myHelvetica, Arial, Freesans, sans-serif; font-weight: bold;} h1 {font-size: 1.8em;} h2 {font-size: 1.6em;} h3 {font-size: 1.4em;} h4 {font-size: 1.2em;} h5 {font-size: 1.1em;} h6 {font-size: 0.9em;} abbr, acronym {font-variant: small-caps;} hr {border-bottom: 1px solid #FFFFCC;} del {text-decoration: line-through;} ins {text-decoration: underline;} strong {font-weight: bold;} sub {vertical-align: sub; font-size: 0.7em;} sup {vertical-align: super; font-size: 0.7em;} pre, code, tt, xmp {font-family: monospace;} blockquote {margin-left: 40px; margin-right: 40px;} p {margin-bottom: 10px; line-height: 140%;} ul {list-style-type: circle; list-style-position: inside;} /* ------------------------------------------------------ setting navigation */ a:link {color: #CCFF00;} a:visited {color: #99FF00;} a:hover {color: #CCFF99;} a:active {color: #009900;} /* ----------------------------------------------------------- setting table */ table {width: 100%; border-collapse: collapse; font-size: inherit; font: 100%;} th, td {border: solid 1px #555555; padding: 2px 3px;} th {font-weight: bold; text-align: left; vertical-align: top;} th.vertical {text-align: center;} td.number {text-align: right;} tr.odd {background: #EFEFF1;} tr.even {background: #F6F6FA;} .textcenter {text-align: center;} /* ------------------------------------------------------------ setting form */ fieldset {} legend {text-align: right;} label {display: block;} input, select, textarea {border: 1px solid #999999; padding: 1px; font-size: 90%; background-color: #FFFFFF;} input:focus, textarea:focus {border-color: #DDDDDD; background-color: #000000; color: #FFFFFF;} .button { border: 1px solid #AAAAAA; background: #000000; padding: 0 6px; color: #FFFFFF; cursor: pointer; cursor: hand; } .button:hover {background: #000000; color:#FFFFFF;} .button:focus {background: #CC0000;} #sendmail {width: 580px; margin-left: 10px;} #sendmail label {display: block; width: 240px; margin-bottom: 4px; font-weight: bold;} #sendmail input {display: block; width: 240px; margin-bottom: 8px;} #sendmail textarea {display: block; width: 290px; height: 180px; margin-bottom: 8px;} #sendmail input.button {width: 7em; font-weight: bold;} #mailcontent1 {float: left; width: 275px;} #mailcontent2 {float: right; width: 300px;} #searchbar {float: left; width: 230px; height: 20px; padding-top: 2px; background: transparent url("../images/bg_searchbar.png") no-repeat;} #searchbar label {display: inline; padding: 0 3px 0 12px; color: #FFFFFF;} #searchbar input {font-size: 11px;} #searchbar .searchbox {width: 110px;} #searchbar input.button {width: 30px;} /* ---------------------------------------------------------- setting layout */ #container { width: 1000px; margin: 0 auto; background: #FFFFFF url("../images/bg_container.jpg") repeat-y; } #contentcontainer {width: 960px; margin: 0 auto;} #header {width: 960px; height: 120px; margin: 0 auto;} #header h1 {width: 120px; height: 120px; text-indent: -9000em; margin-left: 72px; background: transparent url("../images/logo_trans.png") no-repeat;} #content {width: 960px; height: 600px; background-position: bottom left;} #fullcontent, #detailcontent {width: 960px; height: 360px; margin-top: 40px;} #maincontent {position: relative; float: right; width: 730px; height: 360px; margin-top: 40px;} #gallery {float: right; width: 660px; height: 280px; margin: 38px 30px 0 0; overflow: auto; background-color: #FFFFFF;} #subcontent {float: left; width: 190px; height: 280px; margin: 40px 0 0 10px; overflow: auto;} #splash, #contentbox {width: 680px; height:260px; margin: 15px 0 0 25px;} #detailcontent #maincontent {width: 360px; height: 300px; color: #000000;} #detailcontent #subcontent {width: 570px; height: 300px; margin: 30px 0 0 0; overflow: hidden;} #contentbox {overflow: auto;} #contentbox h4 {clear: left; margin: 20px 10px 4px 0;} #contentbox img {float: left; margin-right: 10px;} #contentbox p {margin-right: 25px;} #contentbox p.address {margin-left: 20px; font-size: 1em;} #maincontent dl {font-size: 0.9em;} #maincontent dt {clear: left; float: left; width: 100px; margin-top: 4px; font-weight: bold;} #maincontent dd {float: left; width: 200px; margin-top: 4px;} #subcontent h3 {margin-top: 6px; font-size: 1.15em; font-weight: normal;} #subcontent p {margin: 10px 10px 0 0; font-size: 0.85em; color: #000000;} #gallery li { float: left; list-style: none; width: 90px; height: 128px; padding: 4px; margin: 0 22px 6px 0; color: #FFFFFF; } #gallery li h4 {font-size: 0.9em; font-weight: normal; margin-bottom: 2px;} #gallery li p {font-size: 0.75em;} #gallerytrack {position: absolute; top: 210px; left: 20px; background-color: #DDDDDD;} #addresscontent {float: left; width: 440px;} #mapcontent {float: right; width: 110px; padding-top: 10px;} #projects {width: 730px; height: 300px; margin: 30px auto 0 auto; background: transparent url("../images/bg_proj_trans.png") repeat;} .servicelist {float: left; width: 160px; height: 280px; border: 10px solid #000000;} .projectlist {float: left; width: 160px; height: 280px; border: 10px solid #FFFFFF;} .projectlist h3, .servicelist h3 {padding-left: 6px; font: normal 1.3em/1.25 Helvetica, myHelvetica, Arial, sans-serif; color: #FFFFFF;} .projectlist li {list-style: none; margin-top: 3px; font-size: 0.85em; line-height: 140%;} .projectlist li a {display: block; padding: 1px 3px;} .servicelist a {color: #FFFFFF;} /* #land.servicelist a:hover {color: #99FF00;} #arch.servicelist a:hover {color: #FFCC99;} #graphic.servicelist a:hover {color: #FF6600;} #land.projectlist {margin-left: 55px; background: transparent url("../images/bg_proj_land.jpg") no-repeat;} #land.servicelist {margin-left: 55px; background: transparent url("../images/bg_serv_land.jpg") no-repeat;} #land.projectlist h3 {margin-top: 130px; background-color: #013F38;} #land.servicelist h3 {margin-top: 250px; padding-right: 5px; background-color: #013F38; text-align: right;} #land li a {color: #FFFFFF; background: transparent url("../images/bg_menu_land.png") repeat;} #land li a:hover {color: #000000; background: transparent url("../images/bg_menu_land.on.png") repeat;} #land li a:active {background: #000000;} #arch.projectlist {margin-left: 36px; background: transparent url("../images/bg_proj_arch.jpg") no-repeat;} #arch.servicelist {margin-left: 36px; background: transparent url("../images/bg_serv_arch.jpg") no-repeat;} #arch.projectlist h3 {margin-top: 80px; background-color: #663300;} #arch.servicelist h3 {margin-top: 10px; background-color: #663300;} #arch li a {color: #FFFFFF; background: transparent url("../images/bg_menu_arch.png") repeat;} #arch li a:hover {color: #000000; background: transparent url("../images/bg_menu_arch.on.png") repeat;} #arch li a:active {background: #000000;} #graphic.projectlist {margin-left: 36px; background: transparent url("../images/bg_proj_graphic.jpg") no-repeat;} #graphic.servicelist {margin-left: 36px; background: transparent url("../images/bg_serv_graphic.jpg") no-repeat;} #graphic.projectlist h3 {margin-top: 180px; background-color: #333333;} #graphic.servicelist h3 {margin-top: 160px; background-color: #333333;} #graphic li a {color: #FFFFFF; background: transparent url("../images/bg_menu_graphic.png") repeat;} #graphic li a:hover {color: #000000; background: transparent url("../images/bg_menu_graphic.on.png") repeat;} #graphic li a:active {background: #000000;} */ .date {font-size: 0.8em; line-height: 110%;} .mailus {margin-left: 20px;} .description {margin-left: 10px; font-size: 0.9em;} #footer { clear: both; width: 960px; margin: 40px auto 0 auto; padding: 10px 0; font-size: 0.75em; color: #000000; } #footer p {float: left; margin-left: 10px;} #footer img {float: right; margin-right: 10px;} #webbadgebox {clear: both; width: 960px;} #webbadgebox img {float: left; margin-left: 10px;} /* -------------------------------------------- setting listing and paginate */ #listing {list-style: none; padding: 0 10px 30px 0; width: 648px;} #listing li {margin-bottom: 30px;} .minigallery {margin: 0 10px 30px 0;} .minigallery li {list-style: none; float: left; margin-bottom: 10px;} .minigallery li p {text-indent: 0; font-size: 0.7em;} .paginate {clear: left; padding: 10px 10px 10px 0; font-size: 0.85em; color: #FFFFFF;} .paginate .current {padding: 1px 3px; background-color: #336600; color: #CCFF00;} .paginate a {padding: 1px 3px; background-color: #CCFFCC; color: #000000;} .paginate a:hover {background-color: #FFFFFF; color: #339900;} .top {border-bottom: 1px solid #FFFFFF;} .bottom {border-top: 1px solid #FFFFFF;} /* --------------------------------------------- setting main navigation bar */ #mainnav {width: 960px; height: 20px;} #mainnav ul {float: right; width: 730px; background: #B2B8AC url("../images/bg_mainnav.png") repeat-x 0 -84px;} #mainnav li {list-style: none; float: left; font-size: 14px; font-weight: bold; line-height: 22px;} #mainnav li.current {background: #33CC00 url("../images/bg_mainnav.png") repeat-x 0 0;} #mainnav a {display: block; height: 22px; padding: 0 20px; color: #232323; border-right: 1px dotted #999999;} #mainnav li.current a {color: #FFFFFF;} #mainnav a:hover {color: #FFFFFF; background: #C53526 url("../images/bg_mainnav.png") repeat-x 0 -42px;} #mainnav a:active {color: #FFFFFF; background: #B2B8AC url("../images/bg_mainnav.png") repeat-x 0 0;} #mainnav #firstmenu {background: #434343 url("../images/bg_mainnav_left.png") no-repeat 0 -84px;} #mainnav #firstmenu a {padding-left: 26px;} #mainnav #firstmenu.current {background-position: 0 0;} #mainnav #firstmenu a:hover {background: #434343 url("../images/bg_mainnav_left.png") no-repeat 0 -42px;} /* ---------------------------------------------------- page specific design */ #general #header {background: transparent url("../images/bg_header_general.jpg") no-repeat;} #general #content {background: transparent url("../images/bg_content_general.jpg") no-repeat;} #general #maincontent {background: transparent url("../images/bg_maincontent_general_trans.png") no-repeat;} #general #maincontent h2 {margin-top: 28px; padding: 2px 30px; background: transparent url("../images/bg_h2_trans.png") repeat;} #landscape #header {background: transparent url("../images/bg_header_land.jpg") no-repeat;} #landscape #content {background: transparent url("../images/bg_content_land.jpg") no-repeat;} #landscape #fullcontent {background: transparent url("../images/bg_fullcontent_land_trans.png") no-repeat;} #landscape #detailcontent {background: transparent url("../images/bg_projdetail_land_trans.png") no-repeat;} #landscape #gallery li {background-color: #2D7547;} #landscape #gallery li:hover {background-color: #78D793;} #architecture #header {background: transparent url("../images/bg_header_arch.jpg") no-repeat;} #architecture #content {background: transparent url("../images/bg_content_arch.jpg") no-repeat;} #architecture #fullcontent {background: transparent url("../images/bg_fullcontent_arch_trans.png") no-repeat;} #architecture #detailcontent {background: transparent url("../images/bg_projdetail_arch_trans.png") no-repeat;} #architecture #gallery li {background-color: #2F170B;} #architecture #gallery li:hover {background-color: #DCBA59;} #graphic #header {background: transparent url("../images/bg_header_graphic.jpg") no-repeat;} #graphic #content {background: transparent url("../images/bg_content_graphic.jpg") no-repeat;} #graphic #fullcontent {background: transparent url("../images/bg_fullcontent_graphic_trans.png") no-repeat;} #graphic #detailcontent {background: transparent url("../images/bg_projdetail_graphic_trans.png") no-repeat;} #graphic #gallery li {background-color: #23241C;} #graphic #gallery li:hover {background-color: #FF7F00;} #land.servicelist a:hover {color: #99FF00;} #arch.servicelist a:hover {color: #FFCC99;} #graphic.servicelist a:hover {color: #FF6600;} #land.projectlist {margin-left: 55px; background: transparent url("../images/bg_proj_land.jpg") no-repeat;} #land.servicelist {margin-left: 55px; background: transparent url("../images/bg_serv_land.jpg") no-repeat;} #land.projectlist h3 {margin-top: 110px; background-color: #013F38;} #land.servicelist h3 {margin-top: 250px; padding-right: 5px; background-color: #013F38; text-align: right;} #land li a {color: #FFFFFF; background: transparent url("../images/bg_menu_land.png") repeat;} #land li a:hover {color: #000000; background: transparent url("../images/bg_menu_land.on.png") repeat;} #land li a:active {background: #000000;} #arch.projectlist {margin-left: 36px; background: transparent url("../images/bg_proj_arch.jpg") no-repeat;} #arch.servicelist {margin-left: 36px; background: transparent url("../images/bg_serv_arch.jpg") no-repeat;} #arch.projectlist h3 {margin-top: 60px; background-color: #663300;} #arch.servicelist h3 {margin-top: 10px; background-color: #663300;} #arch li a {color: #FFFFFF; background: transparent url("../images/bg_menu_arch.png") repeat;} #arch li a:hover {color: #000000; background: transparent url("../images/bg_menu_arch.on.png") repeat;} #arch li a:active {background: #000000;} #graphic.projectlist {margin-left: 36px; background: transparent url("../images/bg_proj_graphic.jpg") no-repeat;} #graphic.servicelist {margin-left: 36px; background: transparent url("../images/bg_serv_graphic.jpg") no-repeat;} #graphic.projectlist h3 {margin-top: 160px; background-color: #333333;} #graphic.servicelist h3 {margin-top: 160px; background-color: #333333;} #graphic li a {color: #FFFFFF; background: transparent url("../images/bg_menu_graphic.png") repeat;} #graphic li a:hover {color: #000000; background: transparent url("../images/bg_menu_graphic.on.png") repeat;} #graphic li a:active {background: #000000;} /* -------------------------------------------------------- setting lightbox */ #lightboxbg { display: none; visibility: hidden; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 1000; background-color: #AAAAAA; opacity: .70; filter: alpha(opacity=70); } #lightbox { display: none; visibility: hidden; overflow: auto; z-index: 1010; position: absolute; top: 50%; left: 50%; margin: -170px 0 0 -250px; padding: 0; width: 500px; height: 300px; border: 6px solid #EC8000; text-align: left; background-color: #FFFFFF; color: #222222; } #lightbox .closebutton { background-color: #DEDEDE; text-align: right; cursor: pointer; cursor: hand; } #lightbox h4 {margin-left: 10px; font-weight: bold;} #lightbox p {text-indent: 0; margin-left: 10px; font-size: 0.9em;} #lightbox li {list-style-type: none; display: inline;} #lightboxgallery li {list-style-type: none; width: 100px; height: 100px; margin: 10px 10px;} #ajaxcalendar { display: none; visibility: hidden; z-index: 2000; width: 200px; background-color: #BBBBBB; opacity: .85; filter: alpha(opacity=85); } #ajaxcalendar .closebutton { display: none; visibility: hidden; overflow: auto; background-color: #DEDEDE; text-align: right; cursor: pointer; cursor: hand; } #ajaxcalendarcontent {font-size: 0.8em;} #ajaxcalendarcontent table {border-collapse: collapse;} #ajaxcalendarcontent table th, #ajaxcalendarcontent table td {border: 1px solid #BBBBBB;} #ajaxcalendarcontent table th {background-color: #FFCC00;} #ajaxcalendarcontent table a {display: block; background-color: #FFFFCC;} #ajaxcalendarcontent table a:hover {background-color: #EFD560;} /* ------------------------------------------------------------------ bbcode */ .bbctext {clear: both; padding-top: 20px; font-size: 0.95em; line-height: 140%;} /* span around user text */ .bbctext ul, .bbctext ol {list-style-position: outside; margin-left: 20px;} .bbctext ul {list-style: circle;} .bbctext li {font-size: 1em;} .bbcunderline {text-decoration: underline;} .bbcbig {font-size: 1.15em;} .bbcsmall {font-size: 0.85em;} .bbcwhite {color: #FFFFFF;} .bbcblack {color: #000000;} .bbcred {color: #FF0000;} .bbcblue {color: #330099;} .bbcyellow {color: #FFFF00;} .bbcorange {color: #FF7E00;} .bbcgreen {color: #99FF66;} .bbccyan {color: #333399;} .bbcviolet {color: #CC00FF;} .bbcpink {color: #FF99FF;} .bbcgrey {color: #666666;} .bbcbrown {color: #993300;}