@import url ("~/CSS/LayoutStyleSheet.css");

/* CONTENT CONTAINER - ONE COLUMN 
for forms using the whole page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-one-column {
    margin-left:auto;
    margin-right:auto;
    width:758px;
    border-left: solid 1px #0066CC;
    border-right: solid 1px #0066CC;
    border-bottom: solid 1px #0066CC;
    background:#f4faff;
    position:relative;
    }
    
#content-form {    
    width:748px;
    padding:0 5px 0 5px;    
    }

/* CONTENT CONTAINER - ONE COLUMN 
for forms email confirmation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#content-container-one-column-confirm {
    margin-left:auto;
    margin-right:auto;
    width:758px;
    border-left: solid 1px #0066CC;
    border-right: solid 1px #0066CC;
    border-bottom: solid 1px #0066CC;
    background:#f4faff;
    position:relative;
    }
    
#content-form-confirm {
    width:748px;
    padding:0 5px 0 5px;
    }

/* CONTENT CONTAINER - TWO COLUMN
used in all information pages with 
GENERAL PAGE - ONE COLUMN as a child 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-two-column {
    margin-left:auto;
    margin-right:auto;
    width:758px;
    border-left: solid 1px #0066CC;
    border-right: solid 1px #0066CC;
    border-bottom: solid 1px #0066CC;
    background:url(../../Images/Two-column-one-colour.gif) repeat-y;
    position:relative;
    }
    
#content-menu-two-column {    
    margin-right:638px;
    width: 110px;
    font-size:small;
    padding: 5px;
    position:absolute;
    top:0px;
    left:0px
}

#content-main-two-column {
    margin-left:120px;
    width:638px;    
    padding:0;    
    }
    
/* CONTENT CONTAINER - THREE COLUMN
used exclusively in Default.aspx with 
DEFAULT PAGE - TWO COLUMN 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-three-column {
    margin-left:auto;
    margin-right:auto;
    width:758px;
    border-left: solid 1px #0066CC;
    border-right: solid 1px #0066CC;
    border-bottom: solid 1px #0066CC;
    background:url(../../images/three-column-one-colour.gif) repeat-y;
    position:relative;    
    }
    
#content-menu-three-column {
    width:110px;
    font-size:small;
    padding:5px;
    position:absolute;
    top:0;
    left:0;        
    }     
    
#content-right-three-column {    
    width:110px;
    font-size:small;
    padding:5px;
    position:absolute;
    top:0;
    right:0;
    }
    
#content-main-three-column {
    width:518px;
    margin-left:120px;
    margin-right:120px;      
    }

/* CONTENT TITLE 
this is the title bar of each page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-title {
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    padding:3px;
    border-top: solid 1px #0066CC;
    border-left: solid 1px #0066CC;
    border-right: solid 1px #0066CC;
    width:752px;
    background:#99CCFF;
    position:relative; 
    font-family:Verdana, Arial, Helvetica, Sans-Serif;  
    font-size:medium;
    font-style:italic;
    font-weight:bold;     
    }
           
/* DEFAULT PAGE - TWO COLUMN 
placed in centre column of CONTENT CONTAINER - THREE COLUMN
** but only when used for concepts
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

#home-two-column-container {
    margin-left:auto;
    margin-right:auto;
    background:#F4FAFF;
    width:518px;
    position:relative;
    height:900px;
    }
    
#home-left-two-column {
    margin-right:353px;
    width:160px;
    padding:160px 0px 10px 5px;
    position:absolute;
    top:0px;
    left:0px; 
    height:900px;
    background:url(../../Images/ConceptSelectorBg8.jpg) no-repeat;
    }
    
#home-right-two-column {
    margin-left:165px;
    background:#c8e3ff;
    width:343px;
    height:890px;
    padding:0px 5px 10px 5px;    
    }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* DEFAULT PAGE - TWO COLUMN
placed in centre column of CONTENT CONTAINER - THREE COLUMN
used when columns can be equal width - NORMAL
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#home-two-column-container {
    margin-left:auto;
    margin-right:auto;
    background:#F4FAFF;
    width:518px;
    position:relative;
    height:550px; 
    background:url(../../Images/HomePageDivider.jpg) repeat-y;  
    }
    
#home-left-two-column {
    margin-right:259px; /* was 353px */
    width:249px;
    padding:5px;
    position:absolute;
    top:0px;
    left:0px; 
    }
    
#home-right-two-column {
    margin-left:259px;   /* was 165px */
    width:249px;
    padding:5px;
    position:absolute;
    top:0px;
    right:0px;   
    } 
    
    
/* CONCEPTS PAGES - TWO COLUMNS
the left used for buttons and the right for the panel
material
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#concept-two-column-container {
    margin-left:auto;
    margin-right:auto;
    background:#F4FAFF;
    width:638px;
    position:relative;
    height:700px;
    }
    
#concept-left-two-column {
    margin-right:473px;
    width:160px;
    padding:160px 0px 10px 5px;
    position:absolute;
    top:0px;
    left:0px; 
    height:529px;
    background:url(../../Images/ConceptSelectorBg8-700.jpg) no-repeat;
    }
    
#concept-right-two-column {
    margin-left:165px;
    background:#c8e3ff;
    width:463px;
    height:690px;
    padding:0px 5px 10px 5px;    
    }


/* GENERAL PAGE - ONE COLUMN 
placed in right col of CONTENT CONTAINER - TWO COLUMNS 
in all information pages
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#general-one-column-container {
    margin-left:auto;
    margin-right:auto;
    background:#f4faff;
    width:628px;
    padding:5px;
    position:relative;
    /*top: 0px; */
}

/* GENERAL PAGE - TWO COLUMN 
placed in right col of CONTENT CONTAINER - TWO COLUMNS 
as an alternative for Default.aspx
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#general-two-column-container {
    margin-left:auto;
    margin-right:auto;
    background:#F4FAFF;
    width:638px;
    position:relative;
    }
    
#general-left-two-column {
    margin-right:319px;
    width:309px;
    padding:5px;
    }
    
#general-right-two-column {
    margin-left:319px;
    width:309px;
    padding:5px;
    }
    

/* GENERAL PAGE - THREE COLUMN 
placed in right col of CONTENT CONTAINER - TWO COLUMNS
used in creating three mini columns for associated 
pages at the bottom of some TCP's
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#general-three-column-container {
    margin-left:auto;
    margin-right:auto;
    background:#F4FAFF;
    width:628px;    
    background:url(../../images/Three-column-general.jpg) repeat-y;
    position:relative;
    }
    
#general-left-three-column {
    width:203px;
    padding:5px 5px 5px 0;
    position:absolute;
    top:0px;
    left:0px;
    }
    
#general-right-three-column {
    width:203px;
    padding:5px 0px 5px 5px;
    position:absolute;
    top:0px;
    right:0px;
    /* left: 420px; */
}
    
#general-middle-three-column {
    margin-left:208px;
    margin-right:208px; 
    width:202px;
    height:300px;    
    padding:5px 0px 5px 5px;
    }

/* CSS MASTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* HTML TAGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 

body {
    margin:0px;
    background-color:#F4FAFF;
    font-family:Verdana, Arial, Helvetica, Sans-Serif;
    font-size:small;
    line-height:120%;
    text-align:left;
    word-spacing:0;
    color:#000000; 
    }
    
p   {    
    word-spacing:0;
    line-height:120%;
    }
    
/* HEADINGS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

h1, h2, h3, h4, h5, h6 {
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, Sans-Serif;
    line-height:120%;    
    margin-top:0;
    margin-bottom:0; 
    }
    
h1  {
    font-size:x-large;
    }
    
h2  {
    font-size:large;
    font-style:italic;
    }
    
h3  {
    font-size:medium;
    font-style:italic;
    font-weight:normal;
    }
    
h4  {
    font-size:small;
    font-style:italic;    
    }
    
h5  {
    font-size:x-small;
    color:#FF0000;
    }
    
h6  {
    font-size:x-small;
    font-weight:bold;
    }
    
/* LINKS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a:link {
    color: #666666;
    text-decoration: none;
} 
a:visited {color:#666666; text-decoration:none} 
a:hover {color:#FF0066; text-decoration:none}
a:active {color:#999999}

/* HEADER INFORMATION consisting of:
York Consulting Group logo; breadcrumbs;
top drop down navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#header-information {
    height:4.6em;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    color:#F4FAFF;
    font-size:0.8em;
    position:relative;
    width:760px;
    }
    
#logo {
    position:absolute;
    top:0.5em;
    left:0;
    font-size:2.4em;
    font-family:"Times New Roman", Georgia, Times, Serif;
    height:2.8em;
    padding:0.1em;
    font-variant:small-caps;
    }
    
#logo a {
    color:#333366;
    text-decoration:none;
    }
    
#search {
    position:absolute;
    top:0.5em;
    margin-left:400px;
    height:2.8em;
    padding:0.1em;
    width:360px;
    font-size:1.4em;
    font-family:"Times New Roman", Georgia, Times, Serif;
    text-align:right;
    color:#333366;
    }
    
#nav-main {    
    margin-left:auto;
    margin-right:auto;
    background:#99CCFF;
    width:740px;
    padding:0.8em 0 1em 20px;
    position:relative;
    font-weight:normal;
    text-align:center;
    }

#header-breadcrumbs {
    height:12px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3px;
    background:#F4FAFF;
    color:#999999;
    padding:0.4em 0 0.6em 0;
    font-size:xx-small;
    position:relative;    
    width:760px;
    }    

/* FOOTER INFORMATION consisting of 
bottom NAVIGATION and COPYRIGHT
(should put address down their as well)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer-nav {
    margin-left:auto;
    margin-right:auto;
    background:#F4FAFF;    
    width:760px;
    padding:0.4em 0px 0.6em 0px;
    font-size:xx-small;
    text-align:center;
    position:relative;    
    }
    
#footer-copyright {    
    margin-left:auto;
    margin-right:auto;
    background:#99CCFF;
    width:740px;
    padding:10px;
    color:#FFFFFF;
    font-size:xx-small;
    position:relative;
    }
    
/* POSTER PHOTO - Default page only
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#poster-photo-container {
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    width:758px;
    border:solid 1px #0066CC;
    background:#F4FAFF;
    position:relative;
    }
    
.poster-photo-image {
  
    display:block;
    width: 758px;
}   
  
/* IMAGES AND PHOTOS 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
img {
    border:none;
    }
    
.photo-border-orange { 
    display:block;
    margin-bottom:10px;
    border-top:2px solid #FF9966;
    border-right:2px solid #FF6600;
    border-bottom:2px solid #FF6600;
    border-left:2px solid #FF9966;
    }
    
.imgleft-orange {
    margin-right:5px;
    border-top:2px solid #FF9966;
    border-right:2px solid #FF6600;
    border-bottom:2px solid #FF6600;
    border-left:2px solid #FF9966;    
    float:left;    
    }
    
.img-orange {
    border-top:2px solid #FF9966;
    border-right:2px solid #FF6600;
    border-bottom:2px solid #FF6600;
    border-left:2px solid #FF9966; 
    }

    
.photo-border-yellow {
    display:block;
    margin-bottom:10px;
    border-top:2px solid #FFFFCC;
    border-right:2px solid #FFFF00;
    border-bottom:2px solid #FFFF00;
    border-left:2px solid #FFFFCC;    
    }
    
.imgright-yellow {    
    margin-right:5px;
    border-top:2px solid #FFFFCC;
    border-right:2px solid #FFFF00;
    border-bottom:2px solid #FFFF00;
    border-left:2px solid #FFFFCC;    
    float:right;    
    }

.imgleft-yellow {
    margin-right:5px;
    border-top:2px solid #FFFFCC;
    border-right:2px solid #FFFF00;
    border-bottom:2px solid #FFFF00;
    border-left:2px solid #FFFFCC;    
    float:left;    
    }

.photo-border-blue {
    display:block;    
    margin-bottom:10px;
    border-top:2px solid #99CCFF;
    border-right:2px solid #0066CC;
    border-bottom:2px solid #0066CC;
    border-left:2px solid #99CCFF;
    }
    
.imgleft-blue {
    margin-right:5px;
    border-top:2px solid #99CCFF;
    border-right:2px solid #0066CC;
    border-bottom:2px solid #0066CC;
    border-left:2px solid #99CCFF;    
    float:left;
    }
    
.arrow  { 
    vertical-align:middle;
    }

    /* MAIN DROP DOWN MENU ITEM FORMATTING
used as CssClass in drop downs in master page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.menuitemstyle    {     
    border: none;   
    background-color: #F4FAFF;
    padding: 2px 5px 2px 3px;
    color: #F4FAFF;
    text-align: left;   
    line-height:120%;    
    }
    
.menustyle   {     
    border: Solid 1px #FF6600;
    background-color: #F4FAFF;
    color: #F4FAFF; 
    z-index:100;
    }

    /* LEFT MENU BUTTONS 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.menu {
    margin:0px;
    padding:0px;
    list-style:none;
    }

.menu li {
    margin-bottom:3px;
    list-style-type:none;
    }
    
.menu a:link, .menu a:visited {
    display:block;
    background:#f4faff;
    width:auto; 
    border-top:solid 1px #6699FF;
    border-right:solid 1px #0066CC;
    border-bottom:solid 1px #0066CC;
    border-left:solid 1px #6699FF;
    color:#000000;   
    font-size: 8pt;    
    font-family:Tahoma, Arial, Helvetica, Sans-Serif;
    text-align:center;        
    text-decoration:none;
    padding:2px 3px 4px 3px;
    }
    
.menu a:active, .menu a:hover {
    border-top:solid 1px #0066CC;
    border-right:solid 1px #6699FF;
    border-bottom:solid 1px #6699FF;   
    border-left:solid 1px #0066CC;
    background:#99CCFF;
    padding:2px 3px 4px 3px;
    } 

    /* CONTENT PAGE LISTS (ul li)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.ullist    {
    margin-left:40px;
    padding:0px;
    line-height:120%;
    list-style-image:url(Images/ArrowHeadRightRed.jpg);    
    }                                     

    /* FORM REPLY LAYOUT 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.email {
    line-height:100%;
    }

hr {
    color:#99ccff 
    }
    
/* READ-MORE DIVS (for bottom of TCP pages)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#col-top {
    margin:0;
    width:auto;
    text-align:right;
    font-size:small;
    }

#col-right {
    margin:0;
    width:203;
    text-align:right;
    font-size:small;
    
    }
    
#col-left {
    margin:0;
    width:203;
    text-align:right;
    font-size:small;    
    }
    
#col-middle {
    margin:0;
    width:202;
    text-align:right;
    font-size:small;    
    }

/* DEFAULT CONCEPT SELECT BUTTONS 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.button {
    padding-left:3px;
    background:#c8e3ff;
    font-family:Tahoma, Arial, Helvetica, Sans-Serif;
    font-size:8pt;
    color:Black;
    text-align:left;
    border:solid 1px #f4faff;
    width:145px;
    height:27px;
    }

.button:active {
    border:solid 1px #f4faff;
    }
    
.button:hover {
    background:#f4faff;
    border-left:solid 1px #99ccff;
    border-top:solid 1px #99ccff;
    border-right:solid 1px #0066cc;
    border-bottom:solid 1px #0066cc;
    }

/* WIZARD RESULT PAGE 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    
.resultsent {
    position:absolute;
    top:230px;
    left:230px; 
    width:auto;
    border-top:solid 2px #6699FF;
    border-right:solid 2px #0066CC;
    border-bottom:solid 2px #0066CC;
    border-left:solid 2px #6699FF;
    text-align:center;
    padding:15px;   
    font-family:Tahoma, Arial, Helvetica, Sans-Serif;
    color:#0066ff;
    font-size:large;
    }

.resultimg {
    position:absolute;
    top:10px;
    left:220px;
    }

/* TABLE COLUMN DIFFERENTIATORS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.column
    {
     background-color: #C8E3FF;
    }

/* HOVERMENUEXTENDER PANEL LAYOUT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.hoverpanel {
    background:#F4FAFF;
    border-top:1px solid #99CCFF;
    border-right:1px solid #0066CC;
    border-bottom:1px solid #0066CC;
    border-left:1px solid #99CCFF; 
    font-size:small;
    font-family:Tahoma. Arial, Helvetica, Sans-Serif;
    padding:5px;
    }


/* END
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/