/* @override http://localhost:8888/fc/muziekmonumenten/scripts/style_intro.css */
@import url(https://fonts.googleapis.com/css?family=Oxygen:400,300,700);

/* SPAN */
.contactName {
  margin: 10px 0px 60px 0px;
  text-align: right;
}
a.copyright,
a.copyright:link,
a.copyright:visited,
a.copyright:hover,
a.copyright:active {
  margin-top: 8px;
  display: inline-block;
  background-image: url("../images/graphics/copyright.gif");
  width: 226px;
  height: 22px;
}
a.copyright:hover,
a.copyright:active {
  background-image: url("../images/graphics/copyrightOver.gif");
}
a#privacy,
a#privacy:link,
a#privacy:visited,
a#privacy:active,
a#privacy:hover {
  float: right;
  top: 8px;
  width: 200px;
  height: 25px;
  z-index: 9;
  text-align: right;
  font-size: 16px;
  position: relative;
  color: #8c8c8c !important;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
}

/* DIVS intro */
#fotogalerie {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
}
#blockWrapper {
  width: 900px;
  height: 600px;
}
#blockWrapper #blockContent {
  width: 100%;
  height: 600px;
  border: 1px solid #959595;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}
#blockContent #introSideGraph {
  position: absolute;
  z-index: 3;
  width: 200px;
  height: 600px;
  // background-image: url('../images/graphics/introSideGraph_bach.png');
  display: none;
}

#blockContent .introSideGraphGuestbook {
  display: none;
}

/* HOLDERS */

#projectBulletHolder {
  /* placeholder equal to projectpage */
  display: none;
  margin-top: 40px;
  margin-bottom: 20px;
  margin-right: 55px;
}
#blockWrapperHolder {
  display: none;
  padding-left: 40px;
  padding-right: 40px;
  /* paddingholder */
}

/* buttons (absolute) */
#blockContent #introLinkNext {
  width: 190px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 228px;
}

#blockContent #introLinkNextContact {
  width: 200px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 298px;
  left: 690px;
}
#blockContent #introLinkGuestbook {
  width: 200px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 298px;
  left: 690px;
}
#blockContent #introLinkFotogalerie {
  width: 200px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 263px;
  left: 690px;
}
#blockContent #introLinkNieuwsbrief {
  width: 200px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 333px;
  left: 660px;
}

/* hide/set startbutton on a direct-page */
#blockContent .introLinkNextFrontpage,
#blockContent .introLinkNextGuestbook {
  left: 700px;
}
#blockContent .introLinkNextGuestbook {
  display: block;
  display: none;
}
#blockContent .introLinkNextProjects {
  left: 910px;
}
#blockContent .introLinkNextContactFrontpage {
  display: block;
}
#blockContent .introLinkNextContactProjects,
#blockContent .introLinkNextContactGuestbook,
#blockContent .introLinkGuestbookProjects,
#blockContent .introLinkGuestbookGuestbook,
#blockContent .introLinkFotogalerieProjects,
#blockContent .introLinkFotogalerieGuestbook,
#blockContent .introLinkNieuwsbriefProjects,
#blockContent .introLinkNieuwsbriefGuestbook {
  display: block;
  display: none;
}

#blockContent #introLinkPrev {
  display: block;
  width: 148px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 550px;
}
#blockContent #introLinkStartpage {
  display: block;
  width: 210px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 560px;
}
#blockContent .introLinkPrevFrontpage,
#blockContent .introLinkPrevGuestbook {
  left: -150px;
}
#blockContent .introLinkStartpageFrontpage,
#blockContent .introLinkStartpageProjects {
  left: -220px;
}
#blockContent .introLinkStartpageGuestbook {
  left: 20px;
}
#blockContent .introLinkPrevProjects {
  left: 40px;
}
#blockContent #actionButtonNewsletter {
  width: 300px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 549px;
  left: 560px;
}
#blockContent .actionButtonNewsletterFrontpage,
#blockContent .actionButtonNewsletterGuestbook {
  display: block;
  display: none;
  visibility: hidden; /* TODO remove */
  pointer-events: none; /* TODO remove */
}
#blockContent .actionButtonNewsletterProjects {
  display: block;
}

#blockContent #actionButtonBack {
  display: block;
  width: 202px;
  height: 25px;
  position: absolute;
  z-index: 2;
  top: 550px;
  left: -210px;
}

/* page wrappers */
#pageWrapper {
  position: absolute;
  z-index: 1;
  top: 0px;
  width: 2700px;
  height: 600px;
}
.pageWrapperFrontpage,
.pageWrapperGuestbook {
  left: 0px;
}
.pageWrapperProjects {
  left: -900px;
}
#pageWrapper .page {
  float: left;
  width: 900px;
  height: 600px;
  position: relative;
}
#pageWrapper #page2 #projects {
  background-color: #000;
  background-image: url("../images/graphics/background-effect.jpg");
  background-size: 400px 100%;
  background-repeat: no-repeat;
  background-position: -60px -56px;
  // background-attachment: fixed;
}

/* page 1 */
.page1_background {
  background-image: url("../images/graphics/background-frontpage.jpg") !important;
  // background-attachment: fixed;
  // background-position: 226px 92px;
}
#page1 #introBulletpoints {
  width: 550px;
  height: 250px;
  position: absolute;
  top: 37px;
  left: 207px;
}
#page1 #introTitle {
  width: 580px;
  height: 50px;
  position: absolute;
  top: 490px;
  left: 290px;
}
#page1 #introSubtitle {
  width: 380px;
  height: 35px;
  position: absolute;
  top: 545px;
  left: 445px;
}

/* page 2 - contact */
#contactText {
  position: absolute;
  line-height: 26px;
  top: 100px;
  left: 310px;
  width: 500px;
}
#contactText a {
  vertical-align: top;
}

/* page 2 - projects */

#page2 #actionButtons {
  position: absolute;
  top: 545px;
  left: 560px;
}
#page2 .actionsButtonsFrontpage {
  display: none;
}

#page2 #projects {
  // position: absolute;
  // top: 30px;
  // left: 40px;
  // width: 850px;
  padding-top: 10px;
  height: inherit;
}
#page2 .project {
  display: block;
  // float: left;
  // margin-top: 20px;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 5px;

  padding-bottom: 3px;
  position: relative;
  font-family: "Oxygen";
  font-weight: 100;
  width: 500px;
  background-color: blue;
  min-height: 58px;
  // background-color: #eee;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#193502+0,15290e+72,0d1b04+100 */
  background: rgb(25, 53, 2); /* Old browsers */
  background: -moz-linear-gradient(
    left,
    rgba(25, 53, 2, 1) 0%,
    rgba(21, 41, 14, 1) 72%,
    rgba(13, 27, 4, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    left,
    rgba(25, 53, 2, 1) 0%,
    rgba(21, 41, 14, 1) 72%,
    rgba(13, 27, 4, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right,
    rgba(25, 53, 2, 1) 0%,
    rgba(21, 41, 14, 1) 72%,
    rgba(13, 27, 4, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193502', endColorstr='#0d1b04',GradientType=1 ); /* IE6-9 */
}
#page2 .project:hover {
  text-decoration: none;
}
#page2 .project:nth-of-type(2),
#page2 .project:nth-of-type(4) {
  // margin-left: 110px;
}
#page2 .project .avatar {
  display: block;
  float: left;
  width: 58px;
  height: 58px;
  background-color: #eee;
  border: 1px solid #aaa;
}
#page2 .project .avatar + div {
  margin-left: 90px;
}
#page2 .project div.artist {
  color: #efefef;
  font-size: 11px;
  padding-top: 6px;
}
#page2 .project .name {
  color: #a1e607;
  font-size: 21px;
  margin: 1px 0px 0px 0px;
}
#page2 .project div.date {
  color: red;
  font-size: 17px;
}
#page2 .project div.date.inactive {
  // color: #bbb;
  // text-decoration: line-through;
}
#page2 .project div.sameContent {
  margin-top: 6px;
  font-style: italic;
  color: gray;
}

/* project link */
#page2 .project div.projectLink,
#page2 .project a.projectLink,
#page2 .project a.projectLink:link,
#page2 .project a.projectLink:visited,
#page2 .project a.projectLink:active,
#page2 .project a.projectLink:hover {
  /*width: 248px;*/
  display: block;
  margin: 2px 0px 2px 30px;
  /*border-left: 4px solid green;*/
}
#page2 .project a.projectLink:hover {
  /*border-left: 4px solid #ee0000;	*/
}
#page2 .project .linkArrow {
  float: left;
  /*margin-right: 200px;*/
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: relative;
  top: 0px;
  background-image: url("../images/graphics/linkArrow.png");
}
#page2 .project .linkArrow.inactive {
  // background-image: url('../images/graphics/linkArrow-gray.png');
}

/* page 2 - guestbook */
#guestbookBackground {
  width: 900px;
  height: 600px;
  background-image: url("../images/graphics/guestbook_background.png");
}
.guestbookCard {
  position: absolute;
  top: -200px;
  width: 900px;
  height: 800px;
  background-image: url("../images/graphics/guestbook_card.png");
  display: none;
}
.guestbookCardBackground {
  width: 900px;
  height: 800px;
  display: block;
}
.guestbookCard .message {
  position: absolute;
  top: 315px;
  left: 120px;
  width: 550px;
  height: 290px;
}
.guestbookCard .message td {
  line-height: 28px;
  font-size: 16px;
}

.guestbookCard .guestbookTitle {
  position: absolute;
  top: 230px;
  left: 40px;
  width: 210px;
  height: 60px;
  background-image: url("../images/graphics/guestbookTitle.gif");
}
.guestbookCard .name {
  position: absolute;
  top: 630px;
  left: 280px;
  width: 400px;
  height: 25px;
  text-align: right;
  color: #444444;
  font-weight: bold;
  font-size: 16px;
}
.guestbookCard .projectName {
  position: absolute;
  top: 655px;
  left: 180px;
  width: 500px;
  height: 25px;
  text-align: right;
  font-size: 16px;
  color: #aaaaaa;
}
.guestbookCard .currentPageNumber {
  position: absolute;
  top: 745px;
  left: 610px;
  width: 100px;
}
.guestbookCard .previousPageNumber {
  position: absolute;
  top: 728px;
  left: 730px;
  width: 37px;
  height: 30px;
  overflow: hidden;
}
.guestbookCard .currentPageNumber .numbers {
  text-align: right;
  width: 100px;
  height: 30px;
}
.guestbookCard .previousPageNumber .numbers {
  position: relative;
  left: -63px;
  text-align: right;
  width: 100px;
  height: 30px;
}
.guestbookCard .guestbookCardNumberDisplay {
  display: block;
}

.guestbookCard form .meta {
  position: relative;
  top: 620px;
  left: 380px;
  width: 450px;
}
.guestbookCard form textarea {
  position: relative;
  left: -10px;
  width: 555px;
  height: 252px;
  border: 0px;
  background-image: url("../images/graphics/inputTextarea.png");
  background-color: transparent;
  line-height: 28px;
  font-size: 16px;
  font-family: inherit;
  overflow: hidden;
}
.guestbookCard form input.lineInput {
  width: 300px;
  font-family: inherit;
}
.guestbookCard form select,
.guestbookCard form select option {
}
#guestbookFormSubmitButton {
  position: absolute;
  top: 710px;
  left: 510px;
  width: 190px;
  height: 25px;
}
#cardNewMessage {
  display: none;
}
a#guestbookNewMessageButton,
a#guestbookNewMessageButton:link,
a#guestbookNewMessageButton:visited,
a#guestbookNewMessageButton:active,
a#guestbookNewMessageButton:hover {
  float: right;
  position: relative;
  top: 6px;
  width: 200px;
  height: 25px;
}
.newMessage {
  background-image: url("../images/graphics/guestbookNewMessage.gif");
}
.newMessageCancel {
  background-image: url("../images/graphics/guestbookNewMessageCancel.gif");
}

/* page 3 */
#newsletterText,
#newsletterTextSuccess {
  position: absolute;
  line-height: 26px;
  top: 100px;
  left: 340px;
  width: 500px;
}
#newsletterTextSuccess {
  display: none;
}
#newsletterFormTable {
  position: absolute;
  top: 200px;
  left: 230px;
  width: 500px;
}
#newsletterFormSubmitButton,
#newsletterFormSubmitSuccess {
  position: absolute;
  top: 340px;
  left: 627px;
  width: 190px;
  height: 25px;
}
#newsletterFormSubmitSuccess {
  top: 340px;
  left: 627px;
  width: 190px;
  height: 25px;
  background-image: url("../images/graphics/introNewsletterSubmitSuccess.png");
  display: none;
}