/* DEFAULTS----------------------------------------------------------*/

html, form
{
  height: 100%;
  /* width: 100%; */
}

/* overflow hidden removes scroll bar */
body   
{
    font-size: 1em;
    font-family: "Century Gothic", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #292922;
    height: 100% ;
    overflow:auto;
  
  /* text-align: center; */
  
  /* Prevent iPad and Android adjusting font sizes 
    -webkit-text-size-adjust: 100%; */
}
  
a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #FFB90F;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

.hyperlinkBlock
{
    color: blue;
    font-weight:bolder;
    text-decoration:none;
    overflow:auto;
}

.hyperlinkBlockSelected
{
    font-weight:bolder;
    text-decoration:none;
}
/* HEADINGS ----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    color: #010101;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    color: #FEFEFE;
    text-align: center;
    vertical-align: middle;
    font-size: 2.5em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

table
{ border: 0;
  padding: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: black;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;

}

.footer
{
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

/* APPLICATION SPECIFIC
----------------------------------------------------------*/


.headerImageSizeML, .headerImageSizeMR
{ 
    height: 6em; 
    width: 10%;
    margin: 0;
    padding: 0;
    border: 0 !Important;
    float: left;
}

.headerImageSizeMR { overflow: hidden; }

/* Used on Beaker Simple Master */
.headerImageSizeMC
{ 
    height: 6em; 
    width: 75%;
    margin: 0;
    padding: 0;
    border: 0 !Important;
    float: left;
}

#repeaterContainer  
{
    height: 6em; 
    width: 80%; 
/*    margin: 0; 
    padding: 0; 
    border: 0 !Important; */
    float: left;
    overflow: hidden; 
}

.headerRepeaterItemTemplate
{
    height: 6em; 
    width: 5%;
    margin: 0;
    padding: 0;
    border: 0 !Important;
    float: left;

}
    
/*.headerImageSizeMR
{ 
    height: 6em; 
    width: 10%;
    margin: 0;
    padding: 0;
    border: 0 !Important;
    float: left;
}
*/
/* MISC  
----------------------------------------------------------*/
/*
.DisplayThumbnail
{width: 60px; height: 70px; }

.SmallThumbnail
{width: 39px; height: 51px; }

.MediumThumbnail
{width: 80px; height: 89px; }
*/
/* Generic GridView Css styles used on several pages

/* Set a anchor style because the headings are actually links */
.GridHeaderStyle a
{ color: blue; font-weight: bold; }
 
.SingleRecordViewStyle
 {width: 100%;}
 
.GridSelectedStyle
{ background-color: #E4FFFF; font-weight: bold; }
 
.ListSelectedStyle
{ background-color: #E4FFFF; font-weight: bold; }
/* Page-specific CSS ------------------------------------------*/
/* Site.Master -------------------------------------------------*/

.HoldPanels { width: 100%; }

.SiteMasterTable { height: 100%; width: 100%; border: none; }

col.SiteMasterMainTableCol1 { width: 14%; }
col.SiteMasterMainTableCol2 { width: 86%; }

col.HoldPanelsCol1 { width: 85%; }
col.HoldPanelsCol2 { width: 15%; }

col.HoldImagesCol1 { width: 10%; }
col.HoldImagesCol2 { width: 80%; }
col.HoldImagesCol3 { width: 10%; }

.SiteMasterMainTableRow1 { height: 10%; vertical-align: middle; border: none;}
.SiteMasterMainTableRow2 { height: 85%; vertical-align: top; border: none;}
.SiteMasterMainTableRow3 { height: 5%; vertical-align: bottom; border: none;}

.loginTextbox
{ background-color:white; color:black; font-size: 0.7em; width: 2cm; border-style: none; 
    position:relative !important; z-index:200 !important;}  /* !important has to be added because Safari and Chrome ignore it otherwise
                                                            and it does not appear in the source code displayed for the page */

.generalButton { width:94px; height:34px; display:block; background-color: transparent; 
                border-style: none; }
    
/*.singleButton { width:141px; height:34px; display:block; background-color: transparent; 
                border-style: none;  }  */
/*.singleButton { width:115px; height:20px; display:block; background-color: transparent; 
                border-style: none;  } */
                

    
/* Theme01 and Theme02 sizes */
/*.buttonMenu { width:141px; height:34px; display:block; background-color: transparent; 
                border-style: none; }                                                              */
/* Theme03 sizes */   
/*.buttonMenu { width:141px; height:28px; display:block; background-color: transparent; 
                border-style: none; }  */
                
/* Theme04 sizes */   
.buttonMenu { width:115px; height:20px; display:block; background-color: transparent; 
                border-style: none; }              
                
.buttonMenu:hover {background-position:left bottom;}
                
.loginText
{ font-size: 0.7em; }
.panel
{ border: none;}
.LogonPanel
{ border: none; }
.LogoffPanel
{ border: none;  }

/* WFAbout.aspx ----------------------------------------------*/
/* also */
/* WFIntroduction.aspx ----------------------------------------*/
.generalText
{ font-family: 'Helvetica Neue','Helvetica','Arial',hirakakupro-w3,osaka,'ms pgothic',sans-serif; font-weight: normal; font-size: 0.9em; }

.alignCentre { text-align: center; }

/* WFAbout.aspx ----------------------------------------------*/
/* also */
/* WFCatalogues.aspx -----------------------------------------*/
/* also */
/* WFIntroduction.aspx ----------------------------------------*/
.labCatalogueText
  { font-weight:700; }


.labWelcomeMessage {
    position: relative; 
    left: 3.5em; 
    top:3.5em; 
    color:white; 
    font-size: 1.5em; 
    font-weight: bold; 
    float:left;
}

/*
.labAdditionsMessage {
    position: relative;
    color: white; 
    left: 5.5em; 
    top: 1.5em; 
    font-weight: bold; 
    font-size: 1.5em;
    float: left;
    text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);   
    text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 30px #fff, 0px 0px 40px #ff00de, 0px 0px 70px #ff00de, 0px 0px 80px #ff00de, 0px 0px 100px #ff00de, 0px 0px 150px #ff00de;
    z-index: 10;

}
    */

/* WFfrmCollectionView.aspx -----------------------------------*/

/*.LayoutTemplateWidth {width:10%;} */

.GridViewItemsListStyle
{width: 100%; border-width: 1px;}

.ListViewItemsListCol1 { width: 80%; }
.ListViewItemsListCol2 { width: 2%; }
.ListViewItemsListCol3 { width: 18%; }

.GridViewItemsListRow1 { vertical-align: top; }
                
.buttonMedium { width:94px; height:34px; display:block; background-color: transparent; 
                border-style: none; } 
.buttonMedium:hover {background-position:left bottom;}

.buttonSmaller { width:56px; height:32px; display:inline-block; border-style: none;
                 overflow: hidden;
                 background: transparent url('/Images/Buttons/bt1sok3.png') no-repeat 0px 0px; } 
.buttonSmaller:hover {background-position:0px -32px; }

.buttonTiny { width:68px; height:16px; display:inline-block; border-style: none;
                 overflow: hidden;
                 background: transparent url('/Images/Buttons/bttut3i.png') no-repeat 0px 0px; } 
.buttonTiny:hover {background-position:0px -16px; }

.ListViewItemsListPagerCss { font-size: 0.7em; }

.italic { font-style: italic; }


/* Image borders for the small and larger pop-up images */
.bordersimplelarge
{
 /* This centers the image */
 display: block;
 margin:5.5em 0em 1em 0em;
 padding:0;
 border-radius: 1.0em; 
 
 /* This adds the border */
 /* MOBILE EXCLUSION 
 padding:0.5em;
 border:solid;
 border-color: #00BFFF #104E8B #104E8B #00BFFF;
 border-width: 4px 8px 8px 4px !Important;
 background-color:white;
 */
 
 max-width: 100%; width: 25em; height:auto;
}
 
 .bordersimplelargeforsearch
{
 /* This centers the image */
 display: block;
 margin:0.5em 0em 0.5em 0em;
 padding:0;
 border-radius: 1.0em; 
 
 /* This adds the border */
 /* MOBILE EXCLUSION 
 padding:0.5em;
 border:solid;
 border-color: #00BFFF #104E8B #104E8B #00BFFF;
 border-width: 4px 8px 8px 4px !Important;
 background-color:white;
 */
 
 max-width: 100%; width: auto; height:8em;
}
 
 
 
 
 
.borderthumbnaillight
{
 /* This centers the image */
 display: block;
 margin:0;
 padding:0;
 
 /* This adds the border */
 /* MOBILE EXCLUSION 
 padding:0.5em;
 border:solid;
 border-color: #00BFFF #104E8B #104E8B #00BFFF;
 border-width: 0.3em 0.7em 0.7em 0.3em !Important;
 background-color:white; 
 */

 /* Display size for thumbnail - elsewhere in DisplayThumbnail css class */
  max-width: 100%; width: 7.5em; height:10.5em;
 }
 
 .borderthumbnaildark {display: block;
 margin:0;
 /* MOBILE EXCLUSION 
 padding:0.5em;
 border:solid;
 border-color: #EAED0B #A8AA08 #A8AA08 #EAED0B;

 border-width: 0.3em 0.7em 0.7em 0.3em !Important;
 background-color:white;
 */
 
 /* Display size for thumbnail - elsewhere in DisplayThumbnail css class */
 max-width: 100%; width: 7.5em; height:10.5em;}


.borderdarklarge
{
 /* This centers the image */
 display: block;
 margin:5.5em 0em 1em 0em;
 border-radius: 1.0em;
 /* This adds the border */
 /* MOBILE EXCLUSION 
 padding:8px;
 border:solid;
 border-color: #EAED0B #A8AA08 #A8AA08 #EAED0B;
 border-width: 4px 8px 8px 4px !Important;
 background-color:white;
 */

 max-width: 100%; width: 25em; height:auto;
 }
 
.detailimage
{
 /* This centers the image */
 display: block;
 margin-left: auto;
 margin-right: auto;
 
 /* This adds the border */
 padding:8px;
 border:solid;
 border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
 border-width: 1px 2px 2px 1px !Important;
 background-color:white;

 /* Display size for thumbnail - elsewhere in DisplayThumbnail css class */
  max-width: 10em; max-height: 12em;
  width:auto; height:12em;
 }

/* Image popup used on this page -----------------------------*/
/* See Copyright notice at end of CSS */

a.show .containerLarge {position:fixed; left:-999px; top:-999px; }
a.show .containerLargeRight {position:fixed; left:-999px; top:-999px; }
a.show .containerLargeRightDesign {position:fixed; left:-999px; top:-999px; }

.containerLarge {overflow:hidden; float:left; border-width:20px; border-color: #000000;}
.containerLargeRight {overflow:hidden; float:left; border-width:20px; border-color: #000000;}
.containerLargeRightDesign {overflow:hidden; float:left; border-width:20px; border-color: #000000;}

a.show:hover {position:relative;}
/* Position the pop-up image (was left 156 top 2) */
a.show:hover .containerLarge {z-index:100; left:10px; top:10px; overflow: hidden;}
a.show:hover .containerLargeRight {z-index:100; left:90em; top:1em; overflow: hidden;}
a.show:hover .containerLargeRightDesign {z-index:100; left:40em; top:1em; overflow: hidden;}

/* Data Pager CSS */

a.pagerButton:hover{background-color:#c9dde9;border:1px solid #c9dde9;border-radius:3px;text-decoration:none;font-size:70%;}
a.pagerButton{background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:3px;text-decoration:none;font-size:70%;}
/* !important necessary because an inline style is inserted with font and I need to overide size (font face looks sufficiently similar) */
.pagerButtonCurrent{background-color:#FFFFFF;border:1px solid #FFFFFF;border-radius:3px;text-decoration:none;font-size:70% !important;}

/* WFEventDates.aspx  */

/*        Set a anchor style because the headings are actually links */
.GridViewListOfEventsStyleHeader 
{ color: blue; font-weight: bold; font-size: 0.5em;}

.GridViewListOfEventsStylePager
{ color: blue; font-weight: bold; font-size: 0.5em;}      

.GridViewListOfEventsStyle
{ font-weight:normal; font-size: 0.8em;}

/* also WFReferenceBooks.aspx */

/* Set a anchor style because the headings are actually links */
.GridViewListOfBooksStyleHeader 
{ color: blue; font-weight: bold; font-size: 0.65em;}

.GridViewListOfBooksStyleHeaderAlignLeft 
{ color: blue; font-weight: bold; font-size: 0.65em; text-align:left;}

.GridViewListOfBooksStylePager
{ color: blue; font-weight: bold; font-size: 0.65em;}

.GridViewListOfBooksStyleRow
{ font-weight: bold; font-size: 0.65em; text-align:left;}

.GridViewListOfBooksStyleRowAlignLeft
{ font-weight: bold; font-size: 0.65em; text-align:left;}

.CssCenter
{ text-align: center; }

 .GridViewListOfBooksStyle
 {Width: 100%;
   }
   
 .GridViewListOfItemsForBookStyle
 {Width: 100%;
   }
   
.TransparentImage
{ width:40px; height:40px; font-weight:bold; 
    }
  
/* WFCommemorationTown.aspx ------------------------------- */

.popupwindow
{ width:15em; height:15em; overflow:auto; }
.popupwindowimage
{ width:5em; height:7em; overflow:hidden; }


.pottery_bar
{ width:500px; height:446px; overflow:auto; }
.town_bar
{ width:500px; height:446px; overflow:auto; }
.markerList_bar
{ width:500px; height:446px; overflow:auto; }
.map
{ width:500px; height:414px; padding:0; border:solid 1px black; }
.descriptiveTextTown
{ width:350px; font-weight: bold; font-size: 1.5em; }
.descriptiveTextPottery
{ width:350px; font-weight: bold; font-size: 1.5em; }
.descriptiveTextForMaps
{ width:350px; font-weight: normal; font-size: 1em; }
.descriptiveTextMaker
{ width:500px; font-weight: bold; font-size: 1.5em; }
.descriptiveTextVendor
{ width:500px; font-weight: bold; font-size: 1.5em; }
.descriptiveTextMap
{ width:500px; font-weight: normal; font-size: 1em; }

/* WFDesignView.aspx -----------------------------------*/

.DesignRow
{
    Width: 100%;
    Vertical-align: Top;
}

.DesignCell
{
    Width: 10%;
    Vertical-align:text-top;
    Text-align:center;
}

/* WFEventDates.aspx -----------------------------------*/
.borderthumbnaileventdates
{
 /* This centers the image */
 display: block;
 margin:0;
 padding:0;
 max-width: 100%; width:auto; height:12em;
 }

/* WFHAPMembershipAdmin.aspx -----------------------------------*/

.GridViewHAPMembershipAdminStyle
{ font-weight:normal; font-size: 0.7em;}

/* WFHAPReport.aspx -----------------------------------*/
.HAPText
{ font-family: Verdana; font-weight: normal; font-size: 0.7em; }


/* WFMonarchs -----------------------------------------------*/

.MonarchsCentredAndBold
    { text-align: Center; font-size: 1.2em; }
.bold
{ font-weight: bold; }

/* WFReferenceBooks -----------------------------*/
/* See Copyright notice at end of CSS */

a.popup .largeImage {position:fixed; left:-999px; top:-999px; }

.largeImage {overflow:hidden; float:left; border-width:20px; border-color: #000000;}

a.popup:hover {position:relative;}

a.popup:hover .largeImage {z-index:100; left:10px; top:10px; overflow: hidden;}

/* WFRegister.aspx -------------------------------------------*/
/* Also on WFSearch.aspx and Unused pages */
.failureNotification
{ background-color:yellow; color: Red; text-align:right; width: auto; font-size:0.7em;}

.inputcellwidth
{ width: 10em; }

.labelcellwidth
{ width: 5em; }

/* WFSearch -------------------------------------------------*/

#SearchTable
{ height: 156px; }

.searchButton { width:94px; height:34px; display:block; background-color: transparent; 
                border-style: none; }

col.SearchTableColumn1 { width: 16em;}
col.SearchTableColumn2 { width: 10em;}
col.SearchTableColumn3 { width: 8em;}
col.SearchTableColumn4 { width: 20em; text-align:left;}
col.SearchTableColumn5 { width: 5em;}

.fontBlack {color: #000000;}

.fontBlackBoldUnderline 
{
    color: #000000;
    font-weight: bold;
    text-decoration: underline;
}

.fontBlackMedium {color: #000000; font-size:90%;}

.fontRedBoldItalic 
{
    color: Red;
    font-weight: bold;
    font-style: italic;
}

.smallerFont {font-size:80%;}


/* WFBeakerShapeSearch ------------------------------------------------------------*/
.beakerShapeImage
{
    width: 0.2em;
    height: 0.5em;
}

/* TEST PAGES ------------------------------------------------------------*/

col.TableColumn {width: 25%;}
.fontBold {font-size:80%;}
.fontBlackSmall {color: #000000; font-size:80%;}
.tableAligntop {vertical-align: top;  padding: 1em;}



/* Unused pages --------------------------------------------*/
.submitbutton
{
    text-align: right;
    padding-right: 10px;
}
.loginDisplay a:hover
{
    color: white;
}
.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}
.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}
.clear
{
    clear: both;
}

/* Paging UI >>>>>>>>>>>>>>>>>>>>>>>>>>>>> OLD CODE
a.pagerButton, a.pagerButton:visited
{
    border: solid 0.07em #0000FF;
    color: #600;
    padding: 0.1em;
    text-decoration: none;
}

a.pagerButton:hover
{
    background-color:yellow;
    border: solid 0.07em #0000FF;
    color: Black;
}

.pagerButtonCurrentPage
{
    background-color:yellow;
    border: solid 0.07em #a00;
    color: White;
    text-decoration: none;
    padding: 0.1em;
    
}

.pagerButtonDisabled
{
    border: none;
    color: #999;
    padding: 0.07em;
}


*/









/* FORM ELEMENTS   UNUSED
----------------------------------------------------------*/

/* fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
} 

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}
*/

/* ================================================================ 
This copyright notice must be untouched at all times.
 
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/fast-enlarge.html
Copyright (c) 2005-2010 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

  
    
    /* GUIDE

<style type="text/css">

#span
{
    color:#ff0000;
}

.span
{
    color:#ff0000;
}

span
{
    color:#ff0000;
}

td span
{
    color:#ff0000;
}

.someclass span
{
    color:#ff0000;
}

.someclass .anotherclass htmlElementName #span
{
    color:#ff0000;
}

</style>

What are they?

1 - if you use like  '#span', style will be applied to all html elements whose client id is 'span' ex: <label id="span">bla bla</label>

2 - if you use like '.span', style will be applied to all html elements whose class attribute is 'span' : 
          ex: <label class="span">bla bla</label>  or
          <asp:label cssclass="span">bla bla</asp:label>

3 - if u use like 'span', style will be applied to all span elements in document ex: <span>bla bla</span>

4 - if you use like 'td span', style will be applied to all span elements whose recursive parent elements contains a td element. ex : <table><tr><td><div><span>bla bla</span></div></td></tr></table>

5 - if you use like '.someclass span', style will be applied to all span elements whose recursive parent elements contains a element with class attribute setted to "someclass". ex: <div class="someclass"><ul><li><span>bla></li></ul></div>

You can define new selectors in one line :

.classname . anotherclassname td #container div img
{
}

This selector's search story like:

Find any elements in document whose class attribute is setted to 'classname'

Then, Find any child elements in previous founded elements whose class attr is setteded to 'anotherclassname'

Then, Find any child elements in previous founded elements whose tagname is TD

Then, Find any child elements in previous founded elements whose id attribute is setted to 'container'

Then, Find any child elements in previous founded elements whose tag name is DIV

Then, Find any child elements in previous founded elements whose tag name is IMG and apply the rule

 

And also you can define an attribute

Example:

input[type=text]
{
   color:red;
}

.privateInputClass[type=submit]
{
   color:green;
}

<input type="text" id="input1" />

<input type="password" id="input2" />

<input type="submit" id="input3" />

<input type="submit" class="privateInputClass" id="input4" />

<input type="button" class="privateInputClass" id="input5" />

<input type="text" class="privateInputClass" id="input6" /> 

in this example: Input1 color is red, Input2 color is default, Input3 color is default, input4 color is green, input5 color is default, input6 color is red
 --------------------------------------------------------------*/