CSS code completely fouled up by CSS designer

Question

I'm having a bunch of bugs with Dreamewaver CC. Inserting images in code view or in design view always places them in the wrong place. For example inserting an image using Cmnd/Ctrl + Alt/Option + i with the cursor placed before paragraph 1 will insert the image after the last paragraph in the document or some other random place in the page. The only thing that kind of works is that the insert stays in the right div.
That's not the worst of it. I made a few edits to a fluid layout using the new CSS design panel and all of the line feeds and line breaks have dissapeared making the code extremely hard to read, troubleshoot and edit. Has anyone seen this?
Here's what the code looks like now:
@charset "UTF-8";
/* Simple fluid media   Note: Fluid media requires that you remove the media's height and width attributes from the HTML   http://www.alistapart.com/articles/fluid-images/ */
img, object, embed, video {          max-width: 95%;          margin-left: auto;          margin-right: auto;          display: block;}/* IE 6 does not support max-width so default to width 100% */.ie6 img {          width:100%;          }/*          Dreamweaver Fluid Grid Properties          ----------------------------------          dw-num-cols-mobile:                    4;dw-num-cols-tablet:                    8;dw-num-cols-desktop:          14;dw-gutter-percentage:          15;Inspiration from "Responsive Web Design" by Ethan Marcotte           http://www.alistapart.com/articles/responsive-web-design                    and Golden Grid System by Joni Korpi          http://goldengridsystem.com/*/body {                    background:#333;          }.fluid {                    clear: both;          margin-left: 0;          width: 100%;          float: left;          display: block;          }.fluidList {              list-style:none;          list-style-image:none;          margin:0;          padding:0;          }          /* Mobile Layout: 480px and below. */ .gridContainer {          margin-left: auto;          margin-right: auto;          width: 96.7391%;          padding-left: 1.6304%;          padding-right: 1.6304%;          clear: none;          float: none;}#mainHeader {          width: 100%;          border-bottom: thin dotted #666666;          background-color: #FFFFFF;} #headerHome {          width: 100%;          margin-left: 0;          } #mainTitle {          width: 100%;          margin-left: 0;          clear: both;          display: none;          }#mainNav {          width: 100%;          clear: both;          margin-left: 0;          }#mainNavList {          width: 100%;          margin-left: 0;          }.manNavBtn {          width: 48.3146%;          clear: none;          margin-left: 3.3707%;          }#sideNav {          width: 100%;          background-color: #FFFFFF;          border-bottom-right-radius: 4px;          border-bottom-left-radius: 4px;}#mainArticle {
          width: 100%;
          clear: both;
          background-color: #FFFFFF;
}#adSide {          width: 100%;          clear: both;          margin-left: 0;          background-color: #FFFFFF;}#          mainFooter {}#footer {}.zeroMargin_mobile {margin-left: 0;          }.hide_mobile {display: none;          }/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */@media only screen and (min-width: 481px) {.gridContainer {          width: 93.451%;          padding-left: 0.7744%;          padding-right: 0.7744%;          clear: none;          float: none;          margin-left: auto;          }#          div1 {}#mainHeader {          width: 100%;          border-bottom: thin dotted #666666;          }#headerHome {width: 36.464%;          margin-left: 0;          }#mainTitle {width: 61.8784%;          clear: none;          margin-left: 1.6574%;          display: block;          }#mainNav {          width: 61.8784%;          margin-left: 1.6574%;          clear: none;          float: right;          }#mainNavList {width: 100%;          margin-left: 0;          }.manNavBtn {width: 17.8571%;          margin-left: 2.6785%;          clear: none;          }#sideNav {width: 11.0497%;          }#mainArticle {width: 61.8784%;          margin-left: 1.6574%;          clear: none;          }#adSide {width: 23.7569%;          margin-left: 1.6574%;          clear: none;          }#mainFooter {}#footer {}.hide_tablet {display: none;          }.zeroMargin_tablet {margin-left: 0;          }}/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */@media only screen and (min-width: 769px) {.gridContainer {          width: 94.1149%;          max-width: 1000px;          padding-left: 0.4425%;          padding-right: 0.4425%;          margin: auto;          clear: none;          float: none;          margin-left: auto;          }#div1 {}#mainHeader {width: 100%;          }#headerHome {width: 20.6896%;          margin-left: 0;          }#mainTitle {width: 78.3699%;          clear: none;          margin-left: 0.9404%;          display: block;          }#mainNav {          width: 78.3699%;          clear: none;          margin-left: 0.9404%;          float: right;          }#mainNavList {width: 100%;          margin-left: 0;          }.manNavBtn {width: 17.2%;          clear: none;          margin-left: 1.2%;          }#sideNav {width: 20.6896%;          }#mainArticle {width: 49.5297%;          clear: none;          margin-left: 0.9404%;          }#adSide {width: 27.8996%;          clear: none;          margin-left: 0.9404%;          }#mainFooter {}#footer {}.zeroMargin_desktop {margin-left: 0;          }.hide_desktop {display: none;          }}#mainArticle img {          border: thin solid #333333;          border-radius: 6px;          -webkit-box-shadow: 0px 0px;          box-shadow: 0px 0px;          padding: 5px 5px 8px;          background-color: #E9E9E9;}
Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
Mac, OSX 10.8.4, Dreamweaver 13.0  Build 6391
NOTE: If I use something like Styleneat to clean up this code it seems to break the styles for the Mobile and Tablet layouts and causes Dreamweaver to crash every time I turn on or off the fluid grid layout display.

Answer 1

Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
  mg, object, embed, video  {  max-width : 95%;
margin-left : auto;
margin-right : auto;
display : block;
  .ie6 img  {
width : 100%;
  body  {
background : #333;
  .fluid  {
clear : both;
margin-left : 0;
width : 100%;
float : left;
display : block;
  .fluidList  {
list-style : none;
list-style-image : none;
margin : 0;
padding : 0;
  .gridContainer  {
margin-left : auto;
margin-right : auto;
width : 96.7391%;
padding-left : 1.6304%;
padding-right : 1.6304%;
clear : none;
float : none;
  #mainHeader  {
width : 100%;
border-bottom : thin dotted #666666;
background-color : #FFFFFF;
  #headerHome  {
width : 100%;
margin-left : 0;
  #mainTitle  {
width : 100%;
margin-left : 0;
clear : both;
display : none;
  #mainNav  {
width : 100%;
clear : both;
margin-left : 0;
  #mainNavList  {
width : 100%;
margin-left : 0;
  .manNavBtn  {
width : 48.3146%;
clear : none;
margin-left : 3.3707%;
  #sideNav  {
width : 100%;
background-color : #FFFFFF;
border-bottom-right-radius : 4px;
border-bottom-left-radius : 4px;
  #mainArticle  {
width : 100%;
clear : both;
background-color : #FFFFFF;
  .zeroMargin_mobile  {
margin-left : 0;
  .hide_mobile  {
display : none;
  @media only screen and (min-width:481px)  { 
  #mainHeader  {  width : 100%;
border-bottom : thin dotted #666666;
  #headerHome  {
width : 36.464%;
margin-left : 0;
  #mainTitle  {
width : 61.8784%;
clear : none;
margin-left : 1.6574%;
display : block;
  #mainNav  {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
float : right;
  #mainNavList  {
width : 100%;
margin-left : 0;
  .manNavBtn  {
width : 17.8571%;
margin-left : 2.6785%;
clear : none;
  #sideNav  {
width : 11.0497%;
  #mainArticle  {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
  #adSide  {
width : 23.7569%;
margin-left : 1.6574%;
clear : none;
  .hide_tablet  {
display : none;
  .zeroMargin_tablet  {
margin-left : 0;
  @media only screen and (min-width:769px)  { 
  .gridContainer  {  width : 94.1149%;
max-width : 1000px;
padding-left : 0.4425%;
padding-right : 0.4425%;
margin : auto;
clear : none;
float : none;
margin-left : auto;
  #mainHeader  {
width : 100%;
  #headerHome  {
width : 20.6896%;
margin-left : 0;
  #mainTitle  {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
display : block;
  #mainNav  {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
float : right;
  #mainNavList  {
width : 100%;
margin-left : 0;
  .manNavBtn  {
width : 17.2%;
clear : none;
margin-left : 1.2%;
  #sideNav  {
width : 20.6896%;
  #mainArticle  {
width : 49.5297%;
clear : none;
margin-left : 0.9404%;
  #adSide  {
width : 27.8996%;
clear : none;
margin-left : 0.9404%;
  .zeroMargin_desktop  {
margin-left : 0;
  .hide_desktop  {
display : none;
  #mainArticle img  {  border : #333333 solid thin;
border-radius : 6px;
box-shadow : 0 0;
padding : 5px 5px 8px;
background-color : #E9E9E9;