*/ div.search-results { border: 10px solid #808080; margin: 1px; } /* TAGLET NOTE (2): this taglet's receives each table row search result from the "Search result item" taglet (see below): :

*/ div.search-results table { border: 2px solid #000000; margin: 1px; } /* @end search results wrapper */ /* @group Search Results Table */ /* TAGLET NAME: Search result item TAGLET GROUP: Search Results TAGLET DESCRIPTION: this taglet generates each individual search result as three table data elements in a table row element */ div.search-results td { } /* TAGLET NOTE (1): both the first and third td data cells have a class of "search-row". TAGLET NOTE (2): the first has a number of attributes defined in the taglet eg: : */ td.search-row { } /* TAGLET NOTE (3): the first td.search-row contains a nested table. The width of this table is variable depending on the search results 'relevance'. The width is retrieved from the backend as a parameter value (pval). : */ td.search-row table { border: 1px solid #222222; } /* TAGLET NOTE (4): an image indicating search result relevance is created by a nested

. The width is retrieved from the backend as a parameter value (pval) :

*/ td.search-image { border: 3px solid #A9A9A9; background-color: #CCCCCC; } /* TAGLET NOTE (5): the second displayes a search result's relevance indicated as a percentage value. This is retrieved from the backend as a parameter value (pval). : */ td.search-percentage { } /* TAGLET NOTE (6): the third in each search result's ... : TAGLET NOTE (7): ...contains a page link/page title to a search result's page eg: Page title. Both the href link and page title are retrieved from the backend as parameter values (pval) : TAGLET NOTE (8): the text snippet from each search result is retrieved from both the backend and the "Search match highlight" taglet (see below) and inserted into this taglets */ td.search-row a { } /* TAGLET NAME: Search match highlight TAGLET GROUP: Search Results TAGLET DESCRIPTION: TAGLET NOTE: the word used in the search is retrieved from the backend and inserted into this taglets */ span.hilight { background-color: #CCCCCC; } /* @end search results table */ /* @end searchform & search results */ /* @group SEARCHPANELS */ /* @group Full Searchpanels */ /* TAGLET NAME: Search panel - full TAGLET GROUP: Search Results TAGLET DESCRIPTION: this taglet is used to generate every full searchpanel which appears in a web-page of this site TAGLET BACKGROUND: - a full searchpanel should be published in the main content area of a page - a full searchpanel can be used to search for products, postcodes or images eg: CONTENT EXPRESSIONS: [[ searchpanel of products ]] [[ searchpanel of postcodes ]] [[ searchpanel of images ]] TAGLET NOTE (1): each searchpanel gets a different wrapper to give designers extra styling control if they need it eg:

. The wrapper name is retrieved from the backend as a parameter value (pval). :

*/ div.product-search-wrapper { border: 30px solid #444444; margin: 1px; } div.image-search-wrapper { border: 30px solid #444444; margin: 1px; } div.postcode-search-wrapper { border: 30px solid #444444; margin: 1px; } /* TAGLET NOTE (2): each searchpanel displays a message from a page eg: postcode-search, image-search & product-search. These pages are located in the 'System Generated Pages' section of the Pages Catalogue and their messages can be customized by designers or their clients. This taglets receives the content from each of these pages. :

*/ div.search-panel-instructions { border: 10px solid #808080; margin: 1px; background-color: #CCCCCC; } div.search-panel-instructions p { } /* TAGLET NOTE (3): each search panel has a form. :

*/ div.product-search-wrapper form { border: 2px solid #000000; margin: 1px; } div.image-search-wrapper form { border: 2px solid #000000; margin: 1px; } div.postcode-search-wrapper form { border: 2px solid #000000; margin: 1px; } /* TAGLET NOTE (4): the div.search-panel-search-field is used by each full searchpanel and the split searchlist (see below) */ div.search-panel-search-field { border: 10px solid #808080; background-color: #CCCCCC; margin: 1px; } /* STYLING NOTE: if styling control is needed over a particular searchpanel's div.search-panel-search-field more specific selectors may be required: */ div.product-search-wrapper div.search-panel-search-field { } div.image-search-wrapper div.search-panel-search-field { } div.postcode-search-wrapper div.search-panel-search-field { } /* TAGLET NOTE (5): the input field is used to search for items in the search panel select list (this is also used by the split searchpanel's searchlist) : searchAnchoredFilterFor(this.value) */ div.search-panel-search-field input { border: 1px solid #000000; } /* STYLING NOTE: if styling control is needed over a particular searchpanel's input element more specific selectors may be required: */ div.product-search-wrapper input { } div.image-search-wrapper input { } div.postcode-search-wrapper input { } div.search-panel-select-list { border: 10px solid #808080; margin: 1px; background-color: #CCCCCC; } /* TAGLET NOTE (6): 10 items can fill the select list before a vertical scroll bar appears. This number can be changed. : : searchAnchoredFilterFor(this.value) */ div.product-search-list-wrapper input { } div.image-search-list-wrapper input { } div.postcode-search-list-wrapper input { } /* TAGLET NOTE (5): the div.search-panel-select-list is also used by the full search panel (see above). If this element needs specific styling then more specific selectors may be required: */ div.product-search-list-wrapper div.search-panel-select-list { } div.image-search-list-wrapper div.search-panel-select-list { } div.postcode-search-list-wrapper div.search-panel-select-list { } /* TAGLET NOTE (6): 10 items can fill the select list before a vertical scroll bar appears. This number can be changed. : AJSearchLoadDiv... TAGLET NOTE (8): each search item in the select list is retrieved from the backend. First the items are identified as a set of data (or dataset): : TAGLET NOTE (9): in a data set each item of content can have various data values (dval). Each items "searchable_text" is retrieved from the backend as a data value. : */ div.product-search-list-wrapper select { border: 1px solid #000000; } div.image-search-list-wrapper select { border: 1px solid #000000; } div.postcode-search-list-wrapper select { border: 1px solid #000000; } /* @end search panel - search list */ /* @group Search panel - results */ /* TAGLET NAME: Search panel - results TAGLET GROUP: Search Results TAGLET DESCRIPTION: This taglet is used to generate every search 'results' panel which appears in a web-page of this site. TAGLET BACKGROUND: - a split searchpanel allows the "search list" to be published in one region and the search "results" to be published in another page region. - a searchpanels "results" can be used for products, postcodes or images and directed "into" (=>) any region eg: CONTENT EXPRESSIONS: [[ searchresults of searchpanel of images => region ]] [[ searchresults of searchpanel of products => region ]] [[ searchresults of searchpanel of postcodes => region ]] TAGLET NOTE (1): search results are displayed in a wrapper. The name of the wrapper is retrieved from the backend as a parameter value (pval). :

*/ div.postcode-search-results-wrapper { border: 30px solid #444444; background-color: #CCCCCC; } div.product-search-results-wrapper { border: 30px solid #444444; background-color: #CCCCCC; } div.image-search-results-wrapper { border: 30px solid #444444; background-color: #CCCCCC; } /* TAGLET NOTE (2): search results are also displayed in a wrapper with a css #id. The id "search_name" is retrieved from the backend as a parameter value (pval). :

_results

*/ div#postcode-search_results { border: 5px solid #555555; margin: 1px; } div#product-search_results { border: 5px solid #555555; margin: 1px; } div#image-search_results { border: 5px solid #555555; margin: 1px; } /* STYLING NOTE: Selectors may need to be defined for styling control over content displayed in the search results field. */ div.image-search-results-wrapper img { } /* @end search panel - results */ /* @end split searchpanels */ /* @end searchpanels */ /* @group LOGIN FORMS */ /* @group Loginform */ /* TAGLET NAME: Registration - Login form (full-sized) TAGLET GROUP: Resitration and Login TAGLET DESCRIPTION: this taglet is used to generate every full sized loginform which appears in a web-page of this site. TAGLET BACKGROUND: The loginform is a system generated form that should be published in the 'main content area' of a web-page. CONTENT EXPRESSION: [[ loginform ]] */ div.login-form { border: 30px solid #555555; margin: 1px; } div.login-form fieldset { border: 1px solid #333333; margin: 1px; } div.login-form legend { } /* TAGLET NOTE (1): the taglet generates a form eg: : */ div.login-form form { border: 2px solid #000000; margin: 1px; background-color: #FFFFFF; } /* TAGLET NOTE (2): each part of the login form is wrapped in a paragraph tag eg:

Username:

*/ div.login-form p { background-color: #CCCCCC; margin: 1px; } div.login-form p label { } /* TAGLET NOTE (3): the first input field is for a Username. It has a size of 24 characters (which can be changed): :

Username:

TAGLET NOTE (4): the second input field is for a Password. It also has a size of 24 characters (which can be changed): :

Password:

*/ div.login-form p input { border: 1px solid #000000; } /* TAGLET NOTE (5): the input submit button includes a styling class .login-submit eg: :

*/ div.login-form p input.login-submit { } /* @end loginform */ /* @group Miniloginform */ /* TAGLET NAME: Registration - Mini login form TAGLET GROUP: Registration and Login TAGLET DESCRIPTION: This taglet is used to generate every minilogin form which appears in a web-page of this site. TAGLET BACKGROUND: The miniloginform is a system generated form that can be directed into (=>) different page regions CONTENT EXPRESSION: [[ miniloginform => region ]] */ div.mini-login-wrapper { border: 30px solid #A9A9A9; margin: 1px; } div.mini-login-wrapper fieldset { border: 1px solid #333333; margin: 1px; } div.mini-login-wrapper legend { } /* TAGLET NOTE (1): the taglet generates a form eg: : */ div.mini-login-wrapper form { border: 2px solid #000000; margin: 1px; } /* TAGLET NOTE (2): each part of the login form is wrapped in a paragraph tag eg:

Username:

*/ div.mini-login-wrapper p { background-color: #CCCCCC; margin: 1px; } div.mini-login-wrapper p label { } /* TAGLET NOTE (3): the first input field is for a Login name. It has a size of 20 characters (which can be changed): :

TAGLET NOTE (4): the second input field is for a Password. It also has a size of 20 characters (which can be changed): :

Password:

*/ div.mini-login-wrapper p input { border: 1px solid #000000; } /* TAGLET NOTE (5): the input submit button includes a styling class .login-submit : */ div.mini-login-wrapper p.login-submit { } div.mini-login-wrapper p.login-submit input { } /* div.spacer needed for browser compatibility */ div.mini-login-wrapper div.spacer { display: none; } /* @end miniloginform*/ /* @end registration and login forms */ /* @group FORMS (AJAX) */ /* DEFAULT BROWSER FORM STYLES: The form tag is used by many different forms eg: - registration - login - miniloginform - user generated forms Start by removing default margin and padding: */ form { margin: 0px; padding: 0px; } /* @group Form Wrapper */ /* TAGLET NAME: AJ-Comp - Form wrapper (generic) TAGLET GROUP: Forms (AJAX Components) TAGLET DESCRIPTION: Forms are complex! Every form element is generated by its own taglet (eg: form wrapper, form title, text fields etc.). This taglet is used to generate the outer wrapper for AJAX forms. TAGLET BACKGROUND: This taglet is used to generate the outer wrapper for user generated forms and the system generated registration form. CONTENT EXPRESSIONS: 1) System generated registration form: [[ registration ]] 2) User generated forms built with the form builder in the Forms Catalogue: [[ content-name of forms ]] TAGLET NOTE (1): every form gets wrapped in a div with a CSS class="form-wrapper" :

*/ .form-wrapper { border: 0px solid #808080; width: 537px; } /* TAGLET NOTE (2): The generic form wrapper

does not allow a designer to take styling control over an individual form. For this reason, a unique CSS-ID is also added to each form wrapper eg:

TAGLET NOTE (3): 'when' a form has a unique "content-name"... : TAGLET NOTE (4): ...then a form's "content-name" is retrieved from the backend as a parameter value (pval) for a unique CSS ID eg:

: STYLING NOTE: the unique CSS-ID applied to each AJAX form wrapper allows a designer to use 'descendent selectors' to take complete styling control over an individual form and all its elements eg: to style the

of the registration form, the following descendent CSS selector could be used: div.form-wrapper#registration div.form-masthead { } TAGLET NOTE (5): this taglet's receives form elements (tags) from the other form taglets. */ div.form-wrapper#registration { } div.form-wrapper#test-2 { } /* @end form wrapper */ /* @group Form Title (optional) */ /* TAGLET NAME: AJ-Comp - Form title TAGLET GROUP: Forms (AJAX Components) TAGLET DESCRIPTION: Forms are complex! Every form element is generated by its own taglet (eg: form wrapper, form title, text fields etc.). This taglet is used to generate the (optional) Form Title for AJAX forms which appear in web-pages across this site. TAGLET BACKGROUND: a form title is an optional element, it can be added to a form by clicking the 'Edit options' link next to a form's listing in the Forms Catalogue. TAGLET NOTE: this taglet's receives a form's title from the backend. */ div.form-title { visibility: hidden; height: 0px; /*font-size: 20px; font-weight: bold; line-height: 300%; background-color: #A9A9A9; padding-left: 10px; margin: 1px;*/ } /* My Comment */ /* @end optional form title */ /* @group Form generator */ /* TAGLET NAME: AJ-Comp - form generator TAGLET GROUP: Forms (AJAX Components) TAGLET DESCRIPTION: Forms are complex! Every form element is generated by its own taglet (eg: form wrapper, form title, text fields etc.). This 'AJAX form generator" taglet is particularly complicated because it creates the individual form-parts that go into the generic form wrapper. PROCEED WITH CARE: This is a complicated taglet, and lots of things can break if this goes wrong! */ div.form-inner-wrapper { border: 0px solid #808080; margin: 0px; background-color: #f2eae2; padding: 0px 10px 20px 10px; } /* TAGLET BACKGROUND: the form builder allows forms to be separated into different 'Parts' - this gives designers the ability to offer clients 'single part forms' or divide long forms into 'multi part forms'. TAGLET NOTE (1): 'when' a form element coming into this taglet is a form part's title (or heading)... : TAGLET NOTE (2): ...then the form part title is retrieved from the backend as a parameter value (pval) and wrapped in a

tag and