/* --Copyright 2006, Cristaff(TM). All rights reserved.-- */ /* --All code as well as elements related to design including images, color, and layout are copyright of Cristaff(R) and may not-- */ /* --be reproduced.-- */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start right-side photo image content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --I've had to extract this portion of code into a separate CSS file in order to build in the flexibility that allows the viewing */ /* --of photo previews to be dependent upon the particular webpage that is being viewed (e.g., invitation webpage, rsvp webpage, */ /* --etc.). Otherwise, the main CSS file would have hard-coded in the file location of photos to a particular webpage subdirectory */ /* --and this would then this hard-coded nature would not display the correct photos if a website user were to switch to another */ /* --webpage. For example, if a website user were viewing a particular invitation webpage and then clicked on a link to go view */ /* --the rsvp webpage the hardcoded nature of the main CSS would still point to the invitation webpage preview photos and that's */ /* --why I needed to set up the flexibility of preview photo viewing to be dependent upon the particular webpage */ /* --or subdirectory that a website user resides in. In short, creating this separate CSS file allows photo preview viewing */ /* --that depends upon the current directory structure and a common file name type (e.g., bigphoto1, littlephoto4, etc.) rather */ /* --than being called by a specific product name filename (e.g., invitation-photo1, or rsvp-photo4, etc.). */ /* --The images division or container will contain both the big photo as well as the five little preview photos. This container-- */ /* --is set up as relative but then contents within it are set up through absolute positioning. The width of this container is-- */ /* --580px, and anything larger than this (such as 582px) forces the light tan or cream color of the right-side to expand over-- */ /* --the top of the white 2px line that separates the left navigation bar from the right-side content. The margin-left and-- */ /* --margin-right centers the container, which also helps to prevent what would otherwise be another case of the light tan or-- */ /* --cream color of the right-side to expand over the top of the white 2px line that separates the left navigation bar from the-- */ /* --right-side content. The height of the container is determined by the original website comp. layout that I designed and-- */ /* --is comprised of a 8px top spacer + 429px big photo height + 19px spacer + 77px little photo height + 8px spacer = 541px, -- */ /* --however, I looked at a screen shot with the height set at 538px and I liked it so I will keep it at 538px (for single row). -- */ /* --Please note that the 77px little photo height includes a true 71px photo height plus a top and bottom border of 3px each-- */ /* --thus is 3px + 71px + 3px = 77px. The background statement paints a background color equal to the light tan color-- */ /* --of the right-side and puts the first big photo (i.e., initial or opening big photo) on the screen at the time that the-- */ /* --webpage is opened so that a web user does not need to scroll over an image before the first big photo appears on the-- */ /* --screen. Additionally, the first big photo is positioned 8px from the top and 8px from the left and it is not repeated,-- */ /* --and you can find this 8px information at the end of each of the "background" lines below (see the end of the lines).-- */ #images { position: relative; width: 580px; height: 538px; /*-- Total height of container to encompass all photo content (big photo and small product preview photos). --*/ margin-left: auto; margin-right: auto; background: #e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/) no-repeat 8px 8px; } #images_two-rows { position: relative; width: 580px; height: 637px; /*-- Total height of container to encompass all photo content (big photo and small product preview photos). --*/ margin-left: auto; margin-right: auto; background: #e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/) no-repeat 8px 8px; } #images_three-rows { position: relative; width: 580px; height: 722px; /*-- Total height of container to encompass all photo content (big photo and small product preview photos). --*/ margin-left: auto; margin-right: auto; background: #e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/) no-repeat 8px 8px; } #images_four-rows { position: relative; width: 580px; height: 807px; /*-- Total height of container to encompass all photo content (big photo and small product preview photos). --*/ margin-left: auto; margin-right: auto; background: #e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/) no-repeat 8px 8px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End right-side photo image content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start little preview photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --I've had to extract this portion of code into a separate CSS file in order to build in the flexibility that allows the viewing */ /* --of photo previews to be dependent upon the particular webpage that is being viewed (e.g., invitation webpage, rsvp webpage, */ /* --etc.). Otherwise, the main CSS file would have hard-coded in the file location of photos to a particular webpage subdirectory */ /* --and this would then this hard-coded nature would not display the correct photos if a website user were to switch to another */ /* --webpage. For example, if a website user were viewing a particular invitation webpage and then clicked on a link to go view */ /* --the rsvp webpage the hardcoded nature of the main CSS would still point to the invitation webpage preview photos and that's */ /* --why I needed to set up the flexibility of preview photo viewing to be dependent upon the particular webpage */ /* --or subdirectory that a website user resides in. In short, creating this separate CSS file allows photo preview viewing */ /* --that depends upon the current directory structure and a common file name type (e.g., bigphoto1, littlephoto4, etc.) rather */ /* --than being called by a specific product name filename (e.g., invitation-photo1, or rsvp-photo4, etc.). */ /* --This next section serves to add each of the little preview photos separately. In this case my little preview-- */ /* --photos are 95px wide and 71px high (does not account for the 3px borders that I use that adds 6px additional = 2 * 3px).-- */ /* --*********************************************************************************************************************** --*/ /* --****************************** Begin single row of little product preview photos ****************************** --*/ /* --*********************************************************************************************************************** --*/ #images a.photo-preview2 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images a.photo-preview3 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images a.photo-preview4 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images a.photo-preview5 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images a.photo-preview6 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } /* --********************************************************************************************************************* --*/ /* --****************************** End single row of little product preview photos ****************************** --*/ /* --********************************************************************************************************************* --*/ /* --********************************************************************************************************************* --*/ /* --****************************** Begin two rows of little product preview photos ****************************** --*/ /* --********************************************************************************************************************* --*/ #images_two-rows a.photo-preview2 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview3 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview4 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview5 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview6 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview7 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview8 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview9 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview10 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_two-rows a.photo-preview11 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } /* --******************************************************************************************************************* --*/ /* --****************************** End two rows of little product preview photos ****************************** --*/ /* --******************************************************************************************************************* --*/ /* --*********************************************************************************************************************** --*/ /* --****************************** Begin three rows of little product preview photos ****************************** --*/ /* --*********************************************************************************************************************** --*/ #images_three-rows a.photo-preview2 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview3 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview4 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview5 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview6 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview7 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview8 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview9 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview10 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview11 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview12 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview13 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview14 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview15 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_three-rows a.photo-preview16 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } /* --********************************************************************************************************************* --*/ /* --****************************** End three rows of little product preview photos ****************************** --*/ /* --********************************************************************************************************************* --*/ /* --********************************************************************************************************************** --*/ /* --****************************** Begin four rows of little product preview photos ****************************** --*/ /* --********************************************************************************************************************** --*/ #images_four-rows a.photo-preview2 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview3 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview4 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview5 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview6 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview7 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview8 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview9 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview10 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview11 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview12 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview13 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview14 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview15 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview16 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview17 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview18 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview19 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview20 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } #images_four-rows a.photo-preview21 { background: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/mini-); width: 95px; height: 71px; } /* --******************************************************************************************************************** --*/ /* --****************************** End four rows of little product preview photos ****************************** --*/ /* --******************************************************************************************************************** --*/ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End little preview photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The thumbnails content below is for product and collection thumbnail photos. It has been set up through CSS for flickerless-- */ /* --image replacement just in case I wanted to have a black and white photo going to a colored photo when the mouse is hovered-- */ /* --over the top of an image, or if I wanted to go from a fuzzy photo to a clear photo. However, at this moment I'm not taking-- */ /* --advantage of these artistic type of approach and I have no plans to do so at this time so the flickerless image replacement-- */ /* --technique is really overkill, but I'll keep it just in case. The idea came from an article written by Stu Nicholls called-- */ /* --"How to use CSS for Flickerless Image Replacement." Down below you'll see two negative numbers that are used for-- */ /* --positioning (in this case positioning outside the image being shown. Stu says, "The background color needs to be transparent-- */ /* --to allow the list images to show through and the image position need to be given at least one negative (or positive) value-- */ /* --that is larger than the image size. 'no-repeat' is used to ensure that the image will be displayed only once." Since my-- */ /* --below is 160px wide I simply chose -1000px and -1000px since they are both larger than 160px.-- */ #thumbnails li.thumbnail01 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail01_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail02 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail02_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail03 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail03_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail04 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail04_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail05 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail05_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail06 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail06_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail07 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail07_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail08 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail08_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail09 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail09_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail10 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail10_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail11 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail11_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail12 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail12_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail13 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail13_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail14 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail14_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail15 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail15_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail16 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail16_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail17 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail17_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail18 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail18_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail19 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail19_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail20 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail20_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail21 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail21_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail22 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail22_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail23 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail23_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail24 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail24_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail25 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail25_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail26 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail26_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail27 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail27_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail28 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail28_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail29 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail29_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail30 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail30_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail31 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail31_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail32 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail32_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail33 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail33_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail34 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail34_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail35 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail35_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail36 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail36_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail37 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail37_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail38 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail38_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail39 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail39_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail40 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail40_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail41 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail41_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail42 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail42_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail43 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail43_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail44 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail44_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail45 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail45_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail46 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail46_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail47 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail47_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail48 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail48_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail49 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail49_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail50 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail50_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail51 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail51_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail52 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail52_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail53 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail53_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail54 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail54_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail55 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail55_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail56 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail56_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail57 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail57_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail58 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail58_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail59 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail59_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail60 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail60_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail61 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail61_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail62 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail62_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail63 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail63_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail64 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail64_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail65 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail65_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail66 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail66_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail67 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail67_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail68 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail68_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail69 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail69_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail70 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail70_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail71 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail71_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail72 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail72_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail73 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail73_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail74 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail74_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail75 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail75_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail76 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail76_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail77 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail77_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail78 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail78_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail79 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail79_160px-wide.jpg) no-repeat;} #thumbnails li.thumbnail80 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail80_160px-wide.jpg) no-repeat;} #thumbnails a#thumbnail01 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail01_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail02 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail02_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail03 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail03_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail04 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail04_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail05 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail05_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail06 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail06_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail07 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail07_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail08 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail08_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail09 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail09_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail10 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail10_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail11 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail11_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail12 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail12_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail13 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail13_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail14 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail14_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail15 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail15_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail16 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail16_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail17 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail17_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail18 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail18_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail19 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail19_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail20 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail20_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail21 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail21_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail22 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail22_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail23 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail23_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail24 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail24_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail25 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail25_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail26 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail26_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail27 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail27_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail28 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail28_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail29 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail29_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail30 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail30_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail31 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail31_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail32 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail32_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail33 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail33_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail34 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail34_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail35 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail35_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail36 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail36_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail37 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail37_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail38 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail38_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail39 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail39_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail40 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail40_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail41 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail41_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail42 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail42_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail43 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail43_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail44 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail44_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail45 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail45_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail46 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail46_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail47 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail47_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail48 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail48_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail49 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail49_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail50 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail50_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail51 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail51_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail52 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail52_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail53 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail53_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail54 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail54_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail55 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail55_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail56 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail56_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail57 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail57_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail58 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail58_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail59 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail59_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail60 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail60_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail61 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail61_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail62 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail62_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail63 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail63_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail64 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail64_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail65 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail65_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail66 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail66_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail67 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail67_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail68 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail68_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail69 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail69_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail70 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail70_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail71 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail71_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail72 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail72_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail73 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail73_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail74 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail74_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail75 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail75_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail76 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail76_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail77 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail77_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail78 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail78_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail79 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail79_160px-wide.jpg) -1000px -1000px no-repeat;} #thumbnails a#thumbnail80 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail80_160px-wide.jpg) -1000px -1000px no-repeat;} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start product portfolio big thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The thumbnails content below is for the product portfolio big thumbnail photos. It has been set up through CSS for-- */ /* --flickerless image replacement just in case I wanted to have a black and white photo going to a colored photo when the mouse-- */ /* --is hovered over the top of an image, or if I wanted to go from a fuzzy photo to a clear photo. However, at this moment I'm-- */ /* --not taking advantage of these artistic type of approach and I have no plans to do so at this time so the flickerless image-- */ /* --replacement technique is really overkill, but I'll keep it just in case. The idea came from an article written by Stu-- */ /* --Nicholls called "How to use CSS for Flickerless Image Replacement."-- */ /* --Currently only using #01 through #07 for Personalized Stationery, Weddings, Social Events, Seasonal Greetings, -- */ /* --Custom Personalized Stationery, Custom Wedding Stationery, and Gift Certificates. The remaining numbers (#08 through #30)-- */ /* --are there for future growth and are not being used today. Down below you'll see two negative numbers that are used for-- */ /* --positioning (in this case positioning outside the image being shown. Stu says, "The background color needs to be transparent-- */ /* --to allow the list images to show through and the image position need to be given at least one negative (or positive) value-- */ /* --that is larger than the image size. 'no-repeat' is used to ensure that the image will be displayed only once." Since my-- */ /* --below is 250px wide I simply chose -1000px and -1000px since they are both larger than 250px. -- */ #big-thumbnails li.big-thumbnail01 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail01_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail02 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail02_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail03 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail03_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail04 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail04_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail05 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail05_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail06 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail06_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail07 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail07_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail08 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail08_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail09 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail09_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail10 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail10_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail11 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail11_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail12 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail12_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail13 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail13_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail14 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail14_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail15 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail15_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail16 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail16_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail17 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail17_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail18 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail18_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail19 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail19_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail20 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail20_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail21 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail21_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail22 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail22_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail23 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail23_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail24 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail24_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail25 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail25_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail26 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail26_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail27 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail27_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail28 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail28_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail29 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail29_250px-wide.jpg) no-repeat;} #big-thumbnails li.big-thumbnail30 {background:#696a6c url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail30_250px-wide.jpg) no-repeat;} #big-thumbnails a#big-thumbnail01 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail01_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail02 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail02_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail03 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail03_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail04 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail04_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail05 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail05_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail06 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail06_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail07 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail07_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail08 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail08_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail09 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail09_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail10 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail10_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail11 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail11_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail12 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail12_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail13 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail13_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail14 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail14_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail15 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail15_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail16 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail16_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail17 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail17_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail18 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail18_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail19 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail19_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail20 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail20_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail21 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail21_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail22 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail22_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail23 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail23_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail24 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail24_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail25 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail25_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail26 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail26_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail27 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail27_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail28 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail28_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail29 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail29_250px-wide.jpg) -1000px -1000px no-repeat;} #big-thumbnails a#big-thumbnail30 {background: transparent url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/thumbnail30_250px-wide.jpg) -1000px -1000px no-repeat;} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End product portfolio big thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start photo collage text link thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The thumbnails content below is for the photo collage text link thumbnail photos (really just pure text on a colored-- */ /* --background that is then saved as a .jpg file). By using the .jpg file with the text rather than just using text through-- */ /* --HTML, for example, I'm able to guarantee the look and feel of the text font since it is part of the .jpg and avoids those-- */ /* --situations where a website user's computer may not have a particular text font installed on his computer.-- */ #collage-thumbnails li.collage-thumbnail01 {background:#e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/collage-thumbnail01_132px-wide.jpg) no-repeat;} #collage-thumbnails li.collage-thumbnail02 {background:#e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/collage-thumbnail02_132px-wide.jpg) no-repeat;} #collage-thumbnails li.collage-thumbnail03 {background:#e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/collage-thumbnail03_132px-wide.jpg) no-repeat;} #collage-thumbnails li.collage-thumbnail04 {background:#e1d3aa url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/collage-thumbnail04_132px-wide.jpg) no-repeat;} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End photo collage text link thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start right-column/right-side text information to include ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ pricing information. ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The #pricing section servers one purpose and that is to create container so that I can display the pricing chart of-- */ /* --a particular invitation. Rather than type in a complex table-- */ /* --and try to get the formatting for rows, colums, centering, bold text, regular text, etc. correct I decided that it-- */ /* --would be much, much simpler to just create the pricing chart in Adobe Photoshop, save it as a .gif file, and then-- */ /* --display it using CSS and background-image. I only ran into one difficulty, and that is I tried to type the pricing-- */ /* --information over a transparent background and save as either a .png file or a .gif file (both with transparency),-- */ /* --unfortuantely the text looked like crap no matter what I tried. I figured that the transparency would give me great-- */ /* --flexibility if I wanted to use this type of pricing chart on any color background, but no matter what I tried it-- */ /* --looked like crap. In Adobe Photoshop I tried getting rid of the transparency by doing a fill of the light tan-- */ /* --background color (#e1d3aa) and for whatever reason this completely fixed the text and it looked beautiful.-- */ /* --The text now looks great but I will have to manually change the background color of the .gif file should I ever-- */ /* --desire to change the right-side content background color of the webpage to a new color that is not light tan (#e1d3aa).-- */ #pricing { height: 444px; width: 528px; float: left; background-image: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/pricing.gif); background-repeat: no-repeat; background-color: #e1d3aa; padding-top: 25px; padding-bottom: 25px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End right-column/right-side text information that includes ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ pricing information. ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Display cover page graphic for Etiquette and Font/Color guides ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --This section is solely to display the cover page graphics for both the Cristaff Wedding Stationery Guide - Etiquette and */ /* --Planning, as well as the Cristaff Wedding Stationery Style Guide (Font Style and Color Guide).-- */ #image-etiquette-planning-guide { position: relative; margin-left: 0 px; width: 213px; height: 275px; } #image-etiquette-planning-guide li{ list-style-type: none; } #image-font-color-guide { position: relative; margin-left: 0 px; width: 436px; height: 275px; } #image-font-color-guide li{ list-style-type: none; } #image-amazon-logo { position: absolute; left: 300px; top: 200px; width: 114px; height: 45px; } #image-amazon-logo li{ list-style-type: none; } #image-amazon-kindle-logo { position: absolute; left: 300px; top: 275px; width: 131px; height: 45px; } #image-amazon-kindle-logo li{ list-style-type: none; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End display cover page graphic for Etiquette and Font/Color guides ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Display graphics for right-side URL links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --This section is solely to display the right-side URL graphic links. Originally, they were floated left, there was no-- */ /* --padding-right at all, and the width was 140px. However, although IE8 worked fine there were problems with Firefox in that-- */ /* --the mouse could not click on the down arrow in the Invitation Color Palette box for Color Palette (140x96) and other similar-- */ /* --boxes where there was a graphical link in the right channel bar (e.g., Return Address Layout and the Layout Choices graphical-- */ /* --link in the right channel bar). By putting a colored dashed boarder for this div I was able to see the behavior on the screen-- */ /* --and what I discovered is that the left-side of the div actually overlapped the clickable down arrown for Color Palette.-- */ /* --Through trial and error I disovered that that a float right for this div as well as a padding-right of 25px and changing the-- */ /* --size to width 110px put this div perfectly in the right channel space. However, the graphical image that would be placed-- */ /* --inside the div was offset from the sides of the div and so down below in the "list item" code I had to put in a statement of-- */ /* --margin-left for -40px which then pulled the graphical image inline with this div. The final result is that the div and the-- */ /* --image within the div both fit perfectly in the right channel bar and eliminated the problems of covering the clickable down-- */ /* --arrow for Color Palette. I repeated the same approach for the smaller graphical link (i.e., 140x36). However, a new problem-- */ /* --happenend in that the "Layout choices" graphical element fell outside the bounding box and the result was that IE8 and-- */ /* --Firefox handled this differently (IE8 worked fine but Firefox stopped treating the graphical element as an active link. In-- */ /* --order to make both IE8 and Firefox work the same I extended the bounding box for the right channel to a height of 133px and-- */ /* --the information-invitation.php file had enough line breaks placed before the graphic element such that the graphical element-- */ /* --ended up being placed at the bottom of the 133px div, and then I placed the text "Layout choices" (also an active link)-- */ /* --immediately below the graphical element.-- */ #image_right-channel-graphic-link_140x96 { float: right; padding-right: 25px; padding-top: 6px; /* --This puts 6px of padding so that the graphical icon link aligns nicely with content box to its left.--*/ padding-bottom: 19px; /* --This puts 19px of padding so that the active text link sits underneath graphical icon.-- */ margin-left: -15px; /* --The adjusts the graphical link by pulling it to the left.-- */ width: 110px; /* --The width of the graphical links is 110px wide.-- */ height: 96px; /* --The height of the channel for the graphical link is 96px high, and graphic itself is 96px high.-- */ } #image_right-channel-graphic-link_140x96 li{ list-style-type: none; margin-left: -40px; /* --The adjusts the graphical link by pulling it to the left.-- */ } #image_right-channel-graphic-link_140x36 { float: right; padding-right: 25px; padding-top: 6px; /* --This puts 6px of padding so that the graphical icon link aligns nicely with content box to its left.--*/ padding-bottom: 19px; /* --This puts 19px of padding so that the active text link sits underneath graphical icon.-- */ margin-left: -15px; /* --The adjusts the graphical link by pulling it to the left.-- */ width: 110px; /* --The width of the graphical links is 110px wide.-- */ height: 133px; /* --The height of the channel for the graphical link is 133px high, but graphic is only 36px high.-- */ } #image_right-channel-graphic-link_140x36 li{ list-style-type: none; margin-left: -40px; /* --The adjusts the graphical link by pulling it to the left.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End display graphics for right-side URL links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --Copyright 2006, Cristaff(R). All rights reserved.-- */ /* --All code as well as elements related to design including images, color, and layout are copyright of Cristaff(R) and may not-- */ /* --be reproduced.-- */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Body ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --I created a background fill color of black (#000000), but I also built in the flexibity to have a repeating graphic-- */ /* --image that can paint on top of background fill color. The background fill color happens quickly and will compensate for-- */ /* --slow loading webpages that slowly paint the background image, and that is why I try to have both of these colors be close-- */ /* --to each other. In the current implementation I have them set identical, meaning that there is no unique background image-- */ /* --fill that is different from the background color; however, the flexibility is built in for the future.-- */ body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #000000; background-image: url(background-fill-black.gif); background-repeat: repeat; position: absolute; left: 0px; top: 0px; margin: 0; padding: 0; width: 100%; } /* --Setting the font-family for both paragraphs and headings, as well as font-size for paragraph text.-- */ p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; } h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; } span.smallfont { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; } span.smallfont-italic { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-style: italic; } span.italic-text { font-style: italic; } span.customer-review-font { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; line-height: 150%; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Setup container for header at top of webpage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The pageheader is the container for both the graphic header image that has the corporate name and product name as-- */ /* --well as the top horizonal navigation bar. Both the left and right margins are set to auto to force the pageheader to appear-- */ /* --and be centered on the screen. The header is 800px wide and offset from the top of the screen with a margin of 25px.-- */ #pageheader { margin-left: auto; margin-right: auto; margin-top: 25px; width: 800px; } /* --The header is for the opening homepage and contains the graphic header image that has the corporate name and it is-- */ /* --800x151px. The header has a 3px white border on the top as well as left and right sides, and then I use the topnavbar-- */ /* --with the list menu to get the 1px white border between the graphic header and the top horizontal navigation bar because-- */ /* --I prefer a thinner 1px wide dividing line in this location and save the heavier 3px wide border for the outside of the-- */ /* --webpage shape almost like defining a container.-- */ #header-homepage { height: 151px; background-image: url(/images/en/header.png); background-repeat: no-repeat; width: 100%; } /* --The homepage photo collage is the big photo on the the Cristaff homepage. -- */ #homepage-collage { position: relative; padding: 0px; /*--No padding--*/ border: 0px; /*--No border--*/ margin-top: 30px; /*--The top-side of the photo is set 30px from the left-side.--*/ margin-left: 33px; /*--The left-side of the photo is set 33px from the left-side.--*/ width: 550px; /*--width of of photo container I set at 550px. It could go a little bigger without problems. --*/ height: 350px; /*--Height of the photo container is 350px--*/ background: #f5eee6 url(/images/homepage/homepage-photo-collage.jpg) no-repeat; } /* --The header itself contains the graphic header image that has the corporate name and product name and it is-- */ /* --800x151px. The header has a 3px white border on the top as well as left and right sides, and then I use the topnavbar-- */ /* --with the list menu to get the 1px white border between the graphic header and the top horizontal navigation bar because-- */ /* --I prefer a thinner 1px wide dividing line in this location and save the heavier 3px wide border for the outside of the-- */ /* --webpage shape almost like defining a container. This is the header used on each webpage except the Cristaff homepage.-- */ #header { height: 151px; background-image: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/header.png); background-repeat: no-repeat; width: 100%; } /* --This header only applies for the shopping cart web page and has the graphic header image with text "Shopping Cart" and is-- */ /* --800x151px. The header has a 3px white border on the top as well as left and right sides, and then I use the topnavbar-- */ /* --with the list menu to get the 1px white border between the graphic header and the top horizontal navigation bar because-- */ /* --I prefer a thinner 1px wide dividing line in this location and save the heavier 3px wide border for the outside of the-- */ /* --webpage shape almost like defining a container.-- */ #header-shopping-cart { height: 151px; background-image: url(/images/universal-shopping-cart-header.png); background-repeat: no-repeat; width: 100%; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start top horizontal navigation bar ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The next topnavbar section does many things. First, it paints a 800px wide background navbar colored copper with a white-- */ /* --stroke that is 3px wide at each end and 1px wide on top and bottom. This is needed to fix all of the problems that I and-- */ /* --others have had working with Microsoft IE to get the to get proper borders to work. Additionally, since the number of list-- */ /* --items or boxes in the topnavbar do not divide exactly into 800px I essentially put my topnavbar list plus two additional-- */ /* --spacers in the center of the row and this background topnavbar will act as a safety net if the topnavbar does not occupy-- */ /* --all 800px. I determined the pixel width by dividing 800px by 9 boxes or list items (7 items plust 2 spacers), so the pixel-- */ /* --width for each list item is (800/9) = 88.89 = 89. The font size that I use is 10pt bold, and it is aligned to the center.-- */ #topnavbar { position: absolute; top: 176px; /* --The absolute position of topnavbar is set 176px from the top.-- */ padding: 0; /* --No padding for the topnavbar container.-- */ margin: 0; /* --No margin for the topnavbar container.-- */ width: 800px; /* --The width of the topnavbar container is 800px.-- */ height: 35px; /* --The height of the topnavbar container is 35px.-- */ background: url(/images/topnavbar_gray-background-with-white-stroke.gif) no-repeat; border-bottom: 1px solid #ffffff; /* --Paints a 1px white border (#ffffff) at the bottom of topnavbar container.-- */ } #topnavbar ul { padding: 0px; /* --No padding for the unordered list of items container.-- */ margin-left: 84px; /* --In light of 7 list items plus 2 spacer list items, in light of each list items having 89px width-- */ /* --plus a 1px border, through trial and error looking on screen a padding-left of 84px centers the-- */ /* --the topnavbar within the 800p wide container.-- */ margin-top: 0px; /* --Align tops of unordered list items' white border with top of topnavbar container white border.-- */ width: 630px; /* --Width is (89px + 1px border) = 90px * 7 list items = 630px total; used for placing right white border.-- */ height: 35px; /* --Height of the unordered list items is 35px to match the height of the topnvavbar container-- */ list-style-type: none; /* --The list does not have any stylization. -- */ text-align: center; /* --Text is aligned in the center of the list item; aligned from left to right, not top to bottom.-- */ border-right: 1px solid #ffffff; /* -Paints a 1px white border (#ffffff) at the far right of the topnavbar.-- */ } #topnavbar ul li { display: block; /* --Elements displayed as block-level element, with a line break before and after the element. -- */ float: left; /* --Floats the unordered list from the left.-- */ text-align: center; /* --Text is aligned in the center of the list item; aligned from left to right, not top to bottom.-- */ } #topnavbar ul li a{ width: 89px; /* --Each list item is 89px wide.-- */ height: 34px; /* --Each list item is 34px high, which is 1px shorter than the 35px high topnavbar container. This is.-- */ /* --I put a 1px white border on the bottom of the topnavbar container, and if I also set the list item-- */ /* --height at 35px then the dark red background covers the bottom white border, so it's set at 34px.-- */ border-top: 1px solid #ffffff; /* --Paint a 1px white border (#ffffff) at the top of each list item box.-- */ border-left: 1px solid #ffffff; /* --Paint a 1px white border (#ffffff) at the left-side of each list item box.-- */ border-bottom: 1px solid #ffffff; /* --Paint a 1px white border (#ffffff) at the bottom of each list item box.-- */ padding: 0; /* --No padding within a list item.-- */ margin: 0; /* --No margin within a list item.-- */ text-decoration: none; /* --No text decoration for list items.-- */ display: block; /* --Elements displayed as block-level element, with a line break before and after the element. -- */ text-align: center; /* --Text is aligned in the center of the list item; aligned from left to right, not top to bottom.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family for the list item text.-- */ font-size: 10pt; /* --The size of the font for the list item text.-- */ line-height: 34px; /* --The spacing, top and bottom, which sets up the line height; used to center in box top to bottom.-- */ color: #ffffff; /* --The list item text font color is white (#ffffff).-- */ font-weight: bold; /* --The list item font is bolded.-- */ } /* --The next few lines of code put a copper gradient .gif graphic in the box that is either in an active or hover state in-- */ /* --the horizontal navigationtopnavbar.-- */ #topnavbar_active a { background-image: url(/images/topnavbar_dark-gray-box-fill.gif); } #topnavbar ul li a:hover {background: url(/images/topnavbar_dark-gray-box-fill.gif);} /* --The next several lines of code put image of the shopping basket icon as part of top horizontal navigation bar for "Cart."-- */ /* --There are two states; first is the natural unhovered state in light gray, the second state is the hover state in dark gray.-- */ #topnavbar a.basket-icon { background: url(/images/en/shopping-bag/topnavbar-box-shopping-bag-unhovered-en.png); width: 89px; height: 34px; } #topnavbar ul li a.basket-icon:hover { background: url(/images/en/shopping-bag/topnavbar-box-shopping-bag-hovered-en.png); width: 89px; height: 34px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End top horizontal navigation bar ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start photoslideshow for homepage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The sole purposed of this container_photoslideshow section is to center things on the screen. That is, both the left and -- */ /* --right margins are set to auto to force the container_content to appear and be centered on the screen. Container is 800px -- */ /* --wide. This container has no positioning information; positioning information is taken care of in the children containers -- */ /* --of this container. In short, the centering of this container_content section ensures that children containers are also-- */ /* --automatically centered.-- */ #container_photoslideshow { margin-right: auto; margin-left: auto; width: 800px; } /* --The photoslideshow_content section is automatically centered because it is a child of the container_photoslideshow section. -- */ /* --Here we provide the positioning informaiton, and in this case absolute positioning to pixel number 212, so that this -- */ /* --photoslideshow_content container begins immediately after the top horizontal navigation bar. The value of 212 is derived -- */ /* --from following: 25 px offset + 151 px header height + 1 px navbar border + 34 px navbar height + 1 px navbar border = 212. -- */ #photoslideshow_content { width: 800px; height: 600px; position: absolute; top: 212px; } /* --The homepage_content section is automatically centered because it is a child of the container_content section a screen or -- */ /* --two below. Here we provide the positioning informaiton, and in this case absolute positioning to pixel number 812, so that -- */ /* --this main_content container begins immediately after the photo slideshow that itself sits immediately below the top -- */ /* --horizontal navigation bar. The value of 812 is derived from the following: 25 px offset + 151 px header height + 1 px -- */ /* --navbar border + 34 px navbar height + 1 px navbar border + 600 px photo slideshow height = 212. Also, the background image -- */ /* --is 800px wide by 1px high and it is the background color scheme that covers both the left navigation bar as well the -- */ /* --right-side content comprising images, text, and forms. I needed to create this separate container for the purpose of -- */ /* --allowing me to have the background color scheme to track to the longest of either of my two-column layout whether it be -- */ /* --the left-side navigation bar or the right-side content comprising images, text, and forms. The background image with -- */ /* --a repeat-y command paints the background to track or match the longest of the two columns.-- */ #homepage_content { width: 800px; position: absolute; top: 812px; background: url(/images/main-content-frame-background-repeating-graphic.gif) repeat-y; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End photoslideshow for homepage ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Main content comprising left navigation bar and ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ the right-side content of images, text, and forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The sole purposed of this container_content section is to center things on the screen. That is, both the left and right-- */ /* --margins are set to auto to force the container_content to appear and be centered on the screen. Container is 800px wide.-- */ /* --This container has no positioning information; positioning information is taken care of in the children containers of this-- */ /* --container. In short, the centering of this container_content section ensures that children containers are also-- */ /* --automatically centered.-- */ #container_content { margin-right: auto; margin-left: auto; width: 800px; } /* --The main_content section is automatically centered because it is a child of the container_content section. Here we provide-- */ /* --the positioning informaiton, and in this case absolute positioning to pixel number 212, so that this main_content container-- */ /* --begins immediately after the top horizontal navigation bar. The value of 212 is derived from the-- */ /* --following: 25 px offset + 151 px header height + 1 px navbar border + 34 px navbar height + 1 px navbar border = 212. Also,-- */ /* --the background image is 800px wide by 1px high and it is the background color scheme that covers both the left navigation-- */ /* --bar as well the right-side content comprising images, text, and forms. I needed to create this separate container for the-- */ /* --purpose of allowing me to have the background color scheme to track to the longest of either of my two-column layout whether-- */ /* --it be the left-side navigation bar or the right-side content comprising images, text, and forms. The background image with-- */ /* --a repeat-y command paints the background to track or match the longest of the two columns.-- */ #main_content { width: 800px; position: absolute; top: 212px; background: url(/images/main-content-frame-background-repeating-graphic.gif) repeat-y; } /* --This left_nav section creates a container for what will contain the left navigation bar that is 207px wide, including the-- */ /* --padding at both left and right sides (10px left padding + 187px navigation area + 10px right padding = 207px total). I have-- */ /* --added a padding of 10px so that the text of the left navigation bar does not go to close to the edges of the container itself.-- */ /* --I also have a 50px margin at the bottom of the container so that the list menu itself does not come so close to the footer.-- */ #left_nav { float:left; width: 187px; padding: 10px; margin-bottom: 50px; font-family: Arial, Helvetica, sans-serif; /* --I insert text formatting here to apply to left navigation bar menu titles,-- */ /* --such as "SHOP BY CATEGORY." These are part of the left navigation bar and-- */ /* --they are contained within the left-nav container; however, since they are-- */ /* --not part of the formal list item where I would normally keep text formatting-- */ /* --I had to include text formatting here to apply to menu title text.-- */ font-size: 10pt; color: #ffffff; text-align: left; text-decoration: none; font-weight: bold; } /* --This left_nav section indents to a left margin of 2px (this is in additive on top of the padding margin of 10px for the-- */ /* --left_nav container itself); that is, the unorder list is indented 4px from the left-side of the left_nav container.-- */ /* --I have a 50px margin at the top of each unordered list so that there is some space between the top of the left_nav container-- */ /* --and the start of the first unordered list, but it also has the benefit of putting a 50px space between each adjacent-- */ /* --unordered list in the situation where I implement more than one unordered list on the same page (for example, in the left-- */ /* --navigation bar on some webpages I have 3 unordered lists and this puts a 50px space between each unordered list).-- */ #left_nav ul { margin-left: 4px; margin-top: 50px; padding-left: 0; list-style-type: none; } /* --This left_nav section makes sure that the list menu is in block format, that the length is 173px (which was arrived at-- */ /* --through trial and error to be indented from the sides a little bit and a little bit shorter than the full width of the-- */ /* --left-side of the navigation bar), that each of the list menu items has a dark copper background color (also decided through-- */ /* --trial and error, color #a16d2d) that contrasts with the light copper background color of the left-side navigation bar,-- */ /* --and that has a border-bottom line color #c3965f to match the light copper background color of the left-side navigation bar-- */ /* --(also color #c3965f); this results in a dividing line between unordered list menu items but since the line matches the-- */ /* --same color as the background color itself I don't need to worry if Internet Explorer puts an additional diving line-- */ /* --after the last unordered list menu item since it is exactly the same color as the light copper background color, so even if-- */ /* --there is an extra line it doesn't matter since it cannot be seen.-- */ #left_nav a { display: block; padding: 0; width: 173px; border-bottom: 1px solid #c3965f; background-color: #a16d2d; } /* --This part of left_nav sets the list menu items at a font-size of 10pt, a text color that is white, that is aligned on-- */ /* --the left, and that has no decoration for the text (i.e., no underline indicating it is a link but rather plain text).-- */ /* --The 10px left padding creates an indentation of the text of left_nav so that it is not so close to left side of the-- */ /* --borders of the color blocks that surround each unordered list item.-- */ #left_nav a:link, #left_nav-bar a:visited { font-family: Arial, Helvetica, sans-serif; /* --This text formatting applies only to the formal list items and not the-- */ /* --left navigation bar menu titles, such as "SHOP BY CATEGORY."-- */ font-size: 10pt; font-weight: bold; color: #ffffff; text-align: left; text-decoration: none; padding-left: 10px; line-height: 28px; } /* --This next 1-2 line section was created for the sole purpose of being able to change the color of a left_nav-bar menu item-- */ /* --when that item was in the current active webage state (i.e., to highlight to a user that this is a page that he or-- */ /* --she is currently on and browsing. I discovered that I had to do this active state very different from the way that I-- */ /* --did it for the topnavbar because the left navigation bar has a background color set to #c3965f (copper) that was a higher-- */ /*-- specificity or a higher priority and would always override the active state background image of dark copper (#696a6c)-- */ /*-- that I wanted to paint on the screen. I looked at the "Listmatic" webpage under the CSS "Vertical Lists" and found a-- */ /*-- an example called "ProjectSeven's Uberlist" where I learned how to take a label assign it to a particular list item-- */ /*-- and then to use the CSS code to load a background image that would apply to only that particular list item (which in-- */ /*-- this case would apply to my active current webpage and corresponding list item on the left_nav-bar). I could not-- */ /*-- use the "ProjectSeven's Uberlist" directly because I didn't want to affect unvisited webpages(i.e., "link") , hover-- */ /*-- webpages (i.e., "hover"), or visited webpages (i.e., "visited"). I only wanted to affect the active current-- */ /*-- webpage. Additionally, I could not use the label "active" to be assigned to the list item on the left_nav-bar because-- */ /*-- I had used this label name in the topnavbar section and some other places in my code and if I used it for the-- */ /*-- left_nav-bar when I modified color and background for the left_nav-bar section it ended up messing up all of the other-- */ /*-- part of the screen that used the label "active," so instead I used the label "left_nav-bar_active."-- */ #left_nav-bar_active a { background-image: url(/images/leftnavbar_dark-gray-box-fill.gif); } /* --The code below puts a dark gray (#696a6c) .gif graphic in the box that is either in an active or hover state-- */ /* --in the left navigation bar.-- */ #left_nav a:hover {background: url(/images/leftnavbar_dark-gray-box-fill.gif);} /* --This right_content section creates a container for what will contain the right-side content comprising images, text, and-- */ /* --forms. Again, I have put a padding of 10px so that none of the content in this container does not go close to the edges-- */ /* --of the container itself. I found the 569px width through trial and error because anything larger than this forced-- */ /* --right_content to apparently hit the edge of its parent container (i.e., main_content) and therefore force it go get pushed-- */ /* --underneath left_nav.-- */ #right_content { width: 587px; padding: 0; float: left; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start right-side photo image content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- Begin right-side photo image content that includes a single row of little product preview photos--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /* --For preview of first big photo on the screen see separate CSS file in the local directory not the top-level directory.-- */ /* --This section lays out the little photo preview section. It is floated left and has a width of 520px determined by a-- */ /* --left 3px little photo border + 95px wide little photo + right 3px little photo border + 3px spacer between little-- */ /* --photos = 104px total per little photo, and this is multiplied times 5 little preview photos = 104px * 5 = 520px total.-- */ /* --The height is determined by a 3px little photo top margin + 71px little photo height + 3px bottom margin = 77px total.-- */ /* --The left margin is set so that the little preview photos are mostly centered underneath the big photo (although it is-- */ /* --not perfectly centered), and since Microsoft Internet Explorer ver. 6 doubles the value of a margin pixel amount (e.g., 17px-- */ /* --becomes 34px in Microsoft IE6) and Microsoft IE7 does not double the value of a margin pixel amount I had to try a-- */ /* --different way to indent the left-side of the little photo preview section. I discovered that Microsoft IE6 and IE7 both-- */ /* --take pixel values for padding at its face value and do not double anything; as a result of this common usage across both-- */ /* --IE6 and IE7 I used padding-left to indent 34px rather than using margin-left. Finally, setting the list-style-type to-- */ /* --none removes any menu list bullets for the unordered list and setting padding to zero removes any indentation.-- */ #images ul { float: left; width: 520px; height: 77px; /* --Height is set by 3px little photo top margin + 71px little photo height + 3px bottom margin = 77px total.-- */ padding-left: 34px; /* --Indents the little photo preview section 34px from the left-side of the container.-- */ margin-left: 0; /* --Use padding-left: 34px above for left indention to ensure same application across IE6 and IE7.-- */ list-style-type: none; } /* --A float left for the list items will put the little preview photos inline.-- */ #images li { float: left; } /* --Serves to preload the image gallery and does so in a way that sort of hides the images by limiting both the width and height-- */ /* --to 1px each. It loads each image on top of each other. Per the article, How to Create a Photographic Gallery Using CSS, I-- */ /* --set the top and left pixel destination to -4000px each so that this single pixel dot would be off of the visible screen.-- */ /* --In the article they use both top and left pixel position set to a positive value of 5px so that it could be seeen visibly-- */ /* --if one were to look really, really close, but I wanted it to be off of the screen and completely not visible, and the-- */ /* --absolute positioning with a top location of -4000px and a left location of -4000px makes this go off of the screen. Per-- */ /* --the article, How to Create a Photographic Gallery Using CSS,the span overflow is set to hidden to make sure that the rest-- */ /* --of the image and any associated text is not displayed.-- */ #images a.gallery span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } /* --This section sets the gallery list of small preview photos in its normal state and visited state so that they look the-- */ /* --same, or in other words so that the visited state does not have a unique color from the normal state. In case I want-- */ /* --to use text associated with the photo images in the future I have set the text color to black (#000000) and I have-- */ /* --set text decoration to none so that any text does not indicate any particular state such as visited. The display is-- */ /* --set to block so that the elements will be displayed as a block-level element with a line break before and after the-- */ /* --element; this is taken from the article How to Create a Photographic Gallery Using CSS (I tried using an inline-- */ /* --display since the little preview photos are essentially inline, but it broke things. Separately, I have put a 3px-- */ /* --dark gray border around all edges of the little preview photos that matches the dark gray color used elsewhere in the-- */ /* --website. I have also added a 3px margin spacer that put a 3px space between each of the little preview photos, and one-- */ /* --must not forget that the little preview photo on the far right will also have this 3px space on its right-side as-- */ /* --well, but in this situation it is invisibe to the naked eyes so I don't need to worry about it in this particular-- */ /* --case like I did need to work for the navigation bars. Separately, the little preview photos are offset from the top-- */ /* --of the container so that they sit below the big photo, and so that they sit below with a 30px spacer, and this is-- */ /* --achieved by setting the top margin to 456px. The value of 456px is achieved by adding up the 30px spacer or margin-- */ /* --above the big photo plus the 396px heighth of the big photo itself plus a 30px spacer or margin underneath the big-- */ /* --photo. This results in 30px + 396px + 30px = 456px.-- */ #images a.gallery, #images a.gallery:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 440px; } /* --This sets or changes the color of the border surround the little preview photos to white (#ffffff) when the mouse-- */ /* --hovers over the top of the little photo previews. In short, it changes the border from dark gray (#696a6c) to-- */ /* --white (#ffffff).-- */ #images a.gallery:hover { border: 3px solid #ffffff; } /* --This section sets the width and height of the big photos as well as absolutely positions the location of the big-- */ /* --photos. The big photos will have a width of 572px and a height of 429px, and it will be positioned 8px from the-- */ /* --top of the container and 8px from the left-side of the container. This space will have a background color that-- */ /* --matches the light tan color background (#e1d3aa) of the right-side that contains the images, text, and-- */ /* --forms . For future use text color has been to black (#000000).-- */ #images a.gallery:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- End right-side photo image content that includes a single row of little product preview photos --*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- Begin right-side photo image content that includes two rows of little product preview photos --*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ #images_two-rows ul { float: left; width: 520px; height: 77px; /* --Height is set by 3px little photo top margin + 71px little photo height + 3px bottom margin = 77px total.-- */ padding-left: 34px; /* --Indents the little photo preview section 34px from the left-side of the container.-- */ margin-left: 0; /* --Use padding-left: 34px above for left indention to ensure same application across IE6 and IE7.-- */ list-style-type: none; } /* --A float left for the list items will put the little preview photos inline.-- */ #images_two-rows li { float: left; } /* --Serves to preload the image gallery and does so in a way that sort of hides the images by limiting both the width and height-- */ /* --to 1px each. It loads each image on top of each other. Per the article, How to Create a Photographic Gallery Using CSS, I-- */ /* --set the top and left pixel destination to -4000px each so that this single pixel dot would be off of the visible screen.-- */ /* --In the article they use both top and left pixel position set to a positive value of 5px so that it could be seeen visibly-- */ /* --if one were to look really, really close, but I wanted it to be off of the screen and completely not visible, and the-- */ /* --absolute positioning with a top location of -4000px and a left location of -4000px makes this go off of the screen. Per-- */ /* --the article, How to Create a Photographic Gallery Using CSS,the span overflow is set to hidden to make sure that the rest-- */ /* --of the image and any associated text is not displayed.-- */ #images_two-rows a.gallery span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } /* --This section sets the gallery list of small preview photos in its normal state and visited state so that they look the-- */ /* --same, or in other words so that the visited state does not have a unique color from the normal state. In case I want-- */ /* --to use text associated with the photo images in the future I have set the text color to black (#000000) and I have-- */ /* --set text decoration to none so that any text does not indicate any particular state such as visited. The display is-- */ /* --set to block so that the elements will be displayed as a block-level element with a line break before and after the-- */ /* --element; this is taken from the article How to Create a Photographic Gallery Using CSS (I tried using an inline-- */ /* --display since the little preview photos are essentially inline, but it broke things. Separately, I have put a 3px-- */ /* --dark gray border around all edges of the little preview photos that matches the dark gray color used elsewhere in the-- */ /* --website. I have also added a 3px margin spacer that put a 3px space between each of the little preview photos, and one-- */ /* --must not forget that the little preview photo on the far right will also have this 3px space on its right-side as-- */ /* --well, but in this situation it is invisibe to the naked eyes so I don't need to worry about it in this particular-- */ /* --case like I did need to work for the navigation bars. Separately, the little preview photos are offset from the top-- */ /* --of the container so that they sit below the big photo, and so that they sit below with a 30px spacer, and this is-- */ /* --achieved by setting the top margin to 456px. The value of 456px is achieved by adding up the 30px spacer or margin-- */ /* --above the big photo plus the 396px heighth of the big photo itself plus a 30px spacer or margin underneath the big-- */ /* --photo. This results in 30px + 396px + 30px = 456px.-- */ #images_two-rows a.gallery, #images_two-rows a.gallery:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 440px; } /* --This sets or changes the color of the border surround the little preview photos to white (#ffffff) when the mouse-- */ /* --hovers over the top of the little photo previews. In short, it changes the border from dark gray (#696a6c) to-- */ /* --white (#ffffff).-- */ #images_two-rows a.gallery:hover { border: 3px solid #ffffff; } /* --This section sets the width and height of the big photos as well as absolutely positions the location of the big-- */ /* --photos. The big photos will have a width of 572px and a height of 429px, and it will be positioned 8px from the-- */ /* --top of the container and 8px from the left-side of the container. This space will have a background color that-- */ /* --matches the light tan color background (#e1d3aa) of the right-side that contains the images, text, and-- */ /* --forms . For future use text color has been to black (#000000).-- */ #images_two-rows a.gallery:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- *****************************************************--*/ /*-- Begin second row of little product preview photos --*/ /*-- *****************************************************--*/ #images_two-rows a.gallery2 span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } #images_two-rows a.gallery2, #images_two-rows a.gallery2:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 15px; /*-- This is margin space between first row of little product preview photos and the second row --*/ /*-- of little product preview photos. --*/ } #images_two-rows a.gallery2:hover { border: 3px solid #ffffff; } #images_two-rows a.gallery2:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- ***************************************************--*/ /*-- End second row of little product preview photos --*/ /*-- ***************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- End right-side photo image content that includes two rows of little product preview photos --*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- Begin right-side photo image content that includes three rows of little product preview photos --*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ #images_three-rows ul { float: left; width: 520px; height: 77px; /* --Height is set by 3px little photo top margin + 71px little photo height + 3px bottom margin = 77px total.-- */ padding-left: 34px; /* --Indents the little photo preview section 34px from the left-side of the container.-- */ margin-left: 0; /* --Use padding-left: 34px above for left indention to ensure same application across IE6 and IE7.-- */ list-style-type: none; } /* --A float left for the list items will put the little preview photos inline.-- */ #images_three-rows li { float: left; } /* --Serves to preload the image gallery and does so in a way that sort of hides the images by limiting both the width and height-- */ /* --to 1px each. It loads each image on top of each other. Per the article, How to Create a Photographic Gallery Using CSS, I-- */ /* --set the top and left pixel destination to -4000px each so that this single pixel dot would be off of the visible screen.-- */ /* --In the article they use both top and left pixel position set to a positive value of 5px so that it could be seeen visibly-- */ /* --if one were to look really, really close, but I wanted it to be off of the screen and completely not visible, and the-- */ /* --absolute positioning with a top location of -4000px and a left location of -4000px makes this go off of the screen. Per-- */ /* --the article, How to Create a Photographic Gallery Using CSS,the span overflow is set to hidden to make sure that the rest-- */ /* --of the image and any associated text is not displayed.-- */ #images_three-rows a.gallery span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } /* --This section sets the gallery list of small preview photos in its normal state and visited state so that they look the-- */ /* --same, or in other words so that the visited state does not have a unique color from the normal state. In case I want-- */ /* --to use text associated with the photo images in the future I have set the text color to black (#000000) and I have-- */ /* --set text decoration to none so that any text does not indicate any particular state such as visited. The display is-- */ /* --set to block so that the elements will be displayed as a block-level element with a line break before and after the-- */ /* --element; this is taken from the article How to Create a Photographic Gallery Using CSS (I tried using an inline-- */ /* --display since the little preview photos are essentially inline, but it broke things. Separately, I have put a 3px-- */ /* --dark red border around all edges of the little preview photos that matches the dark gray color used elsewhere on the-- */ /* --website. I have also added a 3px margin spacer that put a 3px space between each of the little preview photos, and one-- */ /* --must not forget that the little preview photo on the far right will also have this 3px space on its right-side as-- */ /* --well, but in this situation it is invisibe to the naked eyes so I don't need to worry about it in this particular-- */ /* --case like I did need to work for the navigation bars. Separately, the little preview photos are offset from the top-- */ /* --of the container so that they sit below the big photo, and so that they sit below with a 30px spacer, and this is-- */ /* --achieved by setting the top margin to 456px. The value of 456px is achieved by adding up the 30px spacer or margin-- */ /* --above the big photo plus the 396px heighth of the big photo itself plus a 30px spacer or margin underneath the big-- */ /* --photo. This results in 30px + 396px + 30px = 456px.-- */ #images_three-rows a.gallery, #images_three-rows a.gallery:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 440px; } /* --This sets or changes the color of the border surround the little preview photos to white (#ffffff) when the mouse-- */ /* --hovers over the top of the little photo previews. In short, it changes the border from dark red (#696a6c) to-- */ /* --white (#ffffff).-- */ #images_three-rows a.gallery:hover { border: 3px solid #ffffff; } /* --This section sets the width and height of the big photos as well as absolutely positions the location of the big-- */ /* --photos. The big photos will have a width of 572px and a height of 429px, and it will be positioned 8px from the-- */ /* --top of the container and 8px from the left-side of the container. This space will have a background color that-- */ /* --matches the light tan color background (#e1d3aa) of the right-side that contains the images, text, and-- */ /* --forms . For future use text color has been to black (#000000).-- */ #images_three-rows a.gallery:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- *****************************************************--*/ /*-- Begin second row of little product preview photos --*/ /*-- *****************************************************--*/ #images_three-rows a.gallery2 span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } #images_three-rows a.gallery2, #images_three-rows a.gallery2:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 15px; /*-- This is margin space between first row of little product preview photos and the second row --*/ /*-- of little product preview photos. --*/ } #images_three-rows a.gallery2:hover { border: 3px solid #ffffff; } #images_three-rows a.gallery2:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- ***************************************************--*/ /*-- End second row of little product preview photos --*/ /*-- ***************************************************--*/ /*-- *****************************************************--*/ /*-- Begin third row of little product preview photos --*/ /*-- *****************************************************--*/ #images_three-rows a.gallery3 span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } #images_three-rows a.gallery3, #images_three-rows a.gallery3:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 15px; /*-- This is margin space between first row of little product preview photos and the second row --*/ /*-- of little product preview photos. --*/ } #images_three-rows a.gallery3:hover { border: 3px solid #ffffff; } #images_three-rows a.gallery3:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- ***************************************************--*/ /*-- End third row of little product preview photos --*/ /*-- ***************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- End right-side photo image content that includes three rows of little product preview photos --*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- Begin right-side photo image content that includes four rows of little product preview photos --*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ #images_four-rows ul { float: left; width: 520px; height: 77px; /* --Height is set by 3px little photo top margin + 71px little photo height + 3px bottom margin = 77px total.-- */ padding-left: 34px; /* --Indents the little photo preview section 34px from the left-side of the container.-- */ margin-left: 0; /* --Use padding-left: 34px above for left indention to ensure same application across IE6 and IE7.-- */ list-style-type: none; } /* --A float left for the list items will put the little preview photos inline.-- */ #images_four-rows li { float: left; } /* --Serves to preload the image gallery and does so in a way that sort of hides the images by limiting both the width and height-- */ /* --to 1px each. It loads each image on top of each other. Per the article, How to Create a Photographic Gallery Using CSS, I-- */ /* --set the top and left pixel destination to -4000px each so that this single pixel dot would be off of the visible screen.-- */ /* --In the article they use both top and left pixel position set to a positive value of 5px so that it could be seeen visibly-- */ /* --if one were to look really, really close, but I wanted it to be off of the screen and completely not visible, and the-- */ /* --absolute positioning with a top location of -4000px and a left location of -4000px makes this go off of the screen. Per-- */ /* --the article, How to Create a Photographic Gallery Using CSS,the span overflow is set to hidden to make sure that the rest-- */ /* --of the image and any associated text is not displayed.-- */ #images_four-rows a.gallery span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } /* --This section sets the gallery list of small preview photos in its normal state and visited state so that they look the-- */ /* --same, or in other words so that the visited state does not have a unique color from the normal state. In case I want-- */ /* --to use text associated with the photo images in the future I have set the text color to black (#000000) and I have-- */ /* --set text decoration to none so that any text does not indicate any particular state such as visited. The display is-- */ /* --set to block so that the elements will be displayed as a block-level element with a line break before and after the-- */ /* --element; this is taken from the article How to Create a Photographic Gallery Using CSS (I tried using an inline-- */ /* --display since the little preview photos are essentially inline, but it broke things. Separately, I have put a 3px-- */ /* --dark red border around all edges of the little preview photos that matches the dark gray color used elsewhere on the-- */ /* --website. I have also added a 3px margin spacer that put a 3px space between each of the little preview photos, and one-- */ /* --must not forget that the little preview photo on the far right will also have this 3px space on its right-side as-- */ /* --well, but in this situation it is invisibe to the naked eyes so I don't need to worry about it in this particular-- */ /* --case like I did need to work for the navigation bars. Separately, the little preview photos are offset from the top-- */ /* --of the container so that they sit below the big photo, and so that they sit below with a 30px spacer, and this is-- */ /* --achieved by setting the top margin to 456px. The value of 456px is achieved by adding up the 30px spacer or margin-- */ /* --above the big photo plus the 396px heighth of the big photo itself plus a 30px spacer or margin underneath the big-- */ /* --photo. This results in 30px + 396px + 30px = 456px.-- */ #images_four-rows a.gallery, #images_four-rows a.gallery:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 440px; } /* --This sets or changes the color of the border surround the little preview photos to white (#ffffff) when the mouse-- */ /* --hovers over the top of the little photo previews. In short, it changes the border from dark red (#696a6c) to-- */ /* --white (#ffffff).-- */ #images_four-rows a.gallery:hover { border: 3px solid #ffffff; } /* --This section sets the width and height of the big photos as well as absolutely positions the location of the big-- */ /* --photos. The big photos will have a width of 572px and a height of 429px, and it will be positioned 8px from the-- */ /* --top of the container and 8px from the left-side of the container. This space will have a background color that-- */ /* --matches the light tan color background (#e1d3aa) of the right-side that contains the images, text, and-- */ /* --forms . For future use text color has been to black (#000000).-- */ #images_four-rows a.gallery:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- *****************************************************--*/ /*-- Begin second row of little product preview photos --*/ /*-- *****************************************************--*/ #images_four-rows a.gallery2 span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } #images_four-rows a.gallery2, #images_four-rows a.gallery2:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 15px; /*-- This is margin space between first row of little product preview photos and the second row --*/ /*-- of little product preview photos. --*/ } #images_four-rows a.gallery2:hover { border: 3px solid #ffffff; } #images_four-rows a.gallery2:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- ***************************************************--*/ /*-- End second row of little product preview photos --*/ /*-- ***************************************************--*/ /*-- *****************************************************--*/ /*-- Begin third row of little product preview photos --*/ /*-- *****************************************************--*/ #images_four-rows a.gallery3 span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } #images_four-rows a.gallery3, #images_four-rows a.gallery3:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 15px; /*-- This is margin space between first row of little product preview photos and the second row --*/ /*-- of little product preview photos. --*/ } #images_four-rows a.gallery3:hover { border: 3px solid #ffffff; } #images_four-rows a.gallery3:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- ***************************************************--*/ /*-- End third row of little product preview photos --*/ /*-- ***************************************************--*/ /*-- *****************************************************--*/ /*-- Begin fourth row of little product preview photos --*/ /*-- *****************************************************--*/ #images_four-rows a.gallery4 span { position: absolute; width: 1px; height: 1px; top: -4000px; left: -4000px; overflow: hidden; } #images_four-rows a.gallery4, #images_four-rows a.gallery4:visited { display: block; color: #000000; text-decoration: none; border: 3px solid #696a6c; margin: 0 3px 0 0; text-align: left; cursor: default; margin-top: 15px; /*-- This is margin space between first row of little product preview photos and the second row --*/ /*-- of little product preview photos. --*/ } #images_four-rows a.gallery4:hover { border: 3px solid #ffffff; } #images_four-rows a.gallery4:hover span { position: absolute; width: 572px; height: 429px; top: 8px; left: 8px; color: #000000; background-color: #e1d3aa; } /*-- ***************************************************--*/ /*-- End fourth row of little product preview photos --*/ /*-- ***************************************************--*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /*-- End right-side photo image content that includes four rows of little product preview photos --*/ /*-- ************************************************************************************************--*/ /*-- ************************************************************************************************--*/ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End right-side photo image content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --This next section serves to add each of the little preview photos separately. In this case my little preview-- */ /* --photos are 95px wide and 71px high (does not account for the 3px borders that I use).-- */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start little preview photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --For all code related to the small preview photos see separate CSS file.-- */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End little preview photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start small thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The thumbnails container is for all of the product and collection thumbnail photos.-- */ #thumbnails { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ } #thumbnails ul { margin-left: 31px; /* --Creates a 31px left margin for space padding on the left-side of the thumbnail photos.-- */ margin-top: 30px; /* --Creates a 30px top margin for space padding on the top of the thumbnail photos.-- */ padding: 0 0 30px 0; /* --Creates extra space between the last thumbnail row of images and the start of the footer graphic.-- */ /* --Whether the space was 1px or 80px (I chose 30px) made no difference and I don't understand why so-- */ /* --I just decided to keep it at 30px.-- */ list-style-type: none; /* --No graphic bullets or markers for each list item since I have set list-style-type to none.-- */ } #thumbnails li { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ float: left; /* --Using float:left ensures that there is no gap between each list item so I can accurately control spacing.-- */ margin-right: 16px; /* --This creates the spacing between list items by putting a 16px spacer between adjacent list items.-- */ margin-bottom: 30px; /* --This creates spacing between adjacent rows of list items should the list rollover to another row.-- */ width: 160px; /* --The width of each list item is 160px wide based upon each thumbnail image being 160px wide.-- */ height: 148px; /* --Height of list item is 148px high based on thumbnail image 107px high + 41px bottom dark gray border for white text.-- */ border-left: 3px solid #696a6c; /* --I create a 3px border on the left-side of the thumbnail in dark gray color (#696a6c).-- */ border-top: 3px solid #696a6c; /* --I create a 3px border on the top-side of the thumbnail in dark gray color (#696a6c).-- */ border-right: 3px solid #696a6c; /* --I create a 3px border on the right-side of the thumbnail in dark gray color (#696a6c).-- */ } #thumbnails a { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ width: 160px; /* --The width of each list item is 160px wide based upon each thumbnail image being 160px wide.-- */ padding-top: 107px; /* --This sets the distance from the top of each thumbnail where the text description will begin.*/ color: #000000; line-height: 16pt; /* --Setting the line height lets me control the spacing underneath the thumnail image text and how-- */ /* --tall the color box or band (in my case dark red) is where the thumbnail image text will fit. I got-- */ /* --to 16pt through trial and error by watching the screen.-- */ text-decoration: none; /* --No text decoration means just plain text.-- */ text-align: center; /* --The thumbnail image text will be centered underneath the thumnail image.-- */ text-transform: uppercase; /* --The thumbnail image text will always be uppercase.-- */ color: #ffffff; /* --The thumbnail image text will be color white (#ffffff).-- */ font-size: 10pt; /* --The thumbnail image text will be size 10pt.-- */ font-weight: bold; /* --The thumbnail image text will be bolded.-- */ } /* --This straightforward link style moves the background images to the top left of each link. The z-index is needed to make-- */ /* --sure that the link background is displayed on top of the list background. Without it older versions of Internet Explorer-- */ /* --will not display the hover image. The color of the text upon its hover state is set for a light copper color (#c3965f).-- */ #thumbnails a#thumbnail01:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail02:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail03:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail04:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail05:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail06:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail07:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail08:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail09:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail10:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail11:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail12:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail13:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail14:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail15:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail16:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail17:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail18:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail19:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail20:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail21:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail22:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail23:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail24:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail25:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail26:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail27:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail28:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail29:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail30:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail31:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail32:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail33:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail34:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail35:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail36:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail37:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail38:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail39:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail40:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail41:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail42:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail43:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail44:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail45:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail46:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail47:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail48:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail49:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail50:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail51:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail52:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail53:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail54:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail55:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail56:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail57:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail58:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail59:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail60:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail61:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail62:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail63:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail64:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail65:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail66:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail67:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail68:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail69:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail70:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail71:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail72:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail73:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail74:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail75:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail76:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail77:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail78:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail79:hover {background-position: top left; z-index: 50; color: #c3965f;} #thumbnails a#thumbnail80:hover {background-position: top left; z-index: 50; color: #c3965f;} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End small thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start product portfolio big thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The thumbnails container is for all of the product and collection thumbnail photos.-- */ #big-thumbnails { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ } #big-thumbnails ul { margin-left: 32px; /* --Creates a 32px left margin for space padding on the left-side of the thumbnail photos.-- */ margin-top: 30px; /* --Creates a 30px top margin for space padding on the top of the thumbnail photos.-- */ padding: 0 0 30px 0; /* --Creates extra space between the last thumbnail row of images and the start of the footer graphic.-- */ /* --Whether the space was 1px or 80px (I chose 30px) made no difference and I don't understand why so-- */ /* --I just decided to keep it at 30px.-- */ list-style-type: none; /* --No graphic bullets or markers for each list item since I have set list-style-type to none.-- */ } #big-thumbnails li { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ float: left; /* --Using float:left ensures that there is no gap between each list item so I can accurately control spacing.-- */ margin-right: 16px; /* --This creates the spacing between list items by putting a 23px spacer between adjacent list items.-- */ margin-bottom: 30px; /* --This creates spacing between adjacent rows of list items should the list rollover to another row.-- */ width: 250px; /* --The width of each list item is 250px wide based upon each thumbnail image being 250px wide.-- */ height: 242px; /* --Height of list item is 242px high based on thumbnail image 220px high + 22px bottom dark red border for white text.-- */ border-left: 3px solid #696a6c; /* --I create a 3px border on the left-side of the thumbnail in dark gray color (#696a6c).-- */ border-top: 3px solid #696a6c; /* --I create a 3px border on the top-side of the thumbnail in dark gray color (#696a6c).-- */ border-right: 3px solid #696a6c; /* --I create a 3px border on the right-side of the thumbnail in dark gray color (#696a6c).-- */ } #big-thumbnails a { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ width: 250px; /* --The width of each list item is 250px wide based upon each thumbnail image being 250px wide.-- */ padding-top: 220px; /* --This sets the distance from the top of each thumbnail where the text description will begin.*/ color: #000000; line-height: 22px; /* --Setting the line height lets me control the spacing underneath the thumnail image text and how-- */ /* --tall the color box or band (in my case dark red) is where the thumbnail image text will fit. I got-- */ /* --to 22px through trial and error by watching the screen.-- */ text-decoration: none; /* --No text decoration means just plain text.-- */ text-align: center; /* --The thumbnail image text will be centered underneath the thumnail image.-- */ text-transform: uppercase; /* --The thumbnail image text will always be uppercase.-- */ color: #ffffff; /* --The thumbnail image text will be color white (#ffffff).-- */ font-size: 10pt; /* --The thumbnail image text will be size 10pt.-- */ font-weight: bold; /* --The thumbnail image text will be bolded.-- */ } /* --This straightforward link style moves the background images to the top left of each link. The z-index is needed to make-- */ /* --sure that the link background is displayed on top of the list background. Without it older versions of Internet Explorer-- */ /* --will not display the hover image. The color of the text upon its hover state is set for a light copper color (#c3965f).-- */ /* --Currently only using #01 through #05 for Weddings, Seasonal Greetings, Social Events, Personalized Stationery, and -- */ /* --Gift Certificate. The remaining numbers (#06 through #11) are there for future growth and are not being used today.-- */ #big-thumbnails a#big-thumbnail01:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail02:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail03:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail04:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail05:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail06:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail07:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail08:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail09:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail10:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail11:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail12:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail13:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail14:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail15:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail16:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail17:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail18:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail19:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail20:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail21:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail22:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail23:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail24:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail25:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail26:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail27:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail28:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail29:hover {background-position: top left; z-index: 50; color: #c3965f;} #big-thumbnails a#big-thumbnail30:hover {background-position: top left; z-index: 50; color: #c3965f;} /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End product portfolio big thumbnail image photos ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start photo collage text link top-page thumbnail content ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The collage-thumbnails container is for the photo collage text link thumbnail photos (really just pure text on a colored-- */ /* --background that is then saved as a .jpg file). By using the .jpg file with the text rather than just using text through-- */ /* --HTML, for example, I'm able to guarantee the look and feel of the text font since it is part of the .jpg and avoids those-- */ /* --situations where a website user's computer may not have a particular text font installed on his computer.-- */ #collage-thumbnails { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ height: 105px; /* --The thumbnail images have a height of 65px, plus I put a 10px dark brown border (#836C3F), and then I-- */ /* --put in an additional 30px spacer so that anything that might be placed underneath the photo collage-- */ /* --has some distance separation and therefore this bottom area of the collage is not crowded.-- */ } #collage-thumbnails ul { padding: 0px; /*--No padding--*/ margin: 0px; /*--No margin--*/ margin-left: 33px; /* --I begin the unordered list of items indented 33px from the left-side of the container so that it-- */ /* --algins with the big collage photo that is placed above the photo collage text link thumbnails.-- */ list-style-type: none; /* --No graphic bullets or markers for each list item since I have set list-style-type to none.-- */ } #collage-thumbnails ul li { display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ float: left; /* --Using float:left ensures that there is no gap between each list item so I can accurately control spacing.-- */ } #collage-thumbnails li a{ display: block; /* --Thumbnail elements will be displayed as block-level elements with line break before and after elements.-- */ margin-right: 0; /* --This ensures no spacing between list items by putting a 0px spacer between adjacent list items.-- */ margin-bottom: 30px; /* --This creates spacing between adjacent rows of list items should the list rollover to another row.-- */ width: 132px; /* --The width of each list item is 132px wide based upon each thumbnail image being 132px wide.-- */ height: 65px; /* --The thumbnail images have a height of 65px. This line is needed to display full 65px height boxes.-- */ border-bottom: 10px solid #836C3F; /* --I create a 10px border on the bottom of the thumbnail in dark brown (#836C3F).-- */ } #collage-thumbnails ul li a:hover { border-bottom: 10px solid #696a6c;/* --Create 10px border on mouseover on the bottom of the thumbnail in dark gray (#696a6c).-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End photo collage text link top-page thumbnail content ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Start right-column/right-side text information ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (contains header and text information for "Invitation Description," ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ header and text information for "Invitation Information," header ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ and .gif graphic for "Pricing Information," and header only for ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ "Order Selection" (content for "Order Selection" is in a separate ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ container devoted solely for form data entry information). ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The text container is floated left and has a relative position that is indented or offset 30px from the left side of the-- */ /* --container and has a width of 528px.-- */ #text { float: left; position: relative; width: 528px; left: 30px; background-color: #e1d3aa; } /* --Text that uses h1 is 12pt bolded with a top and bottom padding spacer of 2px. To create a clean separation between-- */ /* --different sections of paragraph text on the right-side content I use a gradient dark gray to light tan background graphic-- */ /* --that really helps the human eye to cleanly create and divide the different sections of paragraph text. The gradient-- */ /* --of the background-image starts at color #696a6c and merges into color #e1d3aa at the far right or end of the graphic.-- */ /* --The text is color white (#ffffff) so that there is big contrast with the dark gray (#696a6c) background-image graphic.-- */ /* --I've also indented the text 10px from the left so that the start of both the white text and dark red background-image-- */ /* --are not on top of each other. It is designed so that the dark red background-image is seen first on the screen and then-- */ /* --10px later the white text begins.-- */ #text h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; line-height: 23px; /* --I set the line height equal to the height of the gray box background-image at 23px.-- */ color: #ffffff; text-align: left; padding-left: 10px; padding-right: 0px; margin-top: 20px; background-image: url(/images/body-copy-title-bar-gradient.gif); } /* --Text that uses the paragraph p tag is 10pt bolded in color black (#000000) and justified. I've also started it from the-- */ /* --left indented 10px so that the paragraph text is indented from the content subject headings (such as Invitation-- */ /* --Description, Invitation Details, Pricing Information, etc.) and so that the paragraph text does not start at far left-- */ /* --in what would be the same pixel location on the x-axis as the content subject headings.-- */ #text p { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; padding-left: 10px; text-align: justify; } /* --Text for the error messages when a customer makes an improper selection.-- */ #error-message-text { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; /* --I want the error message to stand out in bold red text.-- */ line-height: 150%; /* --Easier to read with line height at 150% of current font size to put buffer space between sentences.-- */ color: #cb0044; /* --Red color text for error messages.-- */ padding-left: 10px; text-align: justify; } /* --Text that uses the paragraph p tag is 10pt bolded in color black (#000000) and justified. I've also started it from the-- */ /* --left indented 10px so that the paragraph text is indented from the content subject headings (such as Invitation-- */ /* --Description, Invitation Details, Pricing Information, etc.) and so that the paragraph text does not start at far left-- */ /* --in what would be the same pixel location on the x-axis as the content subject headings.-- */ #smalltext p { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000; margin-top: 0px; /* -- By adding margin-top=0px I pulled caption sentences describing photos closer to the photos. -- */ padding-left: 40px; padding-right: 40px; text-align: justify; } /* --This is the format for breadcrumb trail text.-- */ #breadcrumbtext p { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #696a6c; padding-top: 5px; padding-left: 10px; text-align: left; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start Zoom Photo List ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --This section formats the list of zoom photo links and puts them indented 20px from the left side of the div container. -- */ #zoom-photo-list li { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; display: block; list-style-type: none; text-align: left; margin-left: 20px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End Zoom Photo List ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start Invitation area ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --I set up invitation-information container so that I could list Invitation Information in a bulleted list format.-- */ /* --Since I want to indent the text 10px from the left side and I want the behavior to be consistent with IE6 and IE7-- */ /* --I have set padding-left at 10px which will result in a 10px left indent spacing (and then total is-- */ /* --518px + 10px = 528px. I tried again and again to get "list-style-type: disc" to work so that-- */ /* --each line of text in the Invitation Information section had a bullet at the beginning of the line but I no matter-- */ /* --what I tried I could not get it to work. My fix or hack to make it work was to use ASCII text codes in the actual-- */ /* --HTML code itself to force it to happen. In the HTML code I use • to force a bullet and then   as a non-breaking-- */ /* --space. The result of this is a bullet with a space and then the Invitation Information text. The Invitation-- */ /* --Information text itself is 10pt bolded in color black (#000000), it begins on the far left side (margin-left = 0;),-- */ /* --it is padded on the top and the bottom by 5px so that there is buffer space between each line of Invitation Information-- */ /* --text, the text is aligned at left (rather than justified) so that there is always just one single space between-- */ /* --the bullet and the first letter or character of text (justified text could result in spacing that would be more than-- */ /* --one single space, and finally, the line-height is set at 16px which results in good spacing when the text for one-- */ /* --single bullet needs to wrap to additional lines (i.e., is longer than what can fit on a single line of text). In-- */ /* --short the padding creates the spacing between bullets and their associated text and the line-height setting sets the-- */ /* --spacing between two or more lines of text for one single bullet.-- */ #invitation-information ul { float: left; width: 518px; margin: 0; padding-left: 10px; padding-bottom: 22px; /* --Provides symmetrical spacing at bottom of list before the next gradient filled separation line.-- */ background-image: none; /* --Was inserted to help get rid of an unexpected filling of the red gradient separation bar.-- */ background-color: #e1d3aa; /* --Was inserted to help get rid of an unexpected filling of the red gradient separation bar.-- */ } #invitation-information li { list-style-type: none; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; width: 518px; margin-left: 0; padding-top: 5px; /* --Adds some space padding between adjacent list item lines; if I were to add 5 more pixels to line-- */ /* --height below this would then have an impact such that lines that continue or wrap on a new line-- */ /* --would also be spaced an additional 5px, whereas by doing it with the padding command it only-- */ /* --affects between list items and it does not have an affect on lines that continue or wrap.-- */ /* --Setting a line-height of 16px with a padding-top of 5px between list items gets me what I want.-- */ text-align: left; line-height: 16px; /* --Sets distance between lines at 16px, which includes lines that contine or wrap on a new line.-- */ background-image: none; /* --Was inserted to help get rid of an unexpected filling of the red gradient separation bar.-- */ } /* --For pricing chart information see separate CSS file.-- */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End right-side text information ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (contains header and text information for "Invitation Description," ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ header and text information for "Invitation Information," header ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ and .gif graphic for "Pricing Information," and header only for ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ "Order Selection" (content for "Order Selection" is in a separate ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ container devoted solely for form data entry information). ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Start Forms area of right-side content area ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #forms { /* --Overall container for the form content and corresponding popup window links, e.g., typeface guide, etc.-- */ width: 580px; margin-left: 0px; } #form-data-input { /* --Container for left-side of form content entry, which is for drop-down boxes, data entry boxes, etc.-- */ float: left; width: 380px; margin-left: 0px; } form#invitation { /* --The container for the form content and corresponding popup window links, e.g., typeface guide, etc.-- */ background:#e1d3aa; /* --Background color for all fieldsets (e.g., invitation-quantity, invitation-color, etc.).-- */ width:540px; /* --Width of the container for the form content and corresponding popup window links set to 540px.-- */ margin-left:40px; /* --Container for fieldsets is indented 40px from the left so that is is underneath content header.-- */ } form#invitation fieldset {/* --Set characteristics of the various fieldsets Color palette, Quantity, Printing process, etc.-- */ width: 378px; /* --Width of actual fieldsets (e.g., invitation-quantity, invitation-color, etc.).-- */ display: block; /* --Element displayed as block-level element with a line break before and after the element.-- */ border: 1px solid #696a6c; /* --Puts thin dark gray 1px border around each filedset (e.g., invitation-quantity, etc.).-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family for fieldset labels (e.g., Color palette, Quantity, Printing-- */ /* --process, Name of bride and title if applicable, Wedding date, Wedding-- */ /* --ceremony time, Ceremony venue name, Font style for invitation wording, etc.).-- */ font-size: 12pt; /* --Font size for fieldset labels (e.g., Color palette, Quantity, Printing process, Name of bride and-- */ /* --title if applicable, Wedding date, Wedding ceremony time, Ceremony venue name, Font style for-- */ /* --invitation wording, etc.).-- */ margin-bottom: 20px;/* --This margin is used as a spacer between adjacent fieldset boxes sitting on top of each other.-- */ line-height: 20px; /* --Sets the spacing between lines within a fieldset box. This matches 20px margin-bottom listed in-- */ /* --the section form#invitation label down below so that text and input boxes are spaced together.-- */ padding-bottom: 20px; /* --Puts a 20px spacer between 1px fieldset border and last input entry data field.-- */ padding-left: 10px; /* --10px padding right space so the form entry label text names and colon are spaced from edge.-- */ } form#invitation legend { /* --Sets legend for subject labels (e.g., Invitation Color Palette, Invitation Quantity, etc.).-- */ width: 357px; /* --Set the width of the legend text boxes at 357px (all set same size regardless of text length).-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family for legend labels that are the white text sitting atop a color-- */ /* --bar background (e.g., Invitation Color Palette, Invitation Quantity, -- */ /* --Invitation Printing, Names and Titles of Bride and Groom, Date and Time of -- */ /* --Wedding, etc.).-- */ color: #ffffff; /* --Sets the color of the text for the legend subject labels as white (#ffffff).-- */ font-size: 12pt; /* --Font size for legend labels that are the white text sitting atop a color bar-- */ /* --background (e.g., Invitation Color Palette, Invitation Quantity, Invitation Printing,-- */ /* --Names and Titles of Bride and Groom, Date and Time of Wedding, etc.).-- */ font-weight: bold; /* --Set weight of text atop of color bar to bold.-- */ background: #a16d2d; /* --The background color for the legend text boxes is dark copper (#a16d2da16d2d).-- */ border: 3px solid #a16d2d; /* --Creates 3px buffer space in color dark copper (#a16d2d) around legend label text in the box.-- */ margin-bottom: 15px; /* --Buffer spacing after the bottom of legend labels but before the first text entry box.-- */ padding: 3px; /* --3px padding around all edges of the legend boxes themselves-- */ } form#invitation label { /* --Form entry label names within fieldsets (e.g., Wedding location, Wedding Date, Yes, No, etc.-- */ clear: left; /* --Clears floating elements on the left side.-- */ /* display: block; /* --Element displayed as block-level element with a line break before and after the element.-- */ float: left; /* --Set so that the form entry label text names will appear in the element at the left side.-- */ width: 363px; /* --Width of the text box that will contain the various form entry label text names.-- */ text-align: left; /* --The form entry label text names will be aligned at right (with a 10px padding-right per below).-- */ font-family: Arial, Helvetica, sans-serif; /*--Font family. As stated a few lines above, this font applies to the bigger-- */ /* --text label names within fieldsets that are adjacent to text entry boxes. It-- */ /* --does not apply to smaller or regular size text adjacent to text entry boxes.-- */ color: #000000; /* --Text color of the form entry label text names is black (#000000).-- */ /* margin-bottom: 20px; /* --Spacing between adjacent rows of form entry label text names.-- */ } form#invitation input { /* --Purpose is to set characteristics of the form's text entry box-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ padding-top: 3px; /* --All characters are typed with a 3px buffer space from the top of the text entry frame.-- */ padding-bottom: 3px; /* --All characters are typed with a 3px buffer space from the bottom of the text entry frame.-- */ font-family: Arial, Helvetica, sans-serif; /*--Font family. This sets the font attributes for the single long line text-- */ /* --entry boxes. This does not apply to larger, multi-line text entry boxes.-- */ font-size: 10pt; } form#invitation fieldset#bride-groom-name input { /* --Purpose is to set length of bride-groom-name data entry box -- */ width: 363px; /* --Set length of the bride-groom-name data entry box to 363px (stops 10px short of fieldset border). -- */ /* --The white colored box for text entry then starts 10px from the left and stops 10px from the right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#date-time-of-wedding input { /* --Purpose is to set length of date-of-wedding data entry box -- */ width: 363px; /* --Set length of the date-of-wedding data entry box to 363px (stops 10px short of fieldset) -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#wedding-ceremony-information input { /* --Set length of wedding-ceremony-information data entry box -- */ width: 363px; /* --Set length of the wedding-ceremony-information data entry boxes to 363px (stops 10px short of fieldset) -- */ /* --border). The white colored box for text entry then starts 10px from the left and stops 10px from right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#wedding-reception-information input { /* --Set length of wedding-reception-information data entry box -- */ width: 363px; /* --Set length of the wedding-reception-information data entry boxes to 363px (stops 10px short of fieldset) -- */ /* --border). The white colored box for text entry then starts 10px from the left and stops 10px from right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#wedding-host-names textarea {/* --This is for big text entry box for wedding host(s) names fieldset.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --Names and Titles of Wedding Hosts.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } form#invitation select { /* --Purpose is left indent space from the left-side for all drop-down boxes.-- */ margin-left: 24px; /* --All drop-down boxes are indented 24px from the left side.-- */ font-family: Arial, Helvetica, sans-serif; /*--Font family. This sets font attributes for the drop-down select menu boxes.-- */ font-size: 10pt; } form#invitation option { /* --Purpose is to set the background color and text color for all drop-down menus.-- */ background: #696a6c; /* --The background color for all drop-down menu option boxes is dark gray (#696a6c).-- */ color: #ffffff; /* --Text color of the words in all drop-down menu option boxes is white (#000000).-- */ } form#invitation fieldset#wording-for-invitation textarea {/* --This is for big text entry box in the Invitation Wording fieldset.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 200px; /* --Height of big text entry box is 200px and it allows 10 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --"Invitation Wording."-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 200px height frame yields 10 lines of text entry on screen.-- */ } form#invitation fieldset#invitation_typeface1-color1-text input { /* --Purpose is to set length of typeface1 and color1 data entry box -- */ width: 180px; /* --Set length of typeface1 data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#invitation_typeface1-color1-text textarea {/* --Big text entry box for describing which parts of wording should use color #1 and font #1.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing which parts of wording should use color #1 and font #1.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#invitation_typeface2-color2-text input { /* --Purpose is to set length of typeface2 and color2 data entry box -- */ width: 180px; /* --Set length of typeface2 data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#invitation_typeface2-color2-text textarea {/* --Big text entry box for describing which parts of wording should use color #2 and font #2.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing which parts of wording should use color #2 and font #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#invitation_typeface3-color3-text input { /* --Purpose is to set length of typeface3 and color3 data entry box -- */ width: 180px; /* --Set length of typeface3 data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#invitation_typeface3-color3-text textarea {/* --Big text entry box for describing which parts of wording should use color #3 and font #3.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing which parts of wording should use color #2 and font #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#outer-envelope-return-address input { /* --Purpose is to set length of both return-address typeface style and typeface color data entry box -- */ width: 180px; /* --Set length of both return-address typeface style and typeface color data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#outer-envelope-return-address textarea {/* --Big text entry box for the outer envelope return address.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --"Please enter the complete return address."-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#general-purpose-comments-questions textarea {/* --Big text entry box for comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --"General Purpose Comments and Questions."-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Reception Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-receptioncard input { /* --Purpose is to set length of wedding_date_receptioncard data entry box -- */ width: 75px; /* --Set length of the wedding_date_receptioncard data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#reception-card_wedding-reception-information input { /* --Set length of wedding-reception-information data entry box -- */ width: 363px; /* --Set length of the wedding-reception-information data entry boxes to 363px (stops 10px short of fieldset -- */ /* --border). The white colored box for text entry then starts 10px from the left and stops 10px from right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#wording-for-reception-card textarea {/* --This is for big text entry box in the Reception Card Wording fieldset.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 200px; /* --Height of big text entry box is 200px and it allows 10 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --"Reception Card Wording."-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 200px height frame yields 10 lines of text entry on screen.-- */ } form#invitation fieldset#reception-card_typeface1-color1-text input { /* --Purpose is to set length of typeface1 and color1 data entry box -- */ width: 180px; /* --Set length of data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#reception-card_typeface1-color1-text textarea {/* --Big text entry box for describing which parts of wording should use color #1 and font #1.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing which parts of wording should use color #1 and font #1.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#reception-card_typeface2-color2-text input { /* --Purpose is to set length of typeface2 and color2 data entry box -- */ width: 180px; /* --Set length of data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#reception-card_typeface2-color2-text textarea {/* --Big text entry box for describing which parts of wording should use color #2 and font #2.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing which parts of wording should use color #2 and font #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#reception-card_typeface3-color3-text input { /* --Purpose is to set length of typeface3 and color3 data entry box -- */ width: 180px; /* --Set length of data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#reception-card_typeface3-color3-text textarea {/* --Big text entry box for describing which parts of wording should use color #3 and font #3.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing which parts of wording should use color #2 and font #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#reception-card_general-purpose-comments-questions textarea {/* --Big text entry box for comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Reception Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for R.S.V.P. Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-rsvpcard input { /* --Purpose is to set length of date-of-wedding data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-rsvpcard data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#wording-for-rsvp-card textarea {/* --This is for big text entry box in the RSVP Card Wording fieldset.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 200px; /* --Height of big text entry box is 200px and it allows 10 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --RSVP card wording.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 200px height frame yields 10 lines of text entry on screen.-- */ } form#invitation fieldset#rsvp-card_reply-by-date input { /* --Purpose is to set length of rsvp-card_reply-by-date data entry box -- */ width: 363px; /* --Set length of the rsvp-card_reply-by-date data entry box to 363px -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#rsvp-card_typeface1-color1-text input { /* --Purpose is to set reception card typeface style #1 and color #1 data entry box -- */ width: 180px; /* --Set length of data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#rsvp-card_typeface1-color1-text textarea {/* --Text entry box describing what reception card wording will use font #1 and color #1.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #1 and color #1.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#rsvp-card_typeface2-color2-text input { /* --Purpose is to set reception card typeface style #2 and color #2 data entry box -- */ width: 180px; /* --Set length of data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#rsvp-card_typeface2-color2-text textarea {/* --Text entry box describing what reception card wording will use font #2 and color #2.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #2 and color #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#rsvp-card_typeface3-color3-text input { /* --Purpose is to set reception card typeface style #3 and color #3 data entry box -- */ width: 180px; /* --Set length of data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#rsvp-card_typeface3-color3-text textarea {/* --Text entry box describing what reception card wording will use font #3 and color #3.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #2 and color #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#rsvp-delivery-address input { /* --Purpose is to set length of both rsvp-delivery-address typeface style and typeface color data entry box -- */ width: 180px; /* --Set length of both rrsvp-delivery-address typeface style and typeface color data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#rsvp-delivery-address textarea {/* --Big text entry box for the R.S.V.P. delivery address.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing RSVP delivery address.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#rsvp-card_general-purpose-comments-questions textarea {/* --Big text entry box for R.S.V.P. comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general purpose comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for R.S.V.P. Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Place Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-placecard input { /* --Purpose is to set length of date-of-wedding data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-placecard data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Place Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Save-the-Date Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#savethedate-bride-groom-name input { /* --Purpose is to set length of save-the-date bride-groom-name data entry box -- */ width: 363px; /* --Set length of the bride-groom-name data entry box to 363px (stops 10px short of fieldset border). -- */ /* --The white colored box for text entry then starts 10px from the left and stops 10px from the right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#savethedate-date-of-wedding input { /* --Purpose is to set length of save-the-date wedding date data entry box -- */ width: 363px; /* --Set length of the savethedate-date-of-wedding data entry box to 363px -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#savethedate-wedding-host-names textarea {/* --This is for big text entry box for save-the-date wedding host(s) names fieldset.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --save-the-date wedding host(s) names.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } form#invitation fieldset#wording-for-savethedate-card textarea {/* --This is for big text entry box in the save-the-date card wording fieldset.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 200px; /* --Height of big text entry box is 200px and it allows 10 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing save-the-date card wording.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 200px height frame yields 10 lines of text entry on screen.-- */ } form#invitation fieldset#savethedate-card_typeface1-color1-text input { /* --Purpose is to set save-the-date typeface style #1 and color #1 data entry box -- */ width: 180px; /* --Set length of savethedate-card_typeface1-color1-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#savethedate-card_typeface1-color1-text textarea {/* --Text entry box describing what save-the-date wording will use font #1 and color #1.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #1 and color #1.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#savethedate-card_typeface2-color2-text input { /* --Purpose is to set save-the-date typeface style #2 and color #2 data entry box -- */ width: 180px; /* --Set length of savethedate-card_typeface2-color2-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#savethedate-card_typeface2-color2-text textarea {/* --Text entry box describing what save-the-date wording will use font #2 and color #2.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #2 and color #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#savethedate-card_typeface3-color3-text input { /* --Purpose is to set save-the-date typeface style #3 and color #3 data entry box -- */ width: 180px; /* --Set length of savethedate-card_typeface3-color3-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#savethedate-card_typeface3-color3-text textarea {/* --Text entry box describing what save-the-date wording will use font #3 and color #3.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #2 and color #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#savethedate-envelope-return-address input { /* --Purpose is to set length of both return-address typeface style and typeface color for save-the-date data entry box -- */ width: 180px; /* --Set length of both return-address typeface style and typeface color data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#savethedate-envelope-return-address textarea {/* --Big text entry box for the save-the-date card envelope return address.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing save-the-date card envelope return address.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#savethedate-general-purpose-comments-questions textarea {/* --Big text entry box for save-the-date card comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general purpose comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Save-the-Date Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Multipurpose Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-event-multipurposecard input { /* --Purpose is to set length of date-of-event-multipurposecard data entry box -- */ width: 75px; /* --Set length of the date-of-event-multipurposecard data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#wording-for-multipurpose-card textarea {/* --This is for big text entry box in the multipurposecard wording fieldset.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 200px; /* --Height of big text entry box is 200px and it allows 10 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing wording for the multipurpose card.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 200px height frame yields 10 lines of text entry on screen.-- */ } form#invitation fieldset#multipurpose-card_typeface1-color1-text input { /* --Purpose is to set multipurpose typeface style #1 and color #1 data entry box -- */ width: 180px; /* --Set length of multipurpose-card_typeface1-color1-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#multipurpose-card_typeface1-color1-text textarea {/* --Text entry box describing what multipurpose wording will use font #1 and color #1.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #1 and color #1.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#multipurpose-card_typeface2-color2-text input { /* --Purpose is to set multipurpose typeface style #2 and color #2 data entry box -- */ width: 180px; /* --Set length of multipurpose-card_typeface2-color2-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#multipurpose-card_typeface2-color2-text textarea {/* --Text entry box describing what multipurpose wording will use font #2 and color #2.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #2 and color #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#multipurpose-card_typeface3-color3-text input { /* --Purpose is to set multipurpose typeface style #3 and color #3 data entry box -- */ width: 180px; /* --Set length of multipurpose-card_typeface3-color3-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#multipurpose-card_typeface3-color3-text textarea {/* --Text entry box describing what multipurpose wording will use font #3 and color #3.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #3 and color #3.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#multipurpose-envelope-return-address input { /* --Purpose is to set length of both return-address typeface style and typeface color for multipurpose data entry box -- */ width: 180px; /* --Set length of both return-address typeface style and typeface color data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#multipurpose-envelope-return-address textarea {/* --Big text entry box for the multipurpose card envelope return address.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing multipurpose card envelope return address.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#multipurpose-general-purpose-comments-questions textarea {/* --Big text entry box for multipurpose card comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general purpose comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Multipurpose Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Thank-You Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#thankyou-card_typeface-color-text input { /* --Purpose is to set thank-you card typeface style #1 and color #1 data entry box -- */ width: 180px; /* --Set length of thankyou-card_typeface1-color1-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#thankyou-card_typeface2-color2-text input { /* --Purpose is to set thank-you card color #2 data entry box -- */ width: 180px; /* --Set length of thankyou-card_typeface2-color2-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#thankyou-card_typeface2-color2-text textarea {/* --Text entry box describing what will use color #2.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use color #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#thankyou-card_typeface3-color3-text input { /* --Purpose is to set thank-you card color #3 data entry box -- */ width: 180px; /* --Set length of thankyou-card_typeface3-color3-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#thankyou-card_typeface3-color3-text textarea {/* --Text entry box describing what will use color #3.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use color #3.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#thankyou-envelope-return-address input { /* --Purpose is to set length of both return-address typeface style and typeface color for thank-you data entry box -- */ width: 180px; /* --Set length of both return-address typeface style and typeface color data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#thankyou-envelope-return-address textarea {/* --Big text entry box for the thank-you card envelope return address.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing thank-you card envelope return address.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#thankyou-general-purpose-comments-questions textarea {/* --Big text entry box for thank-you card comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general purpose comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Thank-You Card ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Favor Tag ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-favorcard input { /* --Purpose is to set length of date-of-wedding data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-favorcard data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#wording-for-favor-card textarea {/* --This is for big text entry box in the favor card wording fieldset.-- */ width: 200px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing favor tag wording.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } form#invitation fieldset#favor-card_typeface1-color1-text input { /* --Purpose is to set favor card typeface style #1 and color #1 data entry box -- */ width: 180px; /* --Set length of favor-card_typeface1-color1-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#favor-card_typeface1-color1-text textarea {/* --Text entry box describing what favor card wording will use font #1 and color #1.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #1 and color #1.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#favor-card_typeface2-color2-text input { /* --Purpose is to set favor card typeface style #2 and color #2 data entry box -- */ width: 180px; /* --Set length of favor-card_typeface2-color2-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#favor-card_typeface2-color2-text textarea {/* --Text entry box describing what favor card wording will use font #2 and color #2.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #2 and color #2.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#favor-card_typeface3-color3-text input { /* --Purpose is to set favor card typeface style #3 and color #3 data entry box -- */ width: 180px; /* --Set length of favor-card_typeface3-color3-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#favor-card_typeface3-color3-text textarea {/* --Text entry box describing what favor card wording will use font #3 and color #3.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 80px; /* --Height of big text entry box is 80px and it allows 4 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --describing what will use font #3 and color #3.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 80px height frame yields 4 lines of text entry on screen.-- */ } form#invitation fieldset#favor-card_general-purpose-comments-questions textarea {/* --Big text entry box for favor card comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general purpose comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Favor Tag ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Program ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-program input { /* --Purpose is to set length of date-of-wedding data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-program data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#program_typeface1-color1-heading input { /* --Purpose is to set program heading typeface and color data entry box -- */ width: 180px; /* --Set length of program_typeface1-color1-heading data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#program_typeface2-color2-text input { /* --Purpose is to set program text typeface and color data entry box -- */ width: 180px; /* --Set length of program_typeface2-color2-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#program_general-purpose-comments-questions textarea {/* --Big text entry box for Program comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general purpose comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Program ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Menu ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-menu input { /* --Purpose is to set length of date-of-wedding data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-menu data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Menu ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Seating Chart ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-seatingchart input { /* --Purpose is to set length of date-of-wedding data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-program data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#seatingchart_typeface1-color1-heading input { /* --Purpose is to set seating chart heading typeface and color data entry box -- */ width: 180px; /* --Set length of program_typeface1-color1-heading data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#seatingchart_typeface2-color2-text input { /* --Purpose is to set seating chart text typeface and color data entry box -- */ width: 180px; /* --Set length of program_typeface2-color2-text data entry box to 180px. -- */ /* --The white colored box for text entry then starts 10px from the left. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#seatingchart_general-purpose-comments-questions textarea {/* --Big text entry box for seating chart comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --general purpose comments and questions.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Seating Chart ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Pocket Fold ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-fold input { /* --Purpose is to set length of date-of-wedding-fold data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-fold data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Pocket Fold ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Invitation Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-invitation-envelopes input { /* --Purpose is to set length of date-of-wedding-invitation-envelopes data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-invitation-envelopes data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End input variable names for Invitation Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Multipurpose Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-multipurpose-envelopes input { /* --Purpose is to set length of date-of-wedding-multipurpose-envelopes data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-multipurpose-envelopes data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End input variable names for Multipurpose Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for R.S.V.P. Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-rsvp-envelopes input { /* --Purpose is to set length of date-of-wedding-rsvp-envelopes data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-rsvp-envelopes data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End input variable names for R.S.V.P. Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Save-the-Date Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-savethedate-envelopes input { /* --Purpose is to set length of date-of-wedding-savethedate-envelopes data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-savethedate-envelopes data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End input variable names for Save-the-Date Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Thank-You Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#date-of-wedding-thankyou-envelopes input { /* --Purpose is to set length of date-of-wedding-thankyou-envelopes data entry box -- */ width: 75px; /* --Set length of the date-of-wedding-thankyou-envelopes data entry box to 75px -- */ /* --format of mm/dd/yyyy, although a customer is not prevented from typing beyond the end of the box. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End input variable names for Thank-You Lined Envelopes ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Contact Cristaff ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#contact-cristaff input { /* --Purpose is to set length of Contact Cristaff Questions & Comments data entry box -- */ width: 363px; /* --Set length of the contact-cristaff data entry box to 363px (stops 10px short of fieldset border). -- */ /* --The white colored box for text entry then starts 10px from the left and stops 10px from the right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#contact-cristaff textarea { /* --Big text entry box for contacting Cristaff with comments and questions.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 120px; /* --Height of big text entry box is 120px and it allows 6 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --sending a message to Cristaff.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 120px height frame yields 6 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Contact Cristaff ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Form input variable names for Custom Stationery ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation fieldset#custom-contact-information input { /* --Purpose is to set length of customer contact information for Custom Wedding Stationery data entry box -- */ width: 363px; /* --Set length of the contact-cristaff data entry box to 363px (stops 10px short of fieldset border). -- */ /* --The white colored box for text entry then starts 10px from the left and stops 10px from the right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#custom-contact-information textarea {/* --Big text entry box for customer address contact information.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --customer information for custom wedding stationery.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#custom-wedding-information input { /* --Purpose is to set length of wedding information for Custom Wedding Stationery data entry box-- */ width: 363px; /* --Set length of the contact-cristaff data entry box to 363px (stops 10px short of fieldset border). -- */ /* --The white colored box for text entry then starts 10px from the left and stops 10px from the right. -- */ border-left: 1px solid #716F64; /* --Set border of data entry box to match border of big text entry boxes (consistent). -- */ } form#invitation fieldset#custom-wedding-information textarea {/* --Big text entry box for customer to describe the wedding style and any other details.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --customer to describe custom wedding style and any other details.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#custom-stationery-information textarea {/* --Big text entry box for customer to describe the custom stationery information and any other details.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --customer to describe inspiration and any other details.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#custom-inspirational-information textarea {/* --Big text entry box for customer to describe the wedding stationery information and any other details.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --customer to describe inspiration and any other details.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } form#invitation fieldset#custom_find-us_questions textarea {/* --Big text entry box for customer to describe the wedding stationery information and any other details.-- */ width: 363px; /* --The width of the big text entry box is 363px.-- */ height: 100px; /* --Height of big text entry box is 100px and it allows 5 lines of data entry on screen.-- */ overflow: auto; /* --The up-down scroll bar only appears if a user enters more text than fits can fit in the box.-- */ /* margin-left: 10px; /* --Set a 10x indented left spacing from the left side.-- */ margin-right: 10px; /* --Set a 10x indented right spacing from the left side.-- */ background: #ffffff; /* --The background color of the big text entry box is white (#ffffff).-- */ padding-left: 3px; /* --The first character typed in the form text entry box will be indented 3px from the left.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family. This sets the font attributes for the big text entry box for-- */ /* --finding us.-- */ font-size: 10pt; line-height: 20px; /* --Line-height of 20px in a 100px height frame yields 5 lines of text entry on screen.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End form input variable names for Custom Wedding Stationery ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Add to Bag, Submit, and Reset Form buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ form#invitation #add-to-bag { /* --This section is for "unhovered" "Add to Bag" button at bottom of the form (light gray).-- */ width: 166px; /*--Width of "Add to Bag" button at bottom of form is 166px (160px garphic, 3px left border, 3px right border)-- */ height: 36px; /*--Height of "Add to Bag" button at bottom of form is 36px (30px garphic, 3px top border, 3px bottom border)-- */ margin-left: 20px; /* --There is 20px left-margin indent so "Add to Bag" button is slightly indented from left side of form.-- */ margin-top: 20px; /*--Puts 20px spacer on top of button so there is buffer space between the content box above it and button-- */ cursor: pointer; /* --Changes cursor from arrow pointer into little hand pointer when hovered over "Add to Bag" button.-- */ background: url(/images/en/shopping-bag/add-to-bag-button-unhovered-en.png); /*--Sets background image "unhovered" "Add to Bag" button (light gray)-- */ background-repeat: no-repeat; /* --The light gray button is displayed only once and does not repeat.-- */ text-align: center; /* --The text "Add to Bag" is centered on the button.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family.-- */ font-size: 10pt; /* --This sets size of words "Add to Bag" to size 10pt.-- */ font-weight: bold; /* --This set weight of words "Add to Bag" to bold.-- */ color: #ffffff; /* --This sets the text color of the words "Add to Bag" to white (#ffffff).-- */ } form#invitation #add-to-bag:hover { /*--This section is "hover" state for "Add to Bag" button at bottom of form (dark gray)-- */ background: url(/images/en/shopping-bag/add-to-bag-button-hovered-en.png); /*--Sets background image "hover" state for "Add to Bag" button (dark gray)-- */ background-repeat: no-repeat; /* --The dark gray button is displayed only once and does not repeat.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family.-- */ font-size: 10pt; /* --This sets size of words "Add to Bag" to size 10pt.-- */ font-weight: bold; /* --This set weight of words "Add to Bag" to bold.-- */ color: #ffffff; /* --This sets the text color of the words "Add to Bag" to white (#ffffff).-- */ } form#invitation #reset-button { /* --This section is for the "unhovered" "Reset" button at bottom of the form (light gray).-- */ width: 136px; /* --Width of "Reset" button at bottom of form is 136px (130px garphic, 3px left border, 3px right border).-- */ height: 36px; /* --Height of "Reset" button at bottom of form is 36px (30px garphic, 3px top border, 3px bottom border).-- */ margin-left: 78px; /* --Left-margin indent for "Reset" button is 78px to be symmetrical with "Submit" button on left side.-- */ margin-top: 20px; /*--Puts 20px spacer on top of button so there is buffer space between the content box above it and button-- */ cursor: pointer; /* --Changes cursor from arrow pointer into little hand pointer when hovered over "Reset" button.-- */ background: url(/images/gray-button-unhovered.png); /* --Sets background image for "unhovered" "Reset" button (light gray).-- */ background-repeat: no-repeat; /* --The dark red button is displayed only once and does not repeat.-- */ text-align: center; /* --The text "Reset" is centered on the button.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family.-- */ font-size: 10pt; /* --This sets size of words "Reset" to size 10pt.-- */ font-weight: bold; /* --This set weight of words "Reset" to bold.-- */ color: #ffffff; /* --This sets the text color of the words "Reset" to white (#ffffff).-- */ } form#invitation #reset-button:hover { /*--This section is for "hover" state of "Reset" button at bottom of form (dark gray).-- */ background: url(/images/gray-button-hovered.png); /* --Sets background image "hover" state for "Reset" button (dark gray)-- */ background-repeat: no-repeat; /* --The light red button is displayed only once and does not repeat.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family.-- */ font-size: 10pt; /* --This sets size of words "Reset" to size 10pt.-- */ font-weight: bold; /* --This set weight of words "Reset" to bold.-- */ color: #ffffff; /* --This sets the text color of the words "Reset" to white (#ffffff).-- */ } form#invitation #submit-button { /*--This section is for the "unhovered" "Submit" button at bottom of form (light gray).-- */ width: 136px; /* --Width of "Submit" button at bottom of form is 136px (130px garphic, 3px left border, 3px right border).-- */ height: 36px; /* --Height of "Submit" button at bottom of form is 36px (30px garphic, 3px top border, 3px bottom border).-- */ margin-left: 20px; /* --There is 20px left-margin indent so "Submit" button is slightly indented from far left side of form.-- */ margin-top: 20px; /*--Puts 20px spacer on top of button so there is buffer space between the content box above it and button-- */ cursor: pointer; /* --Changes cursor from arrow pointer into little hand pointer when hovered over "Submit" button.-- */ background: url(/images/gray-button-unhovered.png); /* --Sets background image for "unhovered" "Submit" button (light gray).-- */ background-repeat: no-repeat; /* --The dark red button is displayed only once and does not repeat.-- */ text-align: center; /* --The text "Submit" is centered on the button.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family.-- */ font-size: 10pt; /* --This sets size of words "Submit" to size 10pt.-- */ font-weight: bold; /* --This set weight of words "Submit" to bold.-- */ color: #ffffff; /* --This sets the text color of the words "Submit" to white (#ffffff).-- */ } form#invitation #submit-button:hover { /*--This section is for "hover" state for "Submit" button at bottom of form (dark gray)-- */ background: url(/images/gray-button-hovered.png); /*--Sets background image "hover" state for "Submit" button (dark gray)-- */ background-repeat: no-repeat; /* --The light red button is displayed only once and does not repeat.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family.-- */ font-size: 10pt; /* --This sets size of words "Submit" to size 10pt.-- */ font-weight: bold; /* --This set weight of words "Submit" to bold.-- */ color: #ffffff; /* --This sets the text color of the words "Submit" to white (#ffffff).-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End Add to Bag, Submit, and Reset Form buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --This #view-options container is on the right-side of the #forms container and immediately adjacent to the #form-data-input-- */ /* --container, and the #view-options container's purpose is simply to set aside some space for some links that will open up-- */ /* --new window(s) so that customers can see real-life examples of the type of data that the form is asking the customer to-- */ /* --provide. For example, when the form asks the customer to choose a lettering style (font) for the invitation wording then-- */ /* --there will be a link to the right of this lettering style data entry box/drop-down box so that a customer may click on the-- */ /* --link and a new window will open showing how all of the different fonts look when used in a short sentence and thus also-- */ /* --facilities comparison between font types and more easily allows the customer to choose his or her favorite font.-- */ #view-options { /* --#form-data-input container is "floated: left" and #view-options container is "floated: right"-- */ float: right; /* --This floats the #view-options container to the right and thus avoids #form-data-input container.-- */ width: 128px; /* --The width of the view-options links for examples is 128px wide.-- */ top: 0px; /* --Ensure that content in this #view-options container begins at the top of the container.-- */ } #view-options-links { margin: 0; /* --Remove all padding from the unordered list.-- */ padding: 0; /* --Remove all padding from the unordered list.-- */ } #view-options-links li { list-style-type: none; /* --Removes the bullets from the unordered list.-- */ margin:0 0 10px 0; /* --Sets a margin of 10px at the bottom of each link list item tag.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family for the link text.-- */ font-size: 9pt; /* --I'm trying to set non-active-link part of list text to different font size, color, and line height-- */ /* --as compared to active link text. Here I set as 9pt, color black (#000000), and line height 11pt-- */ /* --whereas below I set font to 10pt, color blue (#0000FF), and line height 12pt. So, for the example--*/ /* --"Cristaff Stationery Etiquette and Planning Guide (see pages 26-28, and sample invitations throughout)"--*/ /* --the active link "Cristaff Stationery Etiquette and Planning Guide" should be in the blue color text along--*/ /* --with its associated text attributes, and "(see pages 26-28, and sample invitations throughout)" should be--*/ /* --in the black color text along with its associated text attributes.--*/ color: #000000; /* --Set the regular text color to black (#000000).-- */ font-weight: normal; text-align: left; /* --The text for the links of this unordered list are aligned to the left side.-- */ line-height: 11pt; /* --The space between two adjacent lines of text when a link wraps to another line due to length.-- */ } #view-options-links a, #view-options-links a:visited { display: block; /* --This ensures that the link width will be as we specify. Height is set automatically by font size.-- */ width: 128px; /* --The width of the unordered list of links.-- */ font-family: Arial, Helvetica, sans-serif; /* --Font family for the link text.-- */ font-size: 10pt; /* --Font size of the link text is 10pt.-- */ color: #0000FF; /* --Set the link color to blue (#0000FF).-- */ font-weight: normal; text-align: left; /* --The text for the links of this unordered list are aligned to the left side.-- */ line-height: 12pt; /* --The space between two adjacent lines of text when a link wraps to another line due to length.-- */ } /* --The section "clearfloats" below is used to ensure that the footer ("#footer") is always underneath the longest of either-- */ /* --the left navigation bar or the right column (right-side content) comprising images, text, and forms. This empty container-- */ /* --does not have any real content within the container. This hack can be found in the Stylin' with CSS book, page 142.-- */ #clearfloats { /* --This extra div is used solely for positioning it underneath longest column. No real content in the div.-- */ clear: both; /* --"clear: both" ensures that the #clearfloats div clears both left and right floating elements above it.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End Forms area of right-side content area ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Display Cristaff Ordering Process illustration ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The #shopping-process section serves to display the Cristaff Ordering Process illustration (Select, Purchase, Review,-- */ /* --Revise, Produce, Ship, Receive).-- */ #ordering-process { height: 74px; width: 555px; background-image: url(/images/en/party-invitations-event/social-stationery-resources/stationery-style-guide/ordering-process.gif); background-repeat: no-repeat; margin-top: 25px; margin-bottom: 25px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Display Cristaff Ordering Process illustration ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ Begin footer area ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* --The footer container will set aside the area for content including shiping rate link, privacy link, return policy link,-- */ /* --etc. The tricky part is that the placement of the footer needs to happen immediately after the longer of either the left-- */ /* --navigation bar column or the right-side content comprising images, text, and forms. In other words, if the left navigation-- */ /* --bar is longest then the footershould be placed immediately after this.......or if the right-side content comprising images,-- */ /* --text, and forms is longest then the footer should be placed immediately after this. Several CSS books (e.g., this hack can-- */ /* --be found in the Stylin' with CSS book, page 142; and, The Zen of CSS Design, pg. 90-91) describe how this is accomplished -- */ /* --through the clear:both command. I also go on to specificy the footer as 800px wide and 80px high.-- */ #footer { clear: both; /* --I don't think the "clear: both" is still needed since I put one in the #clearfloats container, but-- */ width: 800px; /* --it doesn't seem to break anything at this point in time so I'll keep it in for now.-- */ height: 80px; /* --The footer is 800px wide by 80px high.-- */ top: 0; /* --I don't think that top:0 and left:0 are still needed but it doesn't break anything so I'll keep it.-- */ left: 0; background-image: url(/images/footer.png); background-repeat: no-repeat; /* --Ensures that if content in footer area for some reason goes beyond the 80px height of the-- */ /* --footer that the dark copper background will not repeat.-- */ } #footer-content p { /* --I set up a new container solely for the actual content of the footer, called "footer-content."-- */ font-family: Arial, Helvetica, sans-serif; /* --Sets font family, font-size, and color of the paragraph tag text in footer.-- */ font-size: 10pt; color: #ffffff; } #footer-content{ width: 800px; /* --The width of the container that will contain the text information in the footer is 800px wide-- */ text-align: center; /* --Centers the footer text content.-- */ padding-top: 5px; /*--This puts a 5px spacer between the top of the footer and where the first line of text can start.-- */ } #footer-content a, #footer-content a:link, #footer-content a:active, #footer-content a:visited { color: #ffffff; /* --All footer text content that is a link is just plain white regular text with no decoration until-- */ text-decoration: none; /* --it is a hover state and then a white underline appears underneath the text where the mouse is.-- */ } #footer-content a:hover { color: #ffffff; /* --All footer text content that is a link is just plain white regular text with no decoration until-- */ text-decoration: underline;/* --it is a hover state and then a white underline appears underneath the text where the mouse is-- */ } /* --The spacer-after-footer container is used to create an extra space after the bottom of the footer so that the bottom of the-- */ /* --footer does not stop at the exact bottom of the screen but has some of the background color/pattern between the bottom of-- */ /* --the footer and the bottom of the screen. I kept running into problems where no matter what I did either the dark red-- */ /* --footer would continue to repeat into any area that I tried to put an extra space, and/or the light tan/cream color content-- */ /* --background (invitation-content-background.gif) would fill and repeat into the extra space. I solved both of these problems-- */ /* --by first putting a "no-repeat" statement in the "footer" code area so that it would only be shown once. Then I solved the-- */ /* --the light tan/cream color content background (invitation-content-background.gif) problem by putting another div immediately-- */ /* --after the "footer-content" div in the HTML code and then below I use the CSS code to position it using "absolute" so that-- */ /* --it immediatly follows the footer and/or footer text content and then I float the spacer-after-footer div so that it takes-- */ /* --it out of the normal flow of the document which then results in a 50px space being put between the bottom of the footer-- */ /* --and the bottom of the screen. Since the float takes it out of the normal document flow it is impossible for the light-- */ /* --tan/cream color content background (invitation-content-background.gif) to continue in this area and so the result is just-- */ /* --a blank space that is 50px wide. I found another solution that achieves the same result, and that I have included below-- */ /* --in the code but I have commented out. This other solution still begins with "position: absolute" but then it uses a-- */ /* --z-index of "2" which results in the 50px space being put between the bottom of the footer and the bottom of the screen-- */ /* --but set on a different plane (since z-index is set to "2") and therefore the light tan/cream colored does not continue-- */ /* --onto this new plane since it sort of creates a break.-- */ #spacer-after-footer { /* --Container used to create an extra space between bottom of the footer and bottom of the screen.-- */ width: 800px; /* --Width of the container is 800px, the full width of the content area.-- */ height: 50px; /* --I arbitrarily felt that 50px is good enough space gap between bottom of footer and screen.-- */ position: absolute; /* --This is the two-step trick that I use to create the gap between bottom of the footer and screen without-- */ float: none; /* --having the light tan/cream color invitation-content-background.gif background continue into this area.-- */ } /* --Another way to write the spacer-after-footer code and achieve the same result is as follows: #spacer-after-footer { Container used to create an extra space between bottom of the footer and bottom of the screen. width: 800px; Width of the container is 800px, the full width of the content area. height: 50px; I arbitrarily felt that 50px is good enough space gap between bottom of footer and screen. position: absolute; This is the two-step trick that I use to create the gap between bottom of the footer and screen without z-index: 2; having the light tan/cream color invitation-content-background.gif background continue into this area. }-- */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ End footer area ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Formatting for Site Map Webpage ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #site-map a:link, #site-map a:hover, #site-map a:visited, #site-map a:active { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; line-height: 150%; text-decoration: none; } span.site-map-font-small { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; line-height: 150%; text-decoration: none; } span.site-map-font-medium { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; color: #a16d2d; font-weight:bold; text-decoration: none; } span.site-map-font-large { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #a16d2d; text-decoration: none; } #horizontal-dotted-line{ border-bottom: 2px dotted #a16d2d; /*--This creates a horizontal dark copper dotted line.-- */ width: 557px; /*--Full width of container is 587px. With a 15px left margin a line of 557px will end 15px from right side.-- */ margin-left: 15px; /*--This puts a spacer on the left.-- */ } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Formatting for Site Map Webpage ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */