/* --- PHOTOOP STYLESHEET --- */

/*  1. Generic styling
    2. Text and Header styling
    3. Links styling
    4. Divs and Area Styling
    5. Main Menu styling
    6. Table and Form styling
    7. Dashboard styling
    8. Action Buttons Box styling
    9. Event styling
    10. RSVP styling
    11. Invitations List styling
    12. Guest Views styling
*/


/* --- 1. Generic styling --------------------------------------------------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
	font-family: arial; /* edit to change the default font type of the web site */
	text-align: center; 
	background: #fff url("/images/bg01.jpg") repeat-x top left; /* edit to change the background banner */
}

img {
	border: 0px;
}

.hidden { /* used to hide elements */
	display: none;
}


/* --- 2. Text and Header styling --------------------------------------------------------------------------------------------- */

p { /* edit to change the text used in body content */
	color: #4e4e4e;
	font-size: 8pt;
}

.agreements {
  color: #4e4e4e;
	font-size: 8pt;
}

.agreement_headers {
  color: #4e4e4e;
	font-size: 10pt;
	font-weight: bold;
}

span.whitetext01 { /* edit to change the text found in the 'title01' div - this text is usually the title of the site */
	font-size: 30pt;
	font-weight: bold;
	color: #fff;
}

span.greentext01 {  /* edit to change the text found in the 'flashmessage01' div and the comments for form input fields*/
	color: #1b5d76;
	font-size: 8pt;
}

span.greentext02 {  /* edit to change the special text in the dashboard screen */
	color: #1b5d76;
	font-size: 10pt;
}

span.textheader01 { /* edit to change the text found in the 'subtitle01' div */
	color: #1b5d76;
	font-size: 12pt;
}

span.textheader02 { /* edit to change the header text for each page - this is one of two different headers - other one found below */
	color: #6a6a6a;
	font-size: 15pt;
}

span.textheader03 { /* edit to change the header text for each page - this is one of two different headers - other one found above */
	color: #6a6a6a;
	font-size: 18pt;
}

div.event span.textheader03,  
div.new_event span.textheader03 {
	width: 60%;
	float: left;
}

span.textheader04 { /* edit this to change the styling of the table column headers and the event status on the dashboard screen */
	font-size: 8pt;
	color: #6a6a6a;
}

span.textfooter01 { /* This is the standard text styling used for the footer bar - to keep consistant remember to edit the footerlink, found below, to the same styling*/
	color: #fff;
	font-size: 8pt;
}

span.greytext01 { 
	color: #6a6a6a;
	font-size: 8pt;
}

span.greytext02 {
	color: #4e4e4e;
	font-size: 10pt;
}

li.index { /* edit to change the text used in body content */
	color: #4e4e4e;
	font-size: 8pt;
}

span.in {
  color: #ee7e12;
  font-family: times;
  font-style: italic;
  font-size: 120%;
  font-weight: bold;
}

span.silico {
  color: #033769;
  font-family: times;
  font-size: 120%;
}

/* --- 3. Links styling --------------------------------------------------------------------------------------------- */

a.mainmenu:active, a.mainmenu:link, a.mainmenu:visited {
	font-size: 10pt;
	color: #fff;
	text-decoration: none;
}

a.mainmenu:hover {
	font-size: 10pt;
	color: #fff;
	text-decoration: none;
}

a.bodylink:active, a.bodylink:link, a.bodylink:visited {
	font-size: 8pt;
	color: #4e4e4e;
	text-decoration: underline;
}

a.bodylink:hover {
	font-size: 8pt;
	color: #000;
	text-decoration: underline;
}

td.faqactions a:active, td.faqactions a:link, td.faqactions a:visited {
	font-size: 8pt;
	color: #4e4e4e;
	text-decoration: underline;
}

td.faqactions a:hover {
	font-size: 8pt;
	color: #000;
	text-decoration: underline;
}

span.pagelinks a:link, span.pagelinks a:link, span.pagelinks a:visited {
	font-size: 10pt;
	color: #4e4e4e;
	text-decoration: underline;
}

span.pagelinks a:hover {
	font-size: 10pt;
	color: #000;
	text-decoration: underline;
}

a.bodylink2:active, a.bodylink2:link, a.bodylink2:visited {
	font-size: 10pt;
	color: #4e4e4e;
	text-decoration: underline;
}

a.bodylink2:hover {
	font-size: 10pt;
	color: #000;
	text-decoration: underline;
}

a.footerlink:active, a.footerlink:link, a.footerlink:visited { /* this is the footer bars link styling - to keep consistant remember to edit the span.textfooter01 above */
	font-size: 8pt;
	color: #fff;
	text-decoration: none;
}

a.footerlink:hover {
	font-size: 8pt;
	color: #fff;
	text-decoration: underline;
}


/* --- 4. Divs and Area styling --------------------------------------------------------------------------------------------- */

div.wrapper01 {
	text-align: center;
	margin: 0px auto;
	width: 806px;
	background: transparent url("/images/bgleft01.jpg") no-repeat top left;
}

div.canvas01 {
	width: 800px;
	margin: 0px auto;
	text-align: left;
	background: transparent;
}

div.header01 {
	width: 800px;
	height: 60px;
	line-height: 60px;
	position: relative;
	background: #fff url("/images/photooplogo01.jpg") no-repeat top left;
}

div.title01 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 250px;
	height: 60px;
	text-align: center;
	line-height: 60px;
}

div.subtitle01 {
	position: absolute;
	left: 250px;
	top:0px;
	height: 60px;
	width: 550px;
	text-align: center;
}

div.header02 {	
	position: relative;
	width: 800px;
	height: 220px;
  background: transparent;
	text-align: left;
}

div.menuimgbox01 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 252px;
	background: #fff;
}

div.menubar01 {	
	position: absolute;
	top: 110px;
	right: 0px;
	width: 540px;
	height: 30px;
	margin: 0px auto;
}

div.flashmessage01 {
	position: absolute;
	top: 140px;
	right: 20px;
	width: 530px;
	height: 60px;
	text-align: center;
	line-height: 60px;
}

div.content01 {
	padding: 20px 20px 20px 20px;
}

div.footer01 {
	height: 20px;
	line-height: 20px;
	background: #1b5d76;
	width: 100%;
}


/* --- 5. Main Menu styling --------------------------------------------------------------------------------------------- */

ul.mainmenulist {	display: block;
			float: right;
			margin: 0px;
			padding: 0px;
			padding-right: 2px;	/* padding left or right for tabs, so as to not be on edge of page */
}

li.mainmenuitem {	display: block;
			float: right;		/* Switch this left or right to change where items appear on bar, will also put in reverse order */
}

li.mainmenuitem a.mainmenu {	display: block;
				float: left;
				padding: 0 0 0 10px;
				line-height: 30px;
				background: transparent url("/images/tab_01.jpg") no-repeat top left;
				cursor: pointer;
}

li.mainmenuitem a.mainmenu:hover {	display: block;
					float: left;
					padding: 0 0 0 10px;
					line-height: 30px;
					background: transparent url("/images/tab_02.jpg") no-repeat top left;
}

a.mainmenu span.tab01 {	background: transparent url("/images/tab_01.jpg") no-repeat top right;
			display: block;
			float: left;
			padding: 0 20px 0 10px;
			height: 30px;
}

a.mainmenu:hover span.tab01 {	background: transparent url("/images/tab_02.jpg") no-repeat top right;
				display: block;
				float: left;
				padding: 0 20px 0 10px;
				height: 30px;
}


/* --- 6. Table and Form styling --------------------------------------------------------------------------------------------- */

table.faq td {
  font-size: 8pt;
  vertical-align: top;
}

legend { /* edit to change the styling of the headers for tables */
	color: #1b5d76;
	font-size: 12pt;
}

label { /* edit to change the labels of text input fields in tables */
	color: #1b5d76;
	font-size: 8pt;
}

td.guestlink a:link, td.guestlink a:active, td.guestlink a:visited { /* edit to change the styling of the text used for each guest in the invitations and guest list screens */
	color: #000;
	text-decoration: none;
	font-size: 8pt;
}

td.guestlink a:hover { /* edit to change the styling of the text used for each guest in the invitations and guest list screens */
	color: #000;
	text-decoration: none;
	font-size: 8pt;
}

td.guestlink { /* edit to change the styling of the text used for each guest in the invitations and guest list screens */
	color: #000;
	font-size: 8pt;
}

div#flash {
	display: block;
	clear: both;
	background: #ffffed;
	border: 1px solid #fff500;
	border-left: none;
	border-right: none;
	margin: 0px 40px 10px 40px;
	padding: 5px;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
}
div#content02 {
	margin: 0;
	padding: 10px;
	padding-top: 0px;
	border: 1px solid white;
	clear: both;
}

div.errorExplanation {
  border: 1px solid #ff0000;
  padding: 5px;
  background: #ffefef;
  margin-bottom: 10px;
}
div.errorExplanation h2 {
  font-size: 100%;
}

div.errorExplanation li {
  font-size: 75%;
}

.error {
  font-weight: bold;
  color: red;
}

fieldset.event {
  width: 520px;
}

fieldset div.fields {
	padding: 5px;
	margin: 0;
}

fieldset div label {
	display: block;
}

* html fieldset {
	width: 45%;
}
div.form {
	clear: both;
}

div.inline div.fieldWithErrors {
  display: inline;
}

div.terms01, 
div.terms01 div.fieldWithErrors {
  float: left;
  width: 20px;
}

table.eventtable01 {
  width: 400px;
}

table.eventtable01 div.fieldWithErrors {
  width: 210px;
  float: left;
}

td.userinfo00 {
  width: 150px;
}

tr.userinfo01 {
  height: 45px;
  vertical-align: 5%
}

div.termsline01 {
 height: 15px; 
}

td.indexTable01 {
  width: 410px;
}

td.indexTable02 {
  vertical-align: top;
}

/* --- 7. Dashboard styling --------------------------------------------------------------------------------------------- */

div.content02 {
	border: 1px solid #1b5d77; /* edit to change the border colour of the event area in the dashboard screen */
	background: #fff;
	padding: 5px;
	clear: both;
	margin-bottom: 10px;
}

div.event div.event_info {
	clear: both;
}
div.event div.details,
div.new_event div.details {
	width: 39%;
	float: right;
	text-align: right;
	color: #4e4e4e;
}
div.event div.status {
	clear: left;
	width: 35%;
	float: left;
	font-weight: bold;
	color: #4e4e4e;
}
div.event div.invites {
	width: 30%;
	float: left;
}
div.event div.invites div {
	padding-left: 16px;
	font-size: 10pt;
}
div.event div.invites div.total {
	padding-left: 0px;
	font-size: 10pt;
}
div.event div.invites div a {
	text-decoration: none;
	color: #4e4e4e;
	font-size: 10pt;
}
div.event div.invites div a:hover {
	text-decoration: underline;
	color: #4e4e4e;
	font-size: 10pt;
}

div.guestreply {
	width: 33%;
	border: 1px solid #1b5d77;
	text-align: center;
	margin: 0px auto;
}
div.guestreply ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	border: 1px solid white;
}
div.guestreply ul li {
	height: 1.75em;
	line-height: 1.75em;
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	margin: 0;
	padding: 0;
}
div.guestreply ul li a {
	display: block;
	text-decoration: none;
	color: black;
}
div.guestreply ul li a:hover {
	background: white;
	color: black;
}


/* --- 8. Action Buttons Box styling --------------------------------------------------------------------------------------------- */

div.actions {
	width: 33%;
	float: right;
	border: 1px solid #1b5d77; /*edit to change 'border' colour of action buttons box*/
}
div.actions ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	border: 1px solid white;
	background: #639aae; /*edit to change 'fill' colour of action buttons box*/
}
div.actions ul li {
	height: 1.75em;
	line-height: 1.75em;
	text-align: center;
	font-weight: bold;
	font-size: 120%;
	margin: 0;
	padding: 0;
}
div.actions ul li a {
	display: block;
	text-decoration: none;
	color: black;
}
div.actions ul li a:hover {
	background: #fff; /*edit to change 'rollover fill' colour of action buttons in box*/
	color: black;
}



/* --- 9. Event styling --------------------------------------------------------------------------------------------- */

div.event div.bottom,
div.new_event div.bottom {
	clear: both;
}

div.event div.bronze {
	color: #FCD300;
	text-align: center;
	font-weight: bold;
	margin-top: 5px;
	font-size: 80%;
}

div.new_event h2 input {
	font-size: 16pt;
	width: 100%;
}

* html div.new_event h2 input {
	font-family: Tahoma, Arial, sans-serif;
}


/* --- 10. RSVP styling --------------------------------------------------------------------------------------------- */

div.rsvp button {
	display: block;
	background: white;
	font-weight: bold;
	width: 100%;
	cursor: pointer;
}
div.rsvp button:hover {
	color: #FCD300;
}
div.rsvp div.details {
	text-align: center;
	font-size: 140%;
}
div.rsvp div.details div {
	width: 65%;
	margin: 0 auto;
	padding: 2px;
}
div.rsvp div.details div.salutation {
	font-size: 80%;
}
div.rsvp div.details div.dates {
	margin-top: 0.5em;
}
div.rsvp div.details div.venue {
	margin-top: 0.5em;
}
div.rsvp div.details div.venue div.name {
	font-weight: bold;
}
div.rsvp div.details div.venue div.maplink {
	font-size: 75%;
}
div.rsvp div.details div.venue div.maplink a {
	padding: 0.25em 3em 0.25em 3em;
	border: 1px solid #fffa88;
	background: white;
	border-top: none;
	border-bottom: none;
}

.rsvp-details,
#submit-rsvp {
  margin-left: 30px;
}

textarea.rsvp-details {
  margin-top: 10px;
  margin-bottom: 15px;
}


div.rsvp div.actions {
	text-align: center;
	margin-top: 1em;
	font-size: 120%;
}
div.rsvp div.actions div {
	width: 65%;
	margin: 0 auto;
	padding: 5px;
}
div.rsvp div.actions ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
div.rsvp div.actions ul li {
	margin: 0;
	padding: 0;
	padding: 0 20% 0 20%;
}
div.rsvp div.thankyou {
	text-align: left;
}
div.rsvp div.thankyou div {
	width: 60%;
	padding: 2px;
	margin-bottom: 0.5em;
}
div.rsvp div.thankyou div.salutation {
	font-size: 80%;
}


/* --- 11. Invitations List Styles --------------------------------------------------------------------------------------------- */

div.content.table-form h3 {
	padding-left: 0.5em;
	font-size: 160%;
	margin-bottom: 1em;
}
div.content.table-form table {
	width: 100%;
	padding: 0;
	margin: 0;
	border-collapse: collapse; 
	border-spacing: 0;
}
div.content.table-form table tr {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}

div.content.table-form table tr:hover td {
	background: #1b5d77; /* edit to change 'rollover fill' colour of guests in the invitation screen and guest list screen */
	color: #fff;
}
div.content.table-form table tr:hover td a {
	color: #fff;
}
div.content.table-form table a.button {
  padding: 1px 3px 0px 3px;
}
div.content.table-form table tr:hover button,
div.content.table-form table tr:hover a.button {
	background: transparent;
}
div.content.table-form table tr td {
	margin: 0;
	padding: 0;
}

th.topborder {
	border-top: 1px solid #000; /* edit to change colour of group separators in the invitation screen (also edit border-bottom below) */
	font-size: 8pt;
}

th.borderbottom {
	border-bottom: 1px solid #000; /* edit to change colour of group separators in the invitation screen (also edit border-top above) */
}

div.content.table-form table tr.main-header th {
	border-top-width: 0px;
	font-weight: normal;
}
div.content.table-form .limit {
	font-size: 80%;
	margin-left: 1em;
}
div.content.table-form .rsvp-bounced {
	background: #fff;
	color: black; /* edit to change text colour of guest group */
}
div.content.table-form .rsvp-bounced a {
	color: black; /* edit to change text colour of guest group */
}
div.content.table-form .rsvp-attending {
	background: #fff; /* edit to change background 'fill' colour of 'attending' guests in the invitation screen */
	color: black; /* edit to change text colour of guest group */
}
div.content.table-form .rsvp-not-responded {
	background: #fff; /* edit to change background 'fill' colour of 'not-responded' guests in the invitation screen */
	color: black; /* edit to change text colour of guest group */
}
div.content.table-form .rsvp-maybe {
	background: #fff; /* edit to change background 'fill' colour of 'maybe' guests in the invitation screen */
	color: black; /* edit to change text colour of guest group */
}
div.content.table-form .rsvp-not-attending {
	background: #fff; /* edit to change background 'fill' colour of 'not-attending' guests in the invitation screen */
	color: black; /* edit to change text colour of guest group */
}
div.content.table-form .actions {
	width: 100px;
}
div.content.table-form .information,
div.content.table-form .warning {
	text-align: center;
	line-height: 250%;
	font-weight: bold;
	border-top: 1px solid black; /* edit to change the group separator border located on top of the warning bar in the invitations screen */
}
div.content.table-form .information,
div.content.table-form .action {
	background: #fff; /* edit to change the background 'fill' colour of the special bars in the invitation and group list screen (for example, ) */
}
div.content.table-form .warning {
	background: #a70000; /* edit to change the background 'fill' colour of the warning bar (warns if guests have not yet been invited) in the invitation screen */
}
div.content.table-form .warning * {
	color: white; /* edit to change the text colour of the warning bar (warns if guests have not yet been invited) in the invitation screen */
}
div.content.table-form table tr.action td {
  font-weight: bold;
  padding: 5px 0 5px 0;
  border-top: 1px solid black;
}
div.content.table-form table tr.action:hover td,
div.content.table-form table tr.information:hover td {
  background: #1b5d77;
}
* html div.content.table-form table .action a,
* html div.content.table-form table .warning a,
* html div.content.table-form table .information a {
  display: block;
}
* html div.content.table-form table .action a:hover,
* html div.content.table-form table .information a:hover,
  * html div.content.table-form table .warning a:hover {
  background: #1b5d77;
  color: black;
}
div.content.table-form img.icon {
	margin: 0 3px 0 3px;
	vertical-align: middle;
}
div.content.table-form button,
div.content.table-form a.button {
	border: 1px solid transparent;
	margin: 3px;
	padding: 0;
	background: transparent;
	float: left;
	cursor: pointer;
}
div.content.table-form a.attendance img {
	vertical-align: middle;
}


/* --- 12. Guest Views styling --------------------------------------------------------------------------------------------- */

td.pageButton {
  padding-top: 0px;
  width: auto;
}

td#addGuestButton {
  width: 95%;
  text-align: right;
}

span#backToListText,
span#newContactText {
  vertical-align: 40%;
}

p#backLink {
  text-align: right;
}

span#timeCreateUpdate {
  color: #bbb;
  font-size: 0.8em;
}

table.csv-sample {
  text-align: center;
  border: 0px solid none;
  border-collapse: collapse;
  width: 100%;
}
table.csv-sample td {
  border: 1px solid black;
  padding: 5px; 
}
fieldset#multiple-contacts pre {
  font-size: 120%;
}
fieldset#multiple-contacts textarea {
  width: 100%;
}

a.guestmenulink:link, a.guestmenulink:active, a.guestmenulink:visited {
	color: #000;
	text-decoration: none;
}

a.guestmenulink:hover {
	color: #000;
	text-decoration: underline;
}