Hi Mike,

If its any help to you here's the css overrides I use for responsive framework skinning and it usually works:

#ControlBar, #ControlBar:before, #ControlBar:after, #ControlBar *:before, #ControlBar *:after,
#ControlBar li, #ControlBar li:before, #ControlBar li:after,
#ControlBar a, #ControlBar a:before, #ControlBar a:after,
.dnn_mact, .dnn_mact:before, .dnn_mact:after, .dnn_mact *:before, .dnn_mact *:after,
.dnn_mact li, .dnn_mact li:before, .dnn_mact li:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.navbar-default .navbar-nav > li > div > ul > li > a, .navbar-default .LoginLink {
color: #ffffff;
}

.navbar-default .navbar-nav > li > div > a:hover,
.navbar-default .navbar-nav > li > div > a:focus,
.navbar-default .navbar-nav > li > div > ul > li > a:hover,
.navbar-default .navbar-nav > li > div > ul > li > a:focus {
  color: #ffffff;
  background-color: #178acc;
}

Regards,

Geoff

Thank you very much for the help, I have made some progress.

The CSS overrides from Geoff fixed my ModuleMove control popup menu.  It also fixed up the Control Panel except I still had black on black text which I fixed with:

#ControlBar a {
    font-size: 13px !important;
    font-family: Arial !important;
    line-height: 18px !important;
    border-bottom: 0;
    padding-bottom: 0px;
    color: #ccc !important;
}
 

I don't use the ControlPanel skin object so my ControlPanel is outside of my main content.  What I would like to be able to do is to use the css provided by "Type and Grids" without modifying it.  It uses an optimized version of Foundation and great care is placed on typography http://www.typeandgrids.com/.  I made my skin and it came real close to working perfectly, it is responsive, most style is fine but some of the styles from default.css are overriding the css from Type and Grids.  So to make it work I have to move some css into the skin.css and add !important. 

 Type and Grids comes with 100 different css files for changing the style, each stylesheet has a name like "hawthorne_type2_color2.css".  So in a perfect world I would just change this

@import url('./css/hawthorne_type4_color3.css');

in the skin.css file to change the look of my site.  This works almost perfect but there are just a few things that go haywire and the only way to fix it so far is to add more styles to the skin.css file which I would rather not have to do as it gets very time intensive.

So here is the markup for my skin, I have it in a div called "wrapper", but I am not sure what to do to my css to isolate my layout from DNN css.

<div class="wrapper">
<div class="top-border"></div>
<div class="row">
	<div class="small-12 medium-12 large-12 small-centered columns">
		<header>		
			<dnn:LOGO runat="server" id="dnnLOGO" />
		</header>
	</div>
	<div class="small-12 medium-12 large-12 small-centered columns">
		<nav>
            
		    <dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>
            
        </nav>
	</div>
</div>
<div class="row" id="ResponsiveOne" runat="server"></div>
<div class="row" id="ContentPane" runat="server"></div>
<div class="row">
   <div class="small-12 medium-3 large-3 columns" id="Left3" runat="server"></div>
   <div class="small-12 medium-9 large-9 columns" id="Right9" runat="server"></div>
</div>
<div class="row">
   <div class="small-12 medium-9 large-9 columns" id="Left9" runat="server"></div>
   <div class="small-12 medium-3 large-3 columns" id="Right3" runat="server"></div>
</div>
<div class="row">
   <div class="small-12 medium-4 large-4 columns" id="Left4" runat="server"></div>
   <div class="small-12 medium-4 large-4 columns" id="Mid4" runat="server"></div>
   <div class="small-12 medium-4 large-4 columns" id="Right4" runat="server"></div>
</div>
<div class="row" id="ResponsiveTwo" runat="server"></div>
<div class="row">
   <div class="small-12 medium-6 large-6 columns" id="Left6" runat="server"></div>
   <div class="small-12 medium-6 large-6 columns" id="Right6" runat="server"></div>
</div>
<div class="row" id="ResponsiveThree" runat="server"></div>
<div class="row">
	<div class="small-12 medium-12 large-12 columns">
		<footer>
		    <ul>
                <li><dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" /></li>
                <li><dnn:PRIVACY runat="server" id="dnnPRIVACY" /></li>
                <li><dnn:LOGIN runat="server" id="dnnLOGIN" /></li>
                <li><dnn:USER runat="server" id="dnnUSER" /></li>
                <li><dnn:TERMS runat="server" id="dnnTERMS" /></li>
            </ul>
			<div class="social-icons" id="SocialLinks" runat="server">
				
			</div>
		</footer>
	</div>
</div>
</div>

Thank you very much Timo, I am making very good progress now.  Too bad it takes so much effort to stop all the css from fighting.  Nature of the beast I suppose.  I put your wrapper code into the skin.css.  I am hoping I don't have to modify the type and grids css, because they are 5000 lines each.

 So once I get this debugged, I will just need to make a skin file for each colour/style combination.  Much more work than I hoped, but not so bad once I get it all figured out and commented.

 Mike