@charset "utf-8"; /*******************************************************************/ /* RESET */ /*******************************************************************/ * { padding: 0px; margin: 0px; } fieldset { border: 1px solid red; } body { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: small; line-height: 170%; background: none; } address { font-style: normal; } /*******************************************************************/ /* Upper Left Corner Picture */ /*******************************************************************/ #logo { position:absolute; left:177px; top:44px; width:70px; height:290px; z-index:1; } #logo span { width:20px; height:41px; display: block; margin:11px 0 0 13px; position:absolute; top:-12px; left:90px; z-index:1; background: url(../img/paper-clip-mini.png) no-repeat; } .logo { position:absolute; left:10px; top:25px; width:70px; height:290px; z-index:1; } .logo span { width:20px; height:41px; display: block; margin:11px 0 0 13px; position:absolute; top:-15px; left:668px; z-index:1; background: url(../img/paper-clip-mini.png) no-repeat; } /*******************************************************************/ /* Image Shadow */ /*******************************************************************/ img.shadow { background: url(../img/shadow-1000x1000.png) no-repeat right bottom; padding: 5px 20px 20px 5px; } /*******************************************************************/ /* GLOBAL */ /*******************************************************************/ .clear { clear: both; height: 0px; overflow: hidden; padding: 0px !important; margin: 0px !important;} .hide { display: none; } .green { color: #006600; } .red { color: #CC0000; } .white { color: #FFFFFF; } .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .small { font-size: 11px; } img { border: none; } a img { border: none; } img.right { float: right; margin-left: 8px; margin-bottom: 5px; margin-top: 3px; } img.left { float: left; margin-right: 8px; margin-bottom: 5px; margin-top: 3px; } hr { display: none; } .hr-line { height: 1px; overflow: hidden; background-color: #CCCCCC; } .no-text-transform { text-transform: none !important; } .no-decoration { text-decoration: none !important; } /***************/ /* OVERLAPPING */ /***************/ .overlap, .overlap * { display: block; position: relative; overflow: hidden; } .overlap span { position: absolute; left: 0px; top: 0px; background-position: left top; background-repeat: no-repeat; } a.overlap span, .overlap a span { cursor: pointer; } /*****************/ /* BASIC TAG DEF */ /*****************/ body { background: #fff/*EBC488*/ url(../img/body-bg.png) repeat-x left top; font-family: Arial, Helvetica, sans-serif; color: #7f7f7f; font-size: 13px; } h1 { font-size: 150%; font-weight: bold; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: #f37800; height: 40px; line-height: 40px; text-transform: uppercase; padding-left: 11px; padding-right: 15px; margin-bottom: 22px; } h1#big { font-size: 250%; font-weight: bold; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: #f37800; height: 40px; line-height: 40px; text-transform: uppercase; padding-left: 11px; padding-right: 15px; margin-bottom: 22px; } h1.overlap span { width: 470px; height: 40px; } h2 { font-size: 120%; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: #F37800; text-transform: uppercase; } p { padding-bottom: 1em; padding-left: 4px; } ul { margin-left: 2em; } a { color: #f37800; font-weight: normal; text-decoration: underline; } sup { line-height: 50%; } form {} form * { font-family: Arial, Helvetica, sans-serif; color: #333333; } form .input, form select, form textarea { border: 1px solid #FFFFFF; background-color: #E7DFCF; padding: 3px; width: 230px; } form textarea { height: 75px; overflow: hidden; } form .input.short { width: 50px; } form label { display: block; width: 150px; float: left; padding-top: 1px; } form p { clear: both;} form .button-submit { margin-left: 150px; } /*******************************************************************/ /* LAYOUT */ /*******************************************************************/ html>body, html>#page-bg { min-height: 100%; overflow: visible; } body { text-align: center; /*height: 100%;*/ } /*html { height: 100%; }*/ #page-bg { background: url(../img/page-bg.jpg) no-repeat center top; height: 100%; } #page-wrapper { width: 776px; margin: 0 auto; padding: 27px 59px 0px 15px; text-align: left; position: relative; } #page-corner { background: url(../img/page-corner-bg.png) no-repeat right bottom; width: 785px; padding-top: 1px; padding-right: 0px; padding-left: 0px; } #page-body { background: #5a6520 url(../img/page-content.png) repeat left top; /*FFFFFF*/ padding-bottom: 30px; } #page-body-bg { background: #d2f1a0; margin-top: 1px; position: relative; top: 15px; margin-left: 15px; margin-right: 45px; } #page-content { min-height: 500px; padding-top: 30px; padding-left: 10px; } #main-content { float: left; width: 430px; padding-top: 30px; padding-left: 10px; } #left-column { float: left; width: 245px; } /*******************************************************************/ /* HEADER */ /*******************************************************************/ #header { height: 75px; background: url(../img/header-bg.png) no-repeat left top; position: absolute; top: -55px; left: -15px; width: 770px; } #logo { width: 277px; height: 285px; position: absolute; top: 67px; left: 7px; z-index: 1; padding: 0px; } #header-title { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 30px; color: #855c35; font-weight: bold; height: 35px; line-height: 35px; padding-bottom: 0px; position: absolute; top: 32px; left: 30px; } #header-title span { background-image: url(../img/header-title.gif); width: 294px; height: 35px;} /*******************************************************************/ /* FOOTER */ /*******************************************************************/ #footer { height: 55px; font-size: 11px; color: #b2b2b2; position: relative; /*bottom: -1042px;*/ left: 49px; width: 680px; padding-top: 15px; } #footer * { color: #b2b2b2; padding: 0px; } #giant { position: absolute; top: 0px; right: 30px; } #giant a { text-decoration: none; cursor: default; } #giant .img { vertical-align: middle; } /*******************************************************************/ /* MENU */ /*******************************************************************/ #menu { width: 40px; height: 422px; position: absolute; top: 44px; right: 55px; margin: 0px; } #menu li { list-style: none; } #menu li a { width: -40px; background-color: transparent; display: block; text-align: center; color: #4c551c; font-weight: bold; } #menu li a span { width: 40px; } #menu li a:hover span { background-position: -40px 0px; } #menu #menu-home a { height: 200px; line-height: 185px; } #menu #menu-home a span { height: 200px; background-image: url(../img/menu-home.png); } #menu #menu-giclee a { height: 200px; line-height: 79px; } #menu #menu-giclee a span { height: 200px; background-image: url(../img/menu-giclee.png); } #menu #menu-litho a { height: 200px; line-height: 103px; } #menu #menu-litho a span { height: 200px; background-image: url(../img/menu-litho.png); } #menu #menu-special a { height: 200px; line-height: 103px; } #menu #menu-special a span { height: 200px; background-image: url(../img/menu-special.png); } #menu #menu-sniper a { height: 224px; line-height: 103px; } #menu #menu-sniper a span { height: 224px; background-image: url(../img/menu-sniper.png); } #menu #menu-contact a { height: 224px; line-height: 103px; } #menu #menu-contact a span { height: 224px; background-image: url(../img/menu-contact.png); } #section-home #menu-home span { background-position: -40px 0px; } #section-giclee #menu-giclee span { background-position: -40px 0px; } #section-litho #menu-litho span { background-position: -40px 0px; } #section-special #menu-special span { background-position: -40px 0px; } #section-sniper #menu-sniper span { background-position: -40px 0px; } #section-contact #menu-contact span { background-position: -40px 0px; } /*******************************************************************/ /* LEFT COLUMN */ /*******************************************************************/ #left-column {} #left-column .block { width: 220px; border: 1px solid #FFFFFF; background: #E2D9C5 url(../img/right-block-bg.gif) repeat-x left top; margin-left: 10px; margin-bottom: 16px; font-size: 11px; line-height: 150%; } #left-column #partenaires { background: none; border: none; } #left-column .block h2 { font-size: 17px; background: url(../img/right-block-title-bg.gif) no-repeat left bottom; margin-left: 10px; padding-top: 12px; height: 26px; line-height: 20px; margin-bottom: 10px; } #left-column .block h2 span { width: 200px; height: 24px; top: 12px; } #left-column .block .block-shadow { position: relative; height: 10px; bottom: -11px; right: -1px; background: url(../img/right-block-shadow.gif) no-repeat right bottom;} #left-column .block .block-content { padding: 0px 10px 0px 10px; } #left-column .block p { padding-top: 7px; padding-bottom: 0px; } #left-column .more a { color: #f37800; font-weight: bold; text-decoration: none; } #test { color: #f37800; font-size: larger; text-align: right; position: absolute; bottom: 8px; right: 12px; z-index: 4; } #flash { height: 288px; position: relative; overflow: visible; } #flash-wrapper { position: absolute; top: 109px; left: 192px; width: 320px; height: 340px; } #no-flash { margin: 11px 0px 0px 28px; width: 210px; height: 288px; overflow: hidden; } /*******************************************************************/ /* MAIN CONTENT - img */ /*******************************************************************/ #info { float: left; width: 434px; padding: 10px 0; background: url(../img/bg.gif) no-repeat top left; } #info dl { float: left; width: 390px; margin: 10px 20px; padding: 0; display: inline; /*fixes IE/Win double margin bug*/ } #info dt { float: right; width: 172px; margin: 0; padding: 0; font-size: 130%; color: #f37800; } #info dd { margin: 0 0 0 218px; padding: 0; font-size: 85%; line-height: 1.5em; color: #666; } #info dl dd.img { margin: 0 } #info dd.img img { float: left; margin: 0 8px 0 0; padding: 4px; border: 1px solid #d9e0e6; border-bottom-color: #c8cdd2; border-right-color: #c8cdd2; background: #fff; } #info .alt dt { float: left; } #info .alt dd { margin: 0 218px 0 0; } #info .alt dd.img img { float: right; margin: 0 0 0 8px; } #main-content .block { background: url(../img/hp-block-bg.gif) repeat-y left top; font-size: 11px; line-height: 145%; width: 155px; float: left; height: 204px; margin-right: 9px; margin-bottom: 13px; position: relative; } #main-content .block.end { margin-right: 0px; } #main-content .block h3 { font-size: 9px; color: #A2A2A2; line-height: 15px; width: 146px; height: 55px; padding: 8px 0px 0px 9px; background: url(../img/hp-block-top-bg.gif) repeat-y left top; font-weight:normal;} #main-content .block h3 strong { margin-top: 3px; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #F37800; line-height: 120%; text-transform: uppercase; height: 37px; } #main-content .block h3 strong span { width: 146px; height: 37px; } #main-content .block p { padding: 0px 4px 0px 9px;} #main-content .block p.more { color: #f37800; text-align: right; position: absolute; bottom: 5px; right: 0px; } /* LINK LINST */ .link-list { margin-left: 0px; padding-top: 0.8em; } .link-list li { list-style: none; color: #f37800; font-size: 11px; line-height: 150%; } #links { position: absolute; bottom: 18px; left: 10px; } @charset "utf-8";
/*******************************************************************/
/* RESET */
/*******************************************************************/
* { padding: 0px; margin: 0px; }
fieldset { border: 0px; }
body {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: small;
line-height: 170%;
background: none;
}
address { font-style: normal; }
/*******************************************************************/
/* Upper Left Corner Picture */
/*******************************************************************/
#logo {
position:absolute;
left:177px;
top:44px;
width:70px;
height:290px;
z-index:1;
}
#logo span {
width:20px;
height:41px;
display: block;
margin:11px 0 0 13px;
position:absolute;
top:-12px;
left:90px;
z-index:1;
background: url(../img/paper-clip-mini.png) no-repeat;
}
.logo {
position:absolute;
left:10px;
top:25px;
width:70px;
height:290px;
z-index:1;
}
.logo span {
width:20px;
height:41px;
display: block;
margin:11px 0 0 13px;
position:absolute;
top:-15px;
left:668px;
z-index:1;
background: url(../img/paper-clip-mini.png) no-repeat;
}
/*******************************************************************/
/* Image Shadow */
/*******************************************************************/
img.shadow {
background: url(../img/shadow-1000x1000.png) no-repeat right bottom;
padding: 5px 20px 20px 5px;
}
/*******************************************************************/
/* GLOBAL */
/*******************************************************************/
.clear { clear: both; height: 0px; overflow: hidden; padding: 0px !important; margin: 0px !important;}
.hide { display: none; }
.green { color: #006600; }
.red { color: #CC0000; }
.white { color: #FFFFFF; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.small { font-size: 11px; }
img { border: none; }
a img { border: none; }
img.right { float: right; margin-left: 8px; margin-bottom: 5px; margin-top: 3px; }
img.left { float: left; margin-right: 8px; margin-bottom: 5px; margin-top: 3px; }
hr { display: none; }
.hr-line { height: 1px; overflow: hidden; background-color: #CCCCCC; }
.no-text-transform { text-transform: none !important; }
.no-decoration { text-decoration: none !important; }
/***************/
/* OVERLAPPING */
/***************/
.overlap,
.overlap * { display: block; position: relative; overflow: hidden; }
.overlap span { position: absolute; left: 0px; top: 0px; background-position: left top; background-repeat: no-repeat; }
a.overlap span,
.overlap a span { cursor: pointer; }
/*****************/
/* BASIC TAG DEF */
/*****************/
body { background: #fff/*EBC488*/ url(../img/body-bg.png) repeat-x left top; font-family: Arial, Helvetica, sans-serif; color: #7f7f7f; font-size: 13px; }
h1 { font-size: 150%; font-weight: bold; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: #f37800; height: 40px; line-height: 40px; text-transform: uppercase; padding-left: 11px; padding-right: 15px; margin-bottom: 22px; }
h1#big { font-size: 250%; font-weight: bold; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: #f37800; height: 40px; line-height: 40px; text-transform: uppercase; padding-left: 11px; padding-right: 15px; margin-bottom: 22px; }
h1.overlap span { width: 470px; height: 40px; }
h2 { font-size: 120%; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; color: #F37800; text-transform: uppercase; }
p { padding-bottom: 1em; padding-left: 4px; }
ul { margin-left: 2em; }
a { color: #f37800; font-weight: normal; text-decoration: underline; }
sup { line-height: 50%; }
form {}
form * { font-family: Arial, Helvetica, sans-serif; color: #333333; }
form .input,
form select,
form textarea { border: 1px solid #FFFFFF; background-color: #E7DFCF; padding: 3px; width: 230px; }
form textarea { height: 75px; overflow: hidden; }
form .input.short { width: 50px; }
form label { display: block; width: 150px; float: left; padding-top: 1px; }
form p { clear: both;}
form .button-submit { margin-left: 150px; }
/*******************************************************************/
/* LAYOUT */
/*******************************************************************/
html>body, html>#page-bg { min-height: 100%; overflow: visible; }
body { text-align: center; /*height: 100%;*/ }
/*html { height: 100%; }*/
#page-bg { background: url(../img/page-bg.jpg) no-repeat center top; height: 100%; }
#page-wrapper { width: 776px; margin: 0 auto; padding: 27px 59px 0px 15px; text-align: left; position: relative; }
#page-corner {
background: url(../img/page-corner-bg.png) no-repeat right bottom;
width: 785px;
padding-top: 1px;
padding-right: 0px;
padding-left: 0px;
}
#page-body {
background: #5a6520 url(../img/page-content.png) repeat left top; /*FFFFFF*/
padding-bottom: 30px;
}
#page-body-bg {
background: #d2f1a0;
margin-top: 1px;
position: relative;
top: 15px;
margin-left: 15px;
margin-right: 45px;
}
#page-content { min-height: 500px; padding-top: 30px; padding-left: 10px; }
#main-content {
float: left;
width: 430px;
padding-top: 30px;
padding-left: 10px;
}
#left-column { float: left; width: 245px;}
/*******************************************************************/
/* HEADER */
/*******************************************************************/
#header { height: 75px; background: url(../img/header-bg.png) no-repeat left top; position: absolute; top: -55px; left: -15px; width: 770px; }
#logo { width: 277px; height: 285px; position: absolute; top: 67px; left: 7px; z-index: 1; padding: 0px; }
#header-title { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 30px; color: #855c35; font-weight: bold; height: 35px; line-height: 35px; padding-bottom: 0px; position: absolute; top: 32px; left: 30px; }
#header-title span { background-image: url(../img/header-title.gif); width: 294px; height: 35px;}
/*******************************************************************/
/* FOOTER */
/*******************************************************************/
#footer {
height: 55px;
font-size: 11px;
color: #b2b2b2;
position: relative; /*bottom: -1042px;*/
left: 49px;
width: 680px;
padding-top: 15px;
}
#footer * { color: #b2b2b2; padding: 0px; }
#giant { position: absolute; top: 0px; right: 30px; }
#giant a { text-decoration: none; cursor: default; }
#giant .img { vertical-align: middle; }
/*******************************************************************/
/* MENU */
/*******************************************************************/
#menu {
width: 40px;
height: 422px;
position: absolute;
top: 44px;
right: 55px;
margin: 0px;
}
#menu li { list-style: none; }
#menu li a { width: -40px; background-color: transparent; display: block; text-align: center; color: #4c551c; font-weight: bold; }
#menu li a span { width: 40px; }
#menu li a:hover span { background-position: -40px 0px; }
#menu #menu-home a { height: 200px; line-height: 185px; }
#menu #menu-home a span { height: 200px; background-image: url(../img/menu-home.png); }
#menu #menu-giclee a { height: 200px; line-height: 79px; }
#menu #menu-giclee a span { height: 200px; background-image: url(../img/menu-giclee.png); }
#menu #menu-litho a { height: 200px; line-height: 103px; }
#menu #menu-litho a span { height: 200px; background-image: url(../img/menu-litho.png); }
#menu #menu-special a { height: 200px; line-height: 103px; }
#menu #menu-special a span { height: 200px; background-image: url(../img/menu-special.png); }
#menu #menu-sniper a { height: 224px; line-height: 103px; }
#menu #menu-sniper a span { height: 224px; background-image: url(../img/menu-sniper.png); }
#menu #menu-contact a { height: 224px; line-height: 103px; }
#menu #menu-contact a span { height: 224px; background-image: url(../img/menu-contact.png); }
#section-home #menu-home span { background-position: -40px 0px; }
#section-giclee #menu-giclee span { background-position: -40px 0px; }
#section-litho #menu-litho span { background-position: -40px 0px; }
#section-special #menu-special span { background-position: -40px 0px; }
#section-sniper #menu-sniper span { background-position: -40px 0px; }
#section-contact #menu-contact span { background-position: -40px 0px; }
/*******************************************************************/
/* LEFT COLUMN */
/*******************************************************************/
#left-column {}
#left-column .block { width: 220px; border: 1px solid #FFFFFF; background: #E2D9C5 url(../img/right-block-bg.gif) repeat-x left top; margin-left: 10px; margin-bottom: 16px; font-size: 11px; line-height: 150%; }
#left-column #partenaires { background: none; border: none; }
#left-column .block h2 { font-size: 17px; background: url(../img/right-block-title-bg.gif) no-repeat left bottom; margin-left: 10px; padding-top: 12px; height: 26px; line-height: 20px; margin-bottom: 10px; }
#left-column .block h2 span { width: 200px; height: 24px; top: 12px; }
#left-column .block .block-shadow { position: relative; height: 10px; bottom: -11px; right: -1px; background: url(../img/right-block-shadow.gif) no-repeat right bottom;}
#left-column .block .block-content { padding: 0px 10px 0px 10px; }
#left-column .block p { padding-top: 7px; padding-bottom: 0px; }
#left-column .more a { color: #f37800; font-weight: bold; text-decoration: none; }
#test {
color: #f37800;
font-size: larger;
text-align: right;
position: absolute;
bottom: 8px;
right: 12px;
z-index: 4;
}
#flash { height: 288px; position: relative; overflow: visible; }
#flash-wrapper { position: absolute; top: 109px; left: 192px; width: 320px; height: 340px; }
#no-flash { margin: 11px 0px 0px 28px; width: 210px; height: 288px; overflow: hidden; }
/*******************************************************************/
/* MAIN CONTENT - img */
/*******************************************************************/
#info {
float: left;
width: 434px;
padding: 10px 0;
background: url(../img/bg.gif) no-repeat top left;
}
#info dl {
float: left;
width: 390px;
margin: 10px 20px;
padding: 0;
display: inline; /*fixes IE/Win double margin bug*/
}
#info dt {
float: right;
width: 172px;
margin: 0;
padding: 0;
font-size: 130%;
color: #f37800;
}
#info dd {
margin: 0 0 0 218px;
padding: 0;
font-size: 85%;
line-height: 1.5em;
color: #666;
}
#info dl dd.img {
margin: 0
}
#info dd.img img {
float: left;
margin: 0 8px 0 0;
padding: 4px;
border: 1px solid #d9e0e6;
border-bottom-color: #c8cdd2;
border-right-color: #c8cdd2;
background: #fff;
}
#info .alt dt {
float: left;
}
#info .alt dd {
margin: 0 218px 0 0;
}
#info .alt dd.img img {
float: right;
margin: 0 0 0 8px;
}
#main-content .block { background: url(../img/hp-block-bg.gif) repeat-y left top; font-size: 11px; line-height: 145%; width: 155px; float: left; height: 204px; margin-right: 9px; margin-bottom: 13px; position: relative; }
#main-content .block.end { margin-right: 0px; }
#main-content .block h3 { font-size: 9px; color: #A2A2A2; line-height: 15px; width: 146px; height: 55px; padding: 8px 0px 0px 9px; background: url(../img/hp-block-top-bg.gif) repeat-y left top; font-weight:normal;}
#main-content .block h3 strong { margin-top: 3px; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #F37800; line-height: 120%; text-transform: uppercase; height: 37px; }
#main-content .block h3 strong span { width: 146px; height: 37px; }
#main-content .block p { padding: 0px 4px 0px 9px;}
#main-content .block p.more { color: #f37800; text-align: right; position: absolute; bottom: 5px; right: 0px; }
/* LINK LINST */
.link-list { margin-left: 0px; padding-top: 0.8em; }
.link-list li { list-style: none; color: #f37800; font-size: 11px; line-height: 150%; }
#links { position: absolute; bottom: 18px; left: 10px; }
li.reduce {
font-weight: bold;
color: #f37800;
font-style: italic;
}