﻿

/***************************************
    FORM LAYOUT
***************************************/


/*
.formrow {background:red;}
.formrow label {background:blue;}*/


.form
{
    position:relative;
}
    
    input[type=button],
    input[type=image],
    input[type=radio],
    input[type=checkbox]
    {
        cursor:pointer;
    }

    .form legend
    {
        
    }
.formrow input, .formrow textarea, .formrow select 
{
    float: right;-moz-border-radius: 2px 2px 2px 2px;
    border: 1px solid #999999;
   background: url("skin/req.png") no-repeat scroll right top transparent;
border-style: solid;
    border-width: 1px;
    display: inline;

    padding: 4px 0;
    position: relative;
width: 69%;
font: 99% arial,helvetica,clean,sans-serif;
}
.formrow select {margin-left:12px !important;}
.formrow textarea{ margin-left:12px !important;}
    .form .inner
    {
        zoom:1;
        overflow:hidden;
        padding:10px 0;
    }
        .formrow
        {
            overflow:hidden;
            clear:both;
            padding:8px 10px;
            position:relative;
            zoom:1;
        }
            
            
            
            
            
            .formrow .unit
            {
                position:relative;
            }           
            
            
            .form label,
            .form .label
            {
               /* width:19%;*/
                float:left;
                display:inline;
                /*padding-top:8px;*/
                
                position:relative;
                top:8px;
                
                vertical-align:baseline;
                white-space:nowrap;
                
                /*white-space:nowrap;*/
            }
            
             .top0 {position:relative;top:0 !important;}
             .top6 {position:relative;top:6px !important;}
             .top8 {position:relative;top:8px !important;}
             .pushInputsDown {position:relative;top:8px !important;}
             .top-8 {position:relative;top:-8px !important;}
           
                        
            /*use if label needs space below (e.g. if above wide tinymce window*/
            .form .bottompush
            {
                margin-bottom:4px;
            }
            
            .form .toppush
            {
                margin-top:10px;
            }
            
            .form input.text,
            .form select,
            .form textarea
            {               
                float:left;
                display:inline;      
                border-style:solid;
                border-width:1px;
                padding:4px 0;
                position:relative;
            }
            
            .form textarea 
            {
                height:120px;
            }
            
            .form select
            {
                padding:0;
                height:24px;
                margin:2px 0 0;
            }           
            
            .form .listbox
            {
                height:65px;
            }
            
            .form .listboxTall
            {
                height:115px;
            }
                              
            .formrowinline label,   /*should depreceate this in favour of just adding .inline to inputs*/
            .formrowinline input.text,
            .formrowinline select,
            .formrowinline textarea
            {
                width:auto;
                display:inline;
                float:none;                
            }
            
            .form input.checkbox
            {
                margin-top:8px;
            }
            
           /* .custcheck {top:6px;*top:0;position:relative;}*/
                        
            
            .form .cell{float:left;position:relative;}
            /*remove float:left and use "bit"      fix to w10, w70 etc...??*/
            .w1{width:9%;}
            .w15{width:14%;}
            .w2{width:19%;}
            .w25{width:24%;}
            .w3{width:29%;}
            .w35{width:34%;}
            .w4{width:39%;}
            .w45{width:44%;}
            .w5{width:49%;}
            .w55{width:54%;}
            .w6{width:59%;}
            .w65{width:64%;}
            .w7{width:69%;}
            .w75{width:74%;}
            .w8{width:79%;}
            .w85{width:84%;}
            .w9{width:89%;}
            .w95{width:94%;}
            .w10{width:98%;}       
            
            
            .w1of3 {width:32%;}
            .w2of3 {width:65%;} 
            
            .w1of4 {width:24%;}
            .w2of4 {width:49%;}
            .w3of4 {width:74%;}            
            
            .w1of4 {width:24%;}
            .w2of4 {width:49%;}
            .w3of4 {width:74%;}
            
            .w1of5 {width:19%;}
            .w2of5 {width:39%;}
            .w3of5 {width:69%;}
            .w4of5 {width:79%;}
            
            .bit {float:left;display:inline;}
            #force .inline {float:none;display:inline;}
            
            
            .lastCell {float:right;/*width:auto;*/}
            .lastCell label{text-align:right;position:relative;right:3px;}

            .cell .formrow
            {
                overflow:hidden;
                clear:both;
                padding:8px 2px;
            }
            
            .formrow lastUnit
            {
                text-align:right;
            }
            /*
            .formrow .lastUnit label,
            .formrow .lastUnit input.text,
            .formrow .lastUnit select,
            .formrow .lastUnit textarea
            {
                float:left;
            }*/
            
            .form .formrow .last
            {
                float:right;
            
            }
            
            /*wrap around preceeding £*/
            .form .currency
            {
                margin-left:-8px;
            }
            
            

            
            
        .form .buttons
        {
            text-align:right;
        }
        
            .form .buttons input.text
            {                
                overflow:visible;
                float:none;
            }

        

        .mark
        {
            width:0;
            padding-left:14px;
            height:14px;
            float:left;
            text-indent:-9999px;
            overflow:hidden;  
            cursor:help;
            
            margin-left:3px;
            
            position:relative;
            margin-top:5px;   
            
            zoom:1;
        }
        
        .markAbsolute
        {
            position:absolute;
            right:3px;
            top:12px;
            margin:0;
        }
        
      /*  .helpme .msg
        {
            display:none;
            position:absolute;
            top:0;
            right:0;
            width:200px;
            height:30px;
            background:#000;
            color:#fff;
            z-index:999;            
        }

        .helpme:hover .msg
        {
            display:block;
        }*/






        .RadioButtonList br {clear:both;}
        .RadioButtonList .radio {top:8px;position:relative;}




/***************************************
    FORM SKIN
***************************************/

.form
{
    
}    

    .form input.text,
    .form select,
    .form textarea
    {
        border-color:#b9ae69;
    }
    
        .mark
        {
            background:url(skin/help_yellow.png) -3px -18px no-repeat; 
        }
                    
        
/* TINY MCE */ 

#force .defaultSimpleSkin {float:left;}
#force .defaultSimpleSkin iframe  {border-bottom:solid 1px;}
#force .defaultSimpleSkin .last    {float:none;}

/*skin*/
#force .defaultSkin table,
#force .defaultSimpleSkin table.mceLayout {background:#f8f6e6;}
#force .defaultSimpleSkin table.mceLayout {border-color:#b9ae69;}
#force .defaultSimpleSkin iframe   {border-bottom-color:#b9ae69;}

.defaultSkin table.mceLayout tr.mceLast td {max-width:none;}

#force .tallBox
{
    height:320px;
}



/*extend custom dropdown*/

/*
.newListHover {background:#eee !important;}
ul.newList .hiLite {background:#F2EDCA !important; color:#000 !important;}
ul.newList {margin-left:12px;top:32px;}
.newListSelected {width:285px; color:#000; height:30px; padding:14px 0 0 16px; float:left; background:url(skin/custdrop.png) no-repeat;
                  position:relative; z-index:3;}
.newListSelHover, .newListSelFocus {background-position:0 -45px; cursor:default;}
ul.newList li,ul.newList a{text-align:left;float:none;}


.head  .selectedTxt{width:145px;padding-right:29px;text-align:left;}
.head  .newListSelected {width:185px;margin-top:-10px;position:relative !important;}*/


/*
.custdropWide  .selectedTxt{width:339px;}
.custdropWide .newListSelected {width:385px;background-image:url(skin/custdrop_wide.png);margin-left:-10px !important;}
.custdropWide ul.newList{width:364px; top:32px !important;}
.custdropWide{*left:-12px;}*/
/***************************************
    Validation
***************************************/
.req
{
    color:#D42027;
    font-weight:bold;
}

#force input.required,
#force textarea.required,
#force select.required,
#force .required .defaultSimpleSkin table.mceLayout 
{
    
}

#force .requiredhide
{
    /*no style needed*/
}

#force input.invalid,
#force textarea.invalid,
#force select.invalid,
#force .invalid .defaultSimpleSkin table.mceLayout,
#force .invalid .defaultSkin table.mceLayout
{
    box-shadow:0 0 4px #F77F83;
    -moz-box-shadow:0 0 4px #F77F83;
    -webkit-box-shadow:0 0 4px #F77F83;
    border-color:#d62027;
}

#force .invalid .defaultSkin table.mceLayout
{
    border-top:solid 1px #d62027;
    border-bottom:solid 1px #d62027;
}



#force .form .inputHighlight 
{
    background:#fff;
    box-shadow:0 0 5px #000; /*animate this*/
    -moz-box-shadow:0 0 5px #000;
    -webkit-box-shadow:0 0 5px #000;
    border-color:#D42027;                                   
}