/*------------------------------------------------------------------
[Layout]
- (css reset)
- body
+ wrapper #wrapper
+ page #page
- header #header
+ topmenu #topmenu
- content #content
+ box .box
- large box .lg
- sidebar .sidebar
- blog #blog
- printer .printer
+ img
- binding #binding
+ binding .binding
+ hide .hide
+highlight #highlight
+ videos #videobox
- video .video
- bio .bio
+ img
+ bio #bio
+ collumn .col
- table
+ th
- row heading .rowheading
+ td
+ tr
- best .best
- worst .worst
- footer #footer
覧覧覧覧覧覧覧覧覧覧覧-*/
* {
border: 0;
outline: none;
padding: 0;
margin: 0;
}
body {
background: #777 url(../images/bg.jpg) top center no-repeat ;
margin: 0;
}
#wrapper {
background: #e0e0e0 url(../images/bg.jpg) top center no-repeat;
padding-bottom: 15px;
}
#page {
font-family: Arial;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#header {
height: 126px;
}
#topmenu {
height: 70px;
}
#content {
display: block;
width: 900px;
}
.box {
background: url(../images/box/box.png);
float: left;
height: 262px;
margin-right: 25px;
padding-top: 35px;
padding-left: 23px;
padding-right: 23px;
width: 271px;
}
.lg {
background: url(../images/box/bigbox.png);
width: 609px;
}
.sidebar {
background: url(../images/box/sidebar.png);
height: 249px;
margin-right: 0px;
width: 187px;
padding: 13px;
padding-top: 35px;
}
#blog {
}
.post {
padding-bottom: 10px;
border-bottom: 1px solid #DDD;
padding-top: 10px;
}
.printer {}
.printer img {
float: left;
margin-top: 10px;
}
#binding {
clear: both;
margin-top: 15px;
}
.binding {
float: left;
height: 75px;
width: 48%;
padding-bottom: 5%;
padding-left: 1%;
padding-right: 1%;
}
#projects {}
.featured {
border-bottom: 1px solid #DDD;
height: 74px;
margin-top: 13px;
}
.featured img {
float: left;
margin-right: 10px;
}
.hide {
display: none;
}
#highlight {
margin-bottom: 14px;
}
#videobox {
background: url(../images/video/bg.png) no-repeat;
height: 301px;
margin-bottom: 18px;
padding-left: 27px;
padding-top: 15px;
width: 873px;
}
.video {
float: left;
height: 128px;
margin-bottom: 20px;
margin-left: 26px;
margin-right: 26px;
width: 160px;
}
.bio {}
.bio img{
float: left;
margin-top: 6px;
}
#bio {
float: right;
margin-top: 18px;
width: 57%;
padding-right: 8%;
}
.col {
float: left;
margin: 2%;
margin-top: 0px;
width: 46%;
}
table {
border-collapse: collapse;
}
th {
border-bottom: 1px solid #CCC;
font-size: 1.25em;
padding: 6px;
vertical-align: middle;
width: 163px;
}
.rowheading {
font-size: 0.8em;
width: 245px;
}
th img {
width: 90px;
}
tr {}
td{
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.best {
background: #e0d8f2;
border-bottom: 1px solid #CCC;
font-weight: bold;
}
#footer {
margin: auto;
margin-bottom: 5px;
margin-top: 10px;
width: 900px;
}/*------------------------------------------------------------------
[Text Styles]
- anchors
+ hover
+ visited
- paragaphs
- headings
- ul, ol
- box .box
+ title .title
+ h1
+ h2
+ p
+ ul
- li
+ blog #blog
- h1
+ a
- date #date
- p
- view all .viewall
+ binding .binding
- h1
- sidebar .sidebar
- video .video
+ h1
+ p
- bio .bio
+ h1
- span
+ h2
+ p
+ more #more
- h2
- p
- the others .others
+ ul
- li
+ a
- footer #footer
+ p
+ a
覧覧覧覧覧覧覧覧覧覧覧-*/
a {
color: #0060B6;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: #002C54;
}
p {
color: #333;
}
h1, h2, h3, h4, h5, h6 {
color: #333;
}
ul, ol {
color: #333;
}
.box {}
.box .title {
background: url(../images/box/arrow.gif) left center no-repeat;
color: #3F4040;
font-family: Georgia;
margin-top: -27px;
font-size: 1.2em;
padding-left: 22px;
position: absolute;
}
.box .title span {
color: #1961AD;
}
.box h1 {
font-size: 1em;
margin-top: 10px;
}
.box h2 {
font-size: 1em;
margin-top: 10px;
}
.box p {
font-size: 0.8em;
line-height: 1.3em;
margin-bottom: 14px;
margin-top: 10px;
}
.box ul {
margin-left: 23px;
}
.box ul li {
font-size: 0.8em;
}
#blog {}
#blog h1 {
font-size: 0.8em;
letter-spacing: 0.02em;
margin-top: 0px;
}
#blog h1 a {
color: #0864B9;
text-decoration: none;
}
#blog .date {
color: #666;
font-size: 0.6em;
margin-top: 2px;
}
#blog p {
color: #333;
font-size: 0.7em;
margin-bottom: 0px;
margin-top: 0px;
}
.viewall {
color: #666;
font-size: 11px;
margin-left: 243px;
margin-top: -16px;
position: absolute;
}
.featured {}
.featured h1 {
color: #0864B9;
font-size: 0.8em;
letter-spacing: 0.02em;
}
.featured h1 a {
color: #0864B9;
text-decoration: none;
}
.featured p {
color: #333;
font-size: 0.7em;
margin-top: 0px;
}
.binding {
text-align: center;
}
.binding h1 {
font-size: 0.65em;
margin-top: 0px;
}
.sidebar {}
.sidebar p {
margin-top: 10px;
}
.video {}
.video h1 {
color: #649733;
font-family: Georgia, serif;
font-size: 0.9em;
}
.video p {
font-size: 0.71em;
}
.bio {}
.bio h1 {
border-bottom: 1px solid #DDD;
font-family: Georia, serif;
font-size: 1.5em;
margin-bottom: 12px;
}
.bio h1 span {
color: #333;
font-family: Arial, sans-serif;
font-size: 0.7em;
font-style: italic;
}
.bio h2 {
font-size: 1em;
border-bottom: 1px solid #DDD;
}
#videobox h2 {
border-bottom: none;
}
.bio p {
font-size: 0.75em;
line-height: 1.3em;
margin-bottom: 10px;
margin-top: 0px;
}
.bio #more {}
.bio #more h2 {
font-size: 0.8em;
}
.bio #more p {
font-size: 0.75em;
}
.others {}
.others ul {
margin-top: 4px;
margin-left: 0px;
}
.others ul li {
font-size: 0.6em;
list-style-type: none;
margin-top: 12px;
line-height: 13px;
margin-bottom: 0px;
padding: 0px;
}
.others ul li a {
text-decoration: none;
}
#footer {
font-family: Arial;
font-size: 0.75em;
letter-spacing: 1px;
text-align: right;
}
#footer p {
color: #FFF;
}
#footer a {
color: #FFF;
}/*_________________________________________________________________ Overlay */
#shadowbox_overlay {
visibility: hidden;
position: absolute;
display: block;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 998;
}
/*_______________________________________________________________ Container */
#shadowbox_container {
position: fixed;
height: 0px;
width: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 999;
text-align: center; /* centers in quirks and IE */
}
/*_______________________________________________________________ Shadowbox */
#shadowbox {
display: none;
visibility: hidden;
margin: 0 auto;
position: relative;
font-family: 'Lucida Grande', Tahoma, sans-serif;
text-align: left; /* reset left alignment */
color: #888;
}
/*___________________________________________________________________ Title */
/*
HTML snapshot:
*/
#shadowbox_title {
height: 30px;
padding: 0;
overflow: hidden;
}
#shadowbox_title_inner {
height: 16px;
font-size: 16px;
line-height: 16px;
white-space: nowrap;
padding: 10px 0 4px 10px;
background-color: #fff;
}
/*____________________________________________________________________ Body */
/*
HTML snapsnot:
*/
#shadowbox_body {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
border: 10px solid #fff;
background-color: #eee;
}
#shadowbox_body_inner {
border: 1px solid #D7D7D7;
position: relative;
overflow: hidden;
}
#shadowbox_loading {
position: absolute;
top: 0;
left: 0;
height: 10000px; /* overflow:hidden will clip this */
width: 100%;
background-color: #ccc;
}
#shadowbox_loading img {
float: left;
margin: 10px 10px 0 10px;
}
#shadowbox_loading span {
float: left;
margin-top: 16px;
font-size: 10px;
}
#shadowbox_loading span a,
#shadowbox_loading span a:link,
#shadowbox_loading span a:visited {
color: #fff;
}
#shadowbox_content.html { /* make html content scrollable */
height: 100%;
width: 100%;
overflow: auto;
}
/*_________________________________________________________________ Toolbar */
/*
HTML snapshot:
*/
#shadowbox_toolbar {
margin: 0;
padding: 0;
height: 30px;
overflow: hidden;
}
#shadowbox_toolbar_inner {
background-color: #fff;
height: 30px;
}
#shadowbox_toolbar_inner div {
font-size: 10px;
height: 10px;
line-height: 10px;
padding-top: 6px;
}
#shadowbox_toolbar_inner div span.shortcut {
font-weight: bold;
text-decoration: underline;
}
#shadowbox_toolbar_inner div a {
color: #888;
text-decoration: none;
}
#shadowbox_nav_close,
#shadowbox_nav_previous,
#shadowbox_nav_next {
float: right;
padding-right: 10px;
}
#shadowbox_nav_close {
position: relative;
top: -6px;
}
#shadowbox_counter {
float: left;
padding-left: 10px;
}
#shadowbox_counter a {
padding: 0 4px 0 0;
}
#shadowbox_counter a.shadowbox_counter_current {
font-weight: bold;
text-decoration: underline;
}
/*________________________________________________________________ Messages */
div.shadowbox_message {
padding: 10px;
text-align: center;
}
div.shadowbox_message a:link,
div.shadowbox_message a:visited {
color: #bed333;
text-decoration: none;
}
div.shadowbox_message a:hover,
div.shadowbox_message a:focus {
text-decoration: underline;
}/*------------------------------------------------------------------
[Gallery]
- gallery #gallery
+ stripNav .stripNav
- ul
+ li
- a
+ a:hover
+ span
+ current
- span
+ stripNavL . stripNavL
- a
+ a:hover
+ stripNavR .stripNavR
- a
+ a:hover
+ csw .csw
- loading .loading
+ strip viewer .stripViewer
- panel container .panelContainer
+ panel .panel
- wrapper .wrapper
+ icon .icon
- img
+ top .top
- icon
+ bottom .bottom
- icon
- website .site
+ img
+ h1
+ h2
+ ul
- li
覧覧覧覧覧覧覧覧覧覧覧-*/
#gallery {background:url(../images/gallery/gallery.png) no-repeat; padding-left: 33px; padding-right: 33px; margin-bottom: 48px; }
.stripNav {position: absolute; margin-top: 276px; margin-left: 20px;}
.stripNav ul {}
.stripNav ul li {float: left; height: 43px; list-style-type: none; margin-right: 12px;}
.stripNav ul li a {color: #666; display: block; font-size: 15px; font-weight: bold; height: 43px; line-height: 43px; margin-left: -5px; padding-left: 5px; padding-right: 50px; text-decoration: none; text-transform: uppercase;}
.stripNav ul li a:hover {color: #222;}
.stripNav ul li a span {display: block; margin-left: -24px; padding-left: 50px;}
.stripNav ul li .current {background: url(../images/gallery/tabright.png) right no-repeat; color: #222;}
.stripNav ul li .current span {background: url(../images/gallery/tableft.png) no-repeat;}
.stripNavL { background: url(../images/gallery/left.png) no-repeat; height: 28px; margin-left: -29px; margin-top: 120px; position: absolute; width: 27px; }
.stripNavL a {display: block; height: 28px;}
.stripNavL a:hover {background: url(../images/gallery/left_on.png) no-repeat;}
.stripNavR { background: url(../images/gallery/right.png) no-repeat; height: 28px; width: 27px; margin-left: 837px; margin-top: 120px; position: absolute;}
.stripNavR a {display: block; height: 28px;}
.stripNavR a:hover {background: url(../images/gallery/right_on.png) no-repeat;}
/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 281px; overflow: hidden; display: none;}
.csw .loading {margin: 200px 0 300px 0; text-align: center;}
.stripViewer {clear: both; height: 281px; overflow: hidden; width: 833px; position: relative; margin: auto;}
.stripViewer .panelContainer {position: relative;}
.stripViewer .panelContainer .panel { float:left; width: 833px;}
.panel .wrapper {padding: 1px;}
/* ----- CONTENT ------ */
.icon{float: left; height: 125px; line-height: 125px; padding-left: 5px; padding-right: 5px;}
.icon a {display: block;}
.icon img {vertical-align: middle;}
.top {margin-top: 10px;}
.top .icon {border-bottom: 1px solid #DDD;border-right: 1px solid #DDD;}
.bottom .icon {border-right: 1px solid #DDD;}
.site {
float: left;
padding: 1%;
width: 48%;
}
.site img {
margin: 12px 25px 5px 35px;
height: 216px;
}
.site h1 {
font-family: Georgia, serif;
font-size: 1em;
margin-left: 36px;
}
.site h1 a {
color: #0864B9;
text-decoration: none;
}
.site h2 {
font-size: 0.8em;
}
.site ul {
font-size: 0.7em;
margin-left: 48px;
}
.site ul li {
float: left;
width: 50%;
}/*------------------------------------------------------------------
[Menus]
- mainmenu #menu
+ li
- cap .cap
+ a
- strategy #strategy
- design #design
- web #web
- video #video
- events #events
- printing #printing
- home menu #menubar
+ a
- hover
- current .current
覧覧覧覧覧覧覧覧覧覧覧-*/
/* ----------- main menu ----------- */
#menu {}
#menu li {
background: url(../images/menu/bg.jpg) repeat-x;
float: left;
list-style-type: none;
padding-left: 4px;
padding-right: 4px;
}
#menu .cap {
padding: 0;
background: transparent;
}
#menu li a {
display: block;
height: 45px;
margin-bottom: 10px;
}
#menu #strategy a {background: url(../images/menu/menu.jpg) 0 0; width: 160px;}
#menu #strategy a:hover, #menu #strategy .current {background: url(../images/menu/menu.jpg) 0 45px;}
#menu #design a {background: url(../images/menu/menu.jpg) 673px 0; width: 138px;}
#menu #design a:hover, #menu #design .current {background: url(../images/menu/menu.jpg) 673px 45px;}
#menu #web a {background: url(../images/menu/menu.jpg) 536px 0; width: 119px;}
#menu #web a:hover, #menu #web .current {background: url(../images/menu/menu.jpg) 536px 45px;}
#menu #video a {background: url(../images/menu/menu.jpg) 417px 0; width: 128px;}
#menu #video a:hover, #menu #video .current {background: url(../images/menu/menu.jpg) 417px 45px;}
#menu #events a {background: url(../images/menu/menu.jpg) 289px 0; width: 140px;}
#menu #events a:hover, #menu #events .current {background: url(../images/menu/menu.jpg) 289px 45px;}
#menu #printing a {background: url(../images/menu/menu.jpg) 148px 0; width: 149px;}
#menu #printing a:hover, #menu #printing .current {background: url(../images/menu/menu.jpg) 148px 45px;}
/* ----------- home menu ----------- */
#menubar {
background: url(../images/menu/menubar2.png) no-repeat;
display: block;
height: 26px;
margin-left: 535px;
margin-top: -60px;
padding-left: 13px;
width: 370px;
}
#menubar a {
color: #666;
display: block;
float: left;
font-size: 10px;
letter-spacing: 0px;
margin-right: 13px;
margin-top: 7px;
text-decoration: none;
text-transform: uppercase;
}
#menubar a:hover {
text-decoration: underline;
}
#menubar .current {
background: url(../images/menu/arrow.png) left center no-repeat;
padding-left: 10px;
}/*------------------------------------------------------------------
[Menus]
- mainmenu #menu
+ li
- cap .cap
+ a
- strategy #strategy
- design #design
- web #web
- video #video
- events #events
- printing #printing
- home menu #menubar
+ a
- hover
- current .current
覧覧覧覧覧覧覧覧覧覧覧-*/
/* ----------- main menu ----------- */
#menu {}
#menu li {
background: url(../images/menu/bg.jpg) repeat-x;
float: left;
list-style-type: none;
padding-left: 4px;
padding-right: 4px;
}
#menu .cap {
padding: 0;
background: transparent;
}
#menu li a {
display: block;
height: 45px;
margin-bottom: 10px;
}
#menu #strategy a {background: url(../images/menu/menu.jpg) 0 0; width: 160px;}
#menu #strategy a:hover, #menu #strategy .current {background: url(../images/menu/menu.jpg) 0 45px;}
#menu #design a {background: url(../images/menu/menu.jpg) 673px 0; width: 138px;}
#menu #design a:hover, #menu #design .current {background: url(../images/menu/menu.jpg) 673px 45px;}
#menu #web a {background: url(../images/menu/menu.jpg) 536px 0; width: 119px;}
#menu #web a:hover, #menu #web .current {background: url(../images/menu/menu.jpg) 536px 45px;}
#menu #video a {background: url(../images/menu/menu.jpg) 417px 0; width: 128px;}
#menu #video a:hover, #menu #video .current {background: url(../images/menu/menu.jpg) 417px 45px;}
#menu #events a {background: url(../images/menu/menu.jpg) 289px 0; width: 140px;}
#menu #events a:hover, #menu #events .current {background: url(../images/menu/menu.jpg) 289px 45px;}
#menu #printing a {background: url(../images/menu/menu.jpg) 148px 0; width: 149px;}
#menu #printing a:hover, #menu #printing .current {background: url(../images/menu/menu.jpg) 148px 45px;}
/* ----------- home menu ----------- */
#menubar {
background: url(../images/menu/menubar2.png) no-repeat;
display: block;
height: 26px;
margin-left: 535px;
margin-top: -60px;
padding-left: 13px;
width: 370px;
}
#menubar a {
color: #666;
display: block;
float: left;
font-size: 10px;
letter-spacing: 0px;
margin-right: 13px;
margin-top: 7px;
text-decoration: none;
text-transform: uppercase;
}
#menubar a:hover {
text-decoration: underline;
}
#menubar .current {
background: url(../images/menu/arrow.png) left center no-repeat;
padding-left: 10px;
}/*------------------------------------------------------------------
[Forms]
- form
+ label
+ input, textarea
+ checkbox .checkbox
+ contactus #contactus
- contact #contact
- request #request
+ label
+ row .row
- comments #comments
+ textarea
- submit #submit
+ response2 #Response2
+close #close
覧覧覧覧覧覧覧覧覧覧覧-*/
form {
font-family: Arial;
}
label {
display: block;
font-size: 11px;
margin-top: 7px;
}
input, textarea {
border: 1px solid #AAA;
width: 245px;
}
.checkbox {
border: 0;
width: 10px;
}
#enewsregister {
background: url(../images/form/e_news.png) no-repeat;
height: 190px;
margin-left: 590px;
overflow: hidden;
padding-left: 38px;
position: absolute;
width: 320px;
z-index: 2000;
}
#enewscontact {margin-top: 42px;}
#enewsregister #submit {
background: url(../images/form/signup.jpg) no-repeat;
border: 0;
display: block;
height: 24px;
margin-left: 195px;
margin-top: 17px;
width: 66px;
}
#contactus {
background: url(../images/form/form.png) no-repeat;
height: 570px;
margin-left: 590px;
overflow: hidden;
padding-left: 38px;
position: absolute;
width: 320px;
z-index: 2000;
}
#contact {margin-top: 42px;}
#request {margin-top: 46px;}
#request label {display: inline; font-size: 14px; margin-right: 30px;}
#request .row {margin-top: 10px;}
#comments{margin-top: 55px;}
#comments textarea {height: 136px; width: 246px;}
#contactus #submit {
background: url(../images/form/submit.jpg) no-repeat;
border: 0;
display: block;
height: 24px;
margin-left: 195px;
margin-top: 17px;
width: 66px;
}
#response2 {
position: absolute;
margin-left: -38px;
}
#response3 {
position: absolute;
margin-left: -38px;
}
#close {
margin-left: -36px;
margin-top: -6px;
position: absolute;
}