/* 
File: Positioning.css
Purpose: Common place for positioning related styling rules.
Created: 2013-Mar-08
*/

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

fieldset
{
    padding: 0.5em;
}

fieldset label.inline 
{
    display: inline;
}


legend 
{
    padding: 2px 4px 8px 4px; 
    margin: 20px 0px 5px 10px;
}

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

.header
{    
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.main
{
	position:relative;
    margin: auto;
}

#headerLogo
{
    margin-left: 20px;
}


/* Side-by-side alignment */

.SideBySideBlockLevel
{
    display: inline-block;
    vertical-align: top; 
    margin-top: 10px;
    margin-bottom: 30px;
}

/* Side by side alignment - vertical centering */

.SideBySideBlockLevel2
{
    display: inline-block;
    vertical-align: middle; 
}


/* ACCOUNT INFO   
----------------------------------------------------------*/

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

input.passwordEntry, input.textEntry 
{
    border: 1px solid #ccc;
}

input.singleColumnTextEntry
{
    border: 1px solid #ccc;
    width: 200px;
}


/* POSITIONING OF SPECIFIC CONTROLS.
----------------------------------------------------------*/

div.ServiceInformation 
{
    margin: 0 2em; 
}

div.ServiceInformation h1, div.ServiceInformation h2,  div.ServiceInformation h3
{
    margin: 1em 0;
}

div.ServiceInformation ol, div.ServiceInformation ul
{
    margin: 1em 0;
}

.RadMenu
{
    z-index: 1 !important;
}

#RotatorText
{
    margin-top: 100px;
}


/* 
    The following two rules work together to vertically align text in tile title area. 
*/
div#ListViewItemAlignment
{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* 
    Vertical spacing for the rotating text in the tiles. 
*/

div#RotatingMessage 
{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/*
    Legends for details tables such as those in Welcome.aspx are padded as follows.
*/

legend.Detail 
{
     padding: 5px; 
}

/*
    By wrapping buttons in <P> elements, and setting class to submitButton, it moves the buttons over to the right.
*/

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

/*
    Quicklinks items place their bullets too far to the left. This rule compensates.
*/

div#QuickLinkDiv li
{
    margin: 1em 0 1em 0em;
}

div.HomeRightSidebarBox li
{
    margin-left: 2px;
}

.GuideIcon
{
    height: 100%; 
    width: 100%; 
    margin-left: 10px; 
    background-repeat:no-repeat;
}

.IconTextContainer
{
    height: 100%; 
    width: 65%; 
    margin-left: 60px;
}

.IconTextPositioning 
{
    height: 70%; 
    width: 100%;
}

/* Social media links in the footer. */

.SocialMediaItem 
{
    display: inline-block;
}

.SocialMediaBar img 
{
    float: left;
    margin-right: 10px; 
}


.SocialMediaItemText
{
    vertical-align: middle;
}



/* CONVENIENCE CLASSES FOR COMMONLY USED POSITIONAL STYLING.
----------------------------------------------------------*/


/*
    "clear: both" prevents other elements from floating on both left and right.
*/

.ClearFloating
{
    clear: both;
}

/*
    Vertical padding (small).
*/

.VPadSmall
{
    padding-top: 15px;
    padding-bottom: 15px;
}

/*
    Horizontal padding (small).
*/
.HPadSmalls
{
    padding-left: 10px;
    padding-right: 10px;
}

/*
    Vertical padding (large).
*/

.VPadLarge
{
    padding-top: 10px;
    padding-bottom: 0px;
}

/*
    Horizontal padding (large).
*/
.HPadLarge
{
    padding-left: 25px;
    padding-right: 25px;
}

/*
    Vertical padding (large).
*/

.VPadVerySmall
{
    padding-top: 5px;
    padding-bottom: 5px;
}

/*
    Horizontal padding (large).
*/
.HPadVerySmall
{
    padding-left: 5px;
    padding-right: 5px;
}

/*
    It is common practice to center block level elements as follows.
*/

.CenterBlock
{
    margin: 0 auto;
}

/*
    Aligning vertically is commonly used style.
*/

.VerticalMiddle 
{
    vertical-align: middle;
}

/*
    Aligning text center is commonly used style.
*/

.TextCenter 
{
    text-align: center;
}

/*
    Aligning text left is commonly used style.
*/

.TextLeft 
{
    text-align: left;
}

/*
    Aligning text right is commonly used style.
*/

.TextRight 
{
    text-align: right;
}

/*
    Remove padding entirely.
*/

.NoPadding 
{
    padding: 0px 0px 0px 0px;
}

/*
    Remove margins entirely.
*/

.NoMargin
{
    margin: 0px 0px 0px 0px;
}

.BasicTile
{
    float:left;
    display:table-cell;
    text-align:center;
    vertical-align:middle;   
}

div#LogDiv 
{
    margin: 20px 0 20px 0;
}

.notificationUserControl
{
    padding: 5px 0px 5px 5px;
}

.FloatRight
{
    float: right;
}

/* The CPFS standard alignment for text box labels is left-aligned. */

.LabelAlign
{
    float: left;
    text-align: left;
    margin-left: 20px;
}

/* Some labels need to be right-aligned */

.LabelAlignRight
{
    text-align: right;
    margin-right: 20px;
}

/*
 The following rule is for managing alignment when making extensive use of "float". 
 Particularly when elements are of different sizes, the placement of bottom edges 
 are hard to predict.
*/

.ControlAlignmentDiv     
{ 
    clear: both; width: 100%; 
}

/* 
 Combining the following spacer div rules with the control alignment div, provides a consistent
 way to create white space vertically.
*/

.VerticalSpacerXLargeDiv  
{ 
    height: 80px; 
}

.VerticalSpacerLargeDiv  
{ 
    height: 60px; 
}

.VerticalSpacerMediumDiv  
{ 
    height: 40px; 
}

.VerticalSpacerSmallDiv  
{ 
    height: 15px; 
}

.VerticalSpacerXSmallDiv  
{ 
    height: 5px; 
}