/* ================================
    CSS STYLES FOR Tutorial Skin 
        by joie@my-asp.net
     http://portals.my-asp.net
   ================================
*/

/* The slashes and stars comment out the line and are not read as code by the page. */
/* Follow the naming conventions displayed in each class:
.name
{

attribute:unit;

}
*/

/*SKIN BORDER CONTAINER */

/* Uses the 7 jpeg graphics contained in the Tutorial Folder. */

/* You can control the percent of the screen you want to display */
.skin-border-container
{
    height: 95%;
    width: 95%;
}

/* The size of the border padding is 4 pixels in all directions
surrounding the graphic. You can change this or simply delete it. */
/* If you are making a border around your page, name the graphics the same
names as in the tutorial skin and then you won't have to change the names here.*/
/* Other padding examples you may want to use are listed below and pad only in
the direction specified.*/
.skin-border-top-left
{
    padding: 4px; /*padding-bottom:4x;*/ /*padding-left:4x;*/ /*padding-right:4x;*/ /*padding-top:4x;*/
    background-image: url(border-top-left.jpg);
    background-repeat: no-repeat;
}

/* This graphic repeats itself across the top of the page.*/
.skin-border-top-tile
{
    padding: 4px;
    width: 100%;
    background-image: url(border-top-tile.jpg);
    background-repeat: repeat-x;
}
.skin-border-top-right
{
    padding: 4px;
    background-image: url(border-top-right.jpg);
    background-repeat: no-repeat;
}

/* This graphic repeats itself down the right of the page.*/
.skin-border-right-tile
{
    height: 100%;
    padding: 4px;
    background-image: url(border-right-tile.jpg);
    background-repeat: repeat-y;
}
.skin-border-bottom-right
{
    padding: 4px;
    background-image: url(border-bottom-right.jpg);
    background-repeat: no-repeat;
}

/* This graphic repeats itself across the bottom of the page.*/
.skin-border-bottom-tile
{
    padding: 4px;
    width: 100%;
    background-image: url(border-bottom-tile.jpg);
    background-repeat: repeat-x;
}
.skin-border-bottom-left
{
    padding: 4px;
    background-image: url(border-bottom-left.jpg);
    background-repeat: no-repeat;
}

/* This graphic repeats itself down the left of the page.*/
.skin-border-left-tile
{
    height: 100%;
    padding: 4px;
    background-image: url(border-left-tile.jpg);
    background-repeat: repeat-y;
}
/* End of skin border container.*/

/* PORTAL BANNER */

/* Make your banner sizes in a picture editor the same width and height that are below.
This banner is at 800 pixels so that the 800X600 users can see the whole screen. You
can change the width and height of your banner and enter the unit numbers below.
Save your banner as PortalBanner.gif*/
.PortalBanner
{
    width: 800;
    height: 110;
    background-image: url(PortalBanner.gif);
    background-repeat: no-repeat;
}

/* This repeat is used for 1024px users that come to your page. It repeatedly adds a gif to fill up the
right hand side of the page. Take a width of 1 or more pixel gif on the right hand side of your
banner. The height must match your height in PortalBanner.*/
/* Save as PortalBannerRepeat.gif */
/* I do not use this class in the tutorial skin because the banner is white and the background is white
so the space will fill up with white. */
.PortalBannerRepeat
{
    width: 100%;
    height: 110;
    padding: 0;
    background-image: url(PortalBannerRepeat.gif);
    background-repeat: repeat-x;
}
/* End of Portal Banner */

/*--------- dnn menu style ----------*/
/* main menu td */
.main_dnnmenu_bar
{
    width: 100%;
    height: 40;
    padding: 0;
    background-image: url(Images/menu_padding.png);
    background-position: right bottom;
    background-repeat: repeat-x;
    white-space: nowrap;
}

/*  Main Menu Normal  */
.main_dnnmenu_rootitem
{
    color: #006666;
    background: url(./images/menu.gif) repeat-x bottom left;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    padding-right: 6px;
    padding-left: 6px;
    padding-bottom: 12px;
    padding-top: 12px;
    margin-right: 3px;
    margin-left: 3px;
    white-space: nowrap;
    float: left;   
}

 .IconHidden 
 {
    display: none;
 }

/*  Main menu hover  */
.main_dnnmenu_rootitem_hover
{
    color: #990000;
    background: url(./images/menu.gif) repeat-x bottom left;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    padding-right: 6px;
    padding-left: 6px;
    padding-bottom: 12px;
    padding-top: 12px;
    margin-right: 3px;
    margin-left: 3px;
    white-space: nowrap;
    float: left;
}

/*  Main menu selected  */
.main_dnnmenu_rootitem_selected
{
    color: #ff0066;
    background: url(./images/menu_active1.gif) repeat-x bottom left;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    padding-right: 6px;
    padding-left: 6px;
    padding-bottom: 12px;
    padding-top: 12px;
    margin-right: 3px;
    margin-left: 3px;
    white-space: nowrap;
    float: left;
}

.main_dnnmenu_leftseperator
{
    margin-right: 0px;
    margin-left: 0px;
    white-space: nowrap;
    background: url(./images/menu_left_edge.png) bottom left;
    padding-bottom: 12px;
    padding-top: 12px;
    padding-right: 0px;
    padding-left: 0px;
}

.main_dnnmenu_rightseperator
{
    margin-right: 0px;
    margin-left: 0px;
    white-space: nowrap;
    background: url(./images/menu_right_edge.png) bottom right;
    padding-bottom: 12px;
    padding-top: 12px;
    padding-right: 0px;
    padding-left: 0px;
}

.main_dnnmenu_leftseperator_selected
{
    margin-right: 0px;
    margin-left: 0px;
    white-space: nowrap;
    background: url(./images/menu_active_left_edge.png) bottom left;
    padding-bottom: 12px;
    padding-top: 12px;
    padding-right: 0px;
    padding-left: 0px;
}

.main_dnnmenu_rightseperator_selected
{
    margin-right: 0px;
    margin-left: 0px;
    white-space: nowrap;
    background: url(./images/menu_active_right_edge.png) right bottom;
padding-bottom:12px;
padding-top:12px;
padding-right:0px;
padding-left:0px;
}

/* MAIN MENU CONTAINER */

/* Displays a 16px container across the top of the page. */
/* You can add a background color instead of transparent here.
You can also add a border by changing the 0px to 1px or
change the border colors. */
/* Don't change or delete the names of the main menu container as
these are reserved and used by DNN. */
.MainMenu_MenuContainer
{
    background-color: silver;
    height: 30px;
}

/* changes the cursor when pointing at the menu bar */
.MainMenu_MenuBar
{
    cursor: pointer;
    font-size: 11px;
    background-color: #ccffff;
    width: 970px;
    height: 30px;
}

/* Displays Home and Admin and others you add on the top tabs. */
/* Change the fonts and font color here. */
.MainMenu_MenuItem
{
    background-color: aqua;
    border-right: blue solid;
    border-top: blue solid;
    border-left: blue solid;
    border-bottom: blue solid;
}

/* Displays the icons on the left hand side of the dropdown menu. */
.MainMenu_MenuIcon
{
    background-color:Lime;
    border: 4 thin black;
    display:none;
    visibility:collapse;
}

/* Filter shows a 1 pixel border on the right and bottom portion of the submenu. */
/* Background color for the submenu is located here. */
.MainMenu_SubMenu
{
}

/* Displays a bar between submenu items indicating separate categories or sections. */
.MainMenu_MenuBreak
{
}

/* Changes the display of the menu item when hovered by a user. */
.MainMenu_MenuItemSel
{
    border-right: lime thin solid;
    border-top: lime thick solid;
    border-left: lime thin solid;
    margin: 4px 3px 3px;
    background-color: red;
}

/* Displays the arrows pointing to submenus. */
/* This actually a box to the right of the sub-menu item */
.MainMenu_MenuArrow
{
}

.MainMenu_RootMenuArrow
{
}
/*End of Menu Container*/


/* TOPBAR LINKS */

/* Used to control the look of date, breadcrumb, user login and profile.*/
.Date
{
    font-family: Verdana, tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 16;
    color: #8b8df6;
    background-color: transparent;
    padding-right: 15;
    padding-left: 5;
}

/* Breadcrumb represents the page name you are on.The breadcrumb is displayed */
/* when the user chooses an item from the submenu.*/
/* To change the visited below: */
/* Cut A.Breadcrumb:visited,*/
/* Paste it under .Breadcrumb:hover after the closing curly bracket.*/
/* Copy the .Breadcrumb styles including the curly brackets.*/
/* Paste the styles under A.Breadcrumb:visited,*/
/* Delete the , in A.Breadcrumb:visited,*/
/* Change the colors or fonts.*/
.Breadcrumb, A.Breadcrumb:link, A.Breadcrumb:visited, A.Breadcrumb:active
{
    color: #8b8df6;
    font-weight: bold;
    font-size: 8pt;
    height: 16;
    font-family: Verdana,Tahoma,Arial, Helvetica;
    text-decoration: none;
    background-color: transparent;
}

A.Breadcrumb:hover
{
    color: #000000;
    text-decoration: underline;
}

/* Font colors etc. for the menu items.*/
.TopBarlinks, A.TopBarlinks:link, A.TopBarlinks:active
{
    font-family: Verdana, tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 16;
    color: #8b8df6;
    background-color: transparent;
    border: none;
    /* overflow:scroll */
}

A.TopBarlinks:visited
{
    color: #000000;
    border: none;
}

A.TopBarlinks:hover
{
    color: #000000;
}
/* End of TopBar Links */


/* PANE STYLES */

/* These are the pane styles for this skin. */
/* The default class names are located in your Portal under Site Settings - Edit stylesheet.*/
/* By adding a background color of white to the panes I override the default class names in the
user's stylesheet. */
.LeftPane
{
    background-color: White;
}

.ContentPane
{
    background-color: White;
}

.RightPane
{
    background-color: White;
}

/* BODY STYLES */

/* These are the body styles for this skin. */
/* The default Body class name is located in your Portal under Site Settings - Edit stylesheet. */
/* The first eight styles control the scrollbar colors. */
/* The background color is made white to override the user's stylesheet. */
/* The padding is 5 pixels from the top of the page. */
Body
{
    background-color: White;
    padding-top: 5;
}

/* Title is used for the container(s). */
/* Changing this changes the title style in the module. */
.Title
{
    font-family: Tahoma, Arial, Helvetica;
    font-size: 20px;
    font-weight: normal;
    color: Black;
}
/* End of Body Styles. */


/* FOOTER */

/* The Footergif class name displays a background image called footer.gif.
This gif is located inside your Tutorial Folder. */
.Footergif
{
    font-weight: normal;
    font-size: 8pt;
    color: #8b8df6;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
    height: 20px;
    width: 100%;
    background-image: url(footer.gif);
    background-repeat: repeat;
}

/* Used to display the fonts, colors and padding for the footer links. */
.Footer
{
    font-weight: normal;
    font-size: 8pt;
    color: #8b8df6;
    background-color: Transparent;
    font-family: Tahoma, Arial, Helvetica;
    text-decoration: none;
    border: none;
    padding-left: 5px;
    padding-right: 5px;
}

A.Footer:link, A.Footer:visited, A.Footer:active
{
    font-weight: normal;
    font-size: 8pt;
    background-color: Transparent;
    text-decoration: none;
    border: none;
    color: #8b8df6;
}

A.Footer:hover
{
    text-decoration: none;
    border: none;
    color: #000000;
    background-color: Transparent;
}
/* End of footer. */

/*  SUB Menu hover & selected */
.main_dnnmenu_itemhover td
{
    background: #CE0D0D url(../images/submenu_hover.gif) repeat-x top left;
    color: #ffffff;
}
.main_dnnmenu_itemselected td
{
    background: #CE0D0D url(../images/submenu_active.gif) repeat-x top left;
    color: #ffffff;
}

.main_dnnmenu_break
{
    height: 2px;
    background-color: #D5E0FF;
}

/* Module Action Menus */
.ModuleTitle_SubMenu
{
    border: 1px solid #C0D6E5;
}

.ModuleTitle_SubMenu td
{
    background-color: #F8FAFF;
    white-space: nowrap;
}

.ModuleTitle_MenuIcon
{
    background-color: #F8FAFF;
    border: none;
    padding: 0px 2px;
}

.ModuleTitle_MenuItemSel td, .ModuleTitle_MenuItemSel .ModuleTitle_MenuIcon
{
    background: #CE0D0D url(../images/submenu_hover.gif) repeat-x top left;
    color: #fff;
}

.ModuleTitle_MenuBreak td, .ModuleTitle_MenuBreak .ModuleTitle_MenuIcon
{
    height: 2px;
    background-color: #D5E0FF;
}

#menuwrapper img {display:none;}